赵走x博客 - 开发者的网上家园

Flask 实战：16、模板基本用法

资源编号:75854 Python Web Flask Web开发实战：入门、进阶与原理解析热度：72

在第1章里，当用户访问程序的根地址时，我们的视图函数会向客户端返回一行HTML代码。然而，一个完整的HTML页面往往需要几十行甚至上百行代码，如果都写到视图函数里，那可真是个噩梦。这样的代码既不简洁也难于维护，正确的做法是把HTML代码存储在单独的文件中，以便让程序的业务逻辑和表现逻辑分离，即控制器和用户界面的分离。

在动态Web程序中，视图函数返回的HTML数据往往需要根据相应的变量（比如查询参数）动态生成。当HTML代码保存到单独的文件中时，我们没法再使用字符串格式化或拼接字符串的方式来在HTML代码中插入变量，这时我们需要使用模板引擎（template engine）。借助模板引擎，我们可以在HTML文件中使用特殊的语法来标记出变量，这类包含固定内容和动态部分的可重用文件称为模板（template）。

模板引擎的作用就是读取并执行模板中的特殊语法标记，并根据传入的数据将变量替换为实际值，输出最终的HTML页面，这个过程被称为渲染（rendering）。Flask默认使用的模板引擎是Jinja2，它是一个功能齐全的Python模板引擎，除了设置变量，还允许我们在模板中添加if判断，执行for迭代，调用函数等，以各种方式控制模板的输出。对于Jinja2来说，模板可以是任何格式的纯文本文件，比如HTML、XML、CSV、LaTeX等。在这一章，我们会学习Jinja2模板引擎的基本用法和一些常用技巧。

# 1、模板基本用法

这一节我们将以一个简单的例子来介绍如何使用Jinja2创建HTML模板，并在视图函数中渲染模板，最终实现HTML响应的动态化。

### 1、创建模板

假设我们需要编写一个用户的电影清单页面，类似IMDb的watchlist页面的简易版，模板中要显示用户信息以及用户收藏的电影列表，包含电影的名字和年份。我们首先创建一些虚拟数据用于测试显示效果：

```
user = {
    'username': 'Grey Li',
    'bio': 'A boy who loves movies and music.',
}

movies = [
    {'name': 'My Neighbor Totoro', 'year': '1988'},
    {'name': 'Three Colours trilogy', 'year': '1993'},
    {'name': 'Forrest Gump', 'year': '1994'},
    {'name': 'Perfect Blue', 'year': '1997'},
    {'name': 'The Matrix', 'year': '1999'},
    {'name': 'Memento', 'year': '2000'},
    {'name': 'The Bucket list', 'year': '2007'},
    {'name': 'Black Swan', 'year': '2010'},
    {'name': 'Gone Girl', 'year': '2014'},
    {'name': 'CoCo', 'year': '2017'},
]
```

我们在templates目录下创建一个watchlist.html作为模板文件，然后使用Jinja2支持的语法在模板中操作这些变量，如代码所示。

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{user.username}}'s Watchlist</title>
</head>
<body>

<a href="{{url_for('index')}}">← Return</a>
<h2>{{user.username}}</h2>

{% if user.bio %}
    <i>{{user.bio}}</i>
{% else %}
    <i>This user has not provided a bio.</i>
{% endif %}

{# 下面是电影清单（这是注释）#}
<h5>{{user.username}}'s Watchlist ({{movies|length}})</h5>
<ul>
    {% for movie in movies %}
        <li>{{movie.name}}-{{movie.year}}</li>
    {% endfor %}
</ul>
</body>
</html>
```

>提示
这里创建了一个基础的HTML文档结构，关于HTML5的结构组成，你可以访问[https://www.w3.org/wiki/HTML_structural_elements](https://www.w3.org/wiki/HTML_structural_elements) 了解。

在模板中使用的`←`是我们第2章提及的HTML实体。HTML实体除了用来转义HTML保留符号外，通常会被用来显示不容易通过键盘输入的字符。这里的`←`会显示为左箭头，另外，我们还经常使用©；来显示版权标志，你可以访问[https://dev.w3.org/html5/html-author/charref](https://dev.w3.org/html5/html-author/charref) 查看所有可用的HTML实体。

在模板中添加Python语句和表达式时，我们需要使用特定的定界符把它们标示出来。watchlist.html中涉及的模板语法，我们会在下面逐一介绍。首先，你可以在上面的代码中看到Jinja2里常见的三种定界符：

#### （1）语句

比如if判断、for循环等：

```
{% ... %}
```

#### （2）表达式

比如字符串、变量、函数调用等：

```
{{ ... }}
````

#### （3）注释

```
{# ... #}
```

另外，在模板中，Jinja2支持使用“.”获取变量的属性，比如user字典中的username键值通过“.”获取，即user.username，在效果上等同于user['username']。

### 2、模板语法

利用Jinja2这样的模板引擎，我们可以将一部分的程序逻辑放到模板中去。简单地说，我们可以在模板中使用Python语句和表达式来操作数据的输出。但需要注意的是，Jinja2并不支持所有Python语法。而且出于效率和代码组织等方面的考虑，我们应该适度使用模板，仅把和输出控制有关的逻辑操作放到模板中。

Jinja2允许你在模板中使用大部分Python对象，比如字符串、列表、字典、元组、整型、浮点型、布尔值。它支持基本的运算符号（+、-、*、/等）、比较符号（比如==、！=等）、逻辑符号（and、or、not和括号）以及in、is、None和布尔值（True、False）。

Jinja2提供了多种控制结构来控制模板的输出，其中for和if是最常用的两种。在Jinja2里，语句使用{%...%}标识，尤其需要注意的是，在语句结束的地方，我们必须添加结束标签：

```
{% if user.bio %}
    <i>{{ user.bio }}</i>
{% else %}
    <i>This user has not provided a bio.</i>
{% endif %}
```

在这个If语句里，如果user.bio已经定义，就渲染{%if user.bio%}和{%else%}之间的内容，否则就渲染{%else%}和{%endif%}之间的默认内容。末尾的{%endif%}用来声明if语句的结束，这一行不能省略。

和在Python里一样，for语句用来迭代一个序列：

```
<ul>
    {% for movie in movies %}
    <li>{{ movie.name }} - {{ movie.year }}</li>
    {% endfor %}
</ul>
```

和其他语句一样，你需要在for循环的结尾使用endfor标签声明for语句的结束。在for循环内，Jinja2提供了多个特殊变量，常用的循环变量如表3-1所示。

![image.png](https://img.hacpai.com/file/2019/09/image-115d7ee3.png)

表3-1　常用的Jinja2 for循环特殊变量

完整的for循环变量列表请访问[http://jinja.pocoo.org/docs/2.10/templates/#for](http://jinja.pocoo.org/docs/2.10/templates/#for) 查看。

### 3、渲染模板

渲染一个模板，就是执行模板中的代码，并传入所有在模板中使用的变量，渲染后的结果就是我们要返回给客户端的HTML响应。在视图函数中渲染模板时，我们并不直接使用Jinja2提供的函数，而是使用Flask提供的渲染函数render_template()，如代码清单所示。

```
from flask import Flask, render_template
...
@app.route('/watchlist')
def watchlist():
    return render_template('watchlist.html', user=user, movies=movies)

```

在render_template（）函数中，我们首先传入模板的文件名作为参数。如第1章项目结构部分所说，Flask会在程序根目录下的templates文件夹里寻找模板文件，所以这里传入的文件路径是相对于templates根目录的。除了模板文件路径，我们还以关键字参数的形式传入了模板中使用的变量值，以user为例：左边的user表示传入模板的变量名称，右边的user则是要传入的对象。

除了render_template()函数，Flask还提供了一个render_template_string()函数用来渲染模板字符串。

其他类型的变量通过相同的方式传入。传入Jinja2中的变量值可以是字符串、列表和字典，也可以是函数、类和类实例，这完全取决于你在视图函数传入的值。下面是一些示例：

```
<p>这是列表my_list的第一个元素：{{ my_list[0] }}</p>
<p>这是元组my_tuple的第一个元素：{{ my_tuple[0] }}</p>
<p>这是字典my_dict的键为name的值：{{ my_dict['name'] }}</p>
<p>这是函数my_func的返回值：{{ my_func() }}</p>
<p>这是对象my_object调用某方法的返回值：{{ my_object.name() }}</p>
```

如果你想传入函数在模板中调用，那么需要传入函数对象本身，而不是函数调用（函数的返回值），所以仅写出函数名称即可。当把函数传入模板后，我们可以像在Python脚本中一样通过添加括号的方式调用，而且你也可以在括号中传入参数。

根据我们传入的虚拟数据，render_template()渲染后返回的HTML数据如下所示：

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grey Li's Watchlist</title>
</head>
<body>
<a href="/">← Return</a>
<h2>Grey Li</h2>
<i>A boy who loves movies and music.</i>
<h5>Grey Li's Watchlist (10):</h5>
<ul>
    <li>My Neighbor Totoro - 1988</li>
    <li>Three Colours trilogy - 1993</li>
    <li>Forrest Gump - 1994</li>
    <li>Perfect Blue - 1997</li>
    <li>The Matrix - 1999</li>
    <li>Memento - 2000</li>
    <li>The Bucket list - 2007</li>
    <li>Black Swan - 2010</li>
    <li>Gone Girl - 2014</li>
    <li>CoCo - 2017</li></ul>
</body>
</html>
```

在和渲染前的模板文件对比时你会发现，原模板中所有的Jinja2语句、表达式、注释都会在执行后被移除，而所有的变量都会被替换为对应的数据。访问[http://localhost:5000/watchlist](http://localhost:5000/watchlist) 即可看到渲染后的页面，如图3-1所示。

![image.png](https://img.hacpai.com/file/2019/09/image-c14bcb68.png)

图3-1　渲染后的页面