《FlaskWeb开发：基于Python的Web应用开发实战》第3节

落叶飞空

基于给自己的网页加上Bootstrap的效果：
1.首先在工作目录下新建一个templates文件夹。
2.在文件夹中新建一个index.html、user.html。
        <1>.index.html中的内容如下：
              

<h1>Hello,World!</h1>

        <2>.user.html中的内容如下:

{% extends "bootstrap/base.html" %}
{% block title%}Flasky{%endblock%}
{%block navbar %}
<div class="nvbar navbar-inverse" role="navigation" >
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a >FishC</a></li>
            </ul>
        </div>

    </div>
</div>
{% endblock%}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello,{{name}}!</h1>
    </div>
</div>
{% endblock %}

3.新建一个名为lesson3.py的文件，内容如下：
              

        from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

4.cmd中运行如下代码：
        python lesson3.py runserver -h 127.0.0.1 -p 80

程序效果如下：
               


学习内容：
1.Jinjia2模板内容的引用。
      

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

        上述代码中会将浏览器获得的变量内容传给templates目录下的user.html文件中的{{name}}变量。

2.使用Bootstrap渲染网页。
      

{% extends "bootstrap/base.html" %}
{% block title%}Flasky{%endblock%}
{%block navbar %}
<div class="nvbar navbar-inverse" role="navigation" >
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a >FishC</a></li>
            </ul>
        </div>

    </div>
</div>
{% endblock%}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello,{{name}}!</h1>
    </div>
</div>
{% endblock %}

        <1>.上述代码中，第一行代码的作用是：
                Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html， 从而实现模板继
承。
        <2>.这段代码的作用是创建导航栏，class中的内容是Bootsrap中的css样式。

{%block navbar %}
<div class="nvbar navbar-inverse" role="navigation" >
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a >FishC</a></li>
            </ul>
        </div>

    </div>
</div>
{% endblock%}

<3>.这段代码是设置网页的主题内容，起重{{name}}变量是通过render_template('user.html', name=name)传入进来的：

{% endblock%}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello,{{name}}!</h1>
    </div>
</div>
{% endblock %}

最后网站效果可以通过下列地址查看（手机和电脑访问效果不一样哦！）：
http://60.205.181.198/user/Fishc