By Rose Ou

更新日期:

文章目录

在上一章中，我们把生成的页面的HTML代码直接写到了视图函数的return语句里，事实上,我们不可能把所有HTML代码都写到里面。我们应该把代码写到一个模版里。

模板是一个包含响应文本的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中（上下文的含义后面会提到，现在无需纠结）才能知道。使用真实值替换变量，再返回最终得到的响应字符串，这一过程称为渲染。Flask使用了Jinja2这个模板引擎来渲染模板。

好，那么我们现在把之前那两个路由的HTML代码放到模板里。首先我们要在playwithflask文件夹里创建一个叫templates文件夹，因为默认情况下Flask会在templates文件夹里寻找模板。然后进入templates文件夹，创建index.html文件来放显示程序根地址页面的代码：

playwithflask/templates/index.html:

1
<h1>Hello World!</h1>

然后再创建一个user.html 。
playwithflask/templates/user.html:

1
<h1>Hello, {{ name }}!</h1>

接着再打开hello.py将代码修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from flask import Flask, render_template

app = Flask(__name__)

@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)

现在来解释一下修改了的部分：
1.新导入了render_template()函数来渲染模板。

2.这个函数的第一个参数是模板的文件名，随后的参数都是键值对，表示模板中变量对应的真实值。

3.看到第二个路由里的user.html模板收到一个name变量。这里的name=name是关键字参数，左边是参数名，右边是传入该参数的值。

4.注意：上面说到Flask会在templates文件夹里寻找模板。事实上，如果你的应用是个模块，这个文件夹应该与模块同级；如果它是一个包，那么这个文件夹作为包的子目录。现在我们的应用只是一个单一的hello.py 模块，所以我们创建的templates文件夹与它同级。

嗯，修改好代码后，我们再来运行hello.py看看:

1
2
3
4
5
(venv) $ python hello.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger pin code: 959-578-864

现在打开浏览器，在地址栏输入http://127.0.0.1:5000/ ，然后我们就会看到：

如果输入http://127.0.0.1:5000/user/rose/ ，就会看到：

效果跟之前是一摸一样的。

在这两个路由中，我们都是把一个URL和一个视图函数绑定，实际上，还可以把几个URL绑定到同一个函数上。再次打开hello.py把部分修改成：

1
2
3
4
5
6
7
8
#...

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

#...

这里就把两个URL（’/user/‘和’/user/‘）绑定到一个视图函数上啦，也就是请求这两个URL时，视图函数user()都会被调用。所以这里要给name参数一个默认值None，否则，当我们没有给name传入值时也就是访问’/user/‘这个URL时，就会报错。

然后再把playwithflask/templates/user.html修改成：

1
2
3
4
5
{% if name %}
    <h1>Hello, {{ name }}!</h1>
{% else %}
    <h1>Hello, Stranger!</h1>
{% endif %}

这里是Jinja2的语法。意思是当我们给name传入值时，就把这个值传入并返回出来，当我们没有给name传入值，就返回Hello，Stranger！

好，我们来启动服务器，并在浏览器中输入http://127.0.0.1:5000/user/ 。

然后如果给name输入值rose：

嗯，模板就是这样渲染的。

Last: Flask学习教程 Part1 2.3:使用Flask-Script扩展支持命令行选项
Next: Flask学习教程 Part1 3.2:错误页面

文章目录