版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/apollo_miracle/article/details/83016021
1 学习目标
- 能够写出 jinja2 中变量代码块和控制代码块的格式
- 能够写出在模板中字典，列表的取值方式
- 能够写出数组反转的自定义过滤器（使用1种方式即可）
2 Jinja2模板引擎简介
2.1 模板
在前面的示例中，视图函数的主要作用是生成请求的响应，这是最简单的请求。实际上，视图函数有两个作用：处理业务逻辑和返回响应内容。在大型应用中，把业务逻辑和表现内容放在一起，会增加代码的复杂度和维护成本。本节学到的模板，它的作用即是承担视图函数的另一个作用，即返回响应内容。
- 模板其实是一个包含响应文本的文件，其中用占位符(变量)表示动态部分，告诉模板引擎其具体的值需要从使用的数据中获取
- 使用真实值替换变量，再返回最终得到的字符串，这个过程称为“渲染”
- Flask是使用 Jinja2 这个模板引擎来渲染模板
使用模板的好处：
- 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
- 而模板则取到视图函数的数据结果进行展示(视图展示方面)
- 代码结构清晰，耦合度低
2.2 Jinja2
2.2.1 两个概念
Jinja2：是 Python 下一个被广泛应用的模板引擎，是由Python实现的模板语言，他的设计思想来源于 Django 的模板引擎，并扩展了其语法和一系列强大的功能，其是Flask内置的模板语言。
模板语言：是一种被设计来自动生成文档的简单文本格式，在模板语言中，一般都会把一些变量传给模板，替换模板的特定位置上预先定义好的占位变量名。
2.2.2 渲染模版函数
Flask提供的 render_template 函数封装了该模板引擎
render_template 函数的第一个参数是模板的文件名，后面的参数都是键值对，表示模板中变量对应的真实值。
2.2.3 使用
- {{}} 来表示变量名，这种 {{}} 语法叫做变量代码块
<h1>{{ post.title }}</h1>
Jinja2 模版中的变量代码块可以是任意 Python 类型或者对象，只要它能够被 Python 的 str() 方法转换为一个字符串就可以，比如，可以通过下面的方式显示一个字典或者列表中的某个元素:
{{ your_dict['key'] }}
{{ your_list[0] }}
- 用 {%%} 定义的控制代码块，可以实现一些语言层次的功能，比如循环或者if语句
{% if user %}
{{ user }}
{% else %}
hello!
<ul>
{% for index in indexs %}
<li> {{ index }} </li>
{% endfor %}
</ul>
- 使用 {# #} 进行注释，注释的内容不会在html中被渲染出来
{# {{ 注释 }} #}3 模板的使用
- 在项目下创建
templates文件夹，用于存放所有的模板文件，并在目录下创建一个模板html文件temp_demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>
- 设置 templates 文件夹属性以便能够在代码中有智能提示
- 设置 html 中的模板语言，以便在 html 有智能提示
- 创建视图函数，将该模板内容进行渲染返回
@app.route('/')
def index():
return render_template('temp_demo1.html')
访问：http://127.0.0.1:5000/ 运行测试
- 代码中传入字符串，列表，字典到模板中
@app.route('/')
def index():
# 往模板中传入的数据
my_str = 'Hello world'
my_int = 10
my_array = [3, 4, 2, 1, 7, 9]
my_dict = {
'name': 'xiaoming',
'age': 18
}
return render_template('temp_demo1.html',
my_str=my_str,
my_int=my_int,
my_array=my_array,
my_dict=my_dict
)
- 模板中代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我的模板html内容
<br/>{{ my_str }}
<br/>{{ my_int }}
<br/>{{ my_array }}
<br/>{{ my_dict }}
</body>
</html>
- 运行效果
我的模板html内容
Hello world
10
[3, 4, 2, 1, 7, 9]
{'age': 18, 'name': 'xiaoming'}- 相关运算，取值
<br/> my_int + 10 的和为：{{ my_int + 10 }}
<br/> my_int + my_array第0个值的和为：{{ my_int + my_array[0] }}
<br/> my_array 第0个值为：{{ my_array[0] }}
<br/> my_array 第1个值为：{{ my_array.1 }}
<br/> my_dict 中 name 的值为：{{ my_dict['name'] }}
<br/> my_dict 中 age 的值为：{{ my_dict.age }}
注意：取值的方式可以用点语法，也可以用中括号的语法，不管变量是个列表还是字典都支持中括号语法和点语法
- 结果
my_int + 10 的和为：20
my_int + my_array第0个值的和为：13
my_array 第0个值为：3
my_array 第1个值为：4
my_dict 中 name 的值为：xiaoming
my_dict 中 age 的值为：184 过滤器
过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值，我们还需要修改变量的显示，甚至格式化、运算等等，而在模板中是不能直接调用 Python 中的某些方法，那么这就用到了过滤器。
4.1 使用方式
- 过滤器的使用方式为：变量名 | 过滤器。
{{ variable | filter_name(*args) }}
- 如果没有任何参数传给过滤器，则可以把括号省略掉
{{ variable | filter_name }}
- 如：capitalize，这个过滤器的作用：把变量variable 的值的首字母转换为大写，其他字母转换为小写
4.2 链式调用
在 jinja2 中，过滤器是可以支持链式调用的，示例如下：
{{ "hello world" | reverse | upper }}
4.3 常见内建过滤器
4.3.1 字符串操作
- safe：禁用转义（默认：escape）
<p>{{ '<em>hello</em>' | safe }}</p>
输入代码：
{{ html_str }}<br>
{{ html_str | safe }}<br>
{{ html_str | escape }}<br>输出：
带safe的，是将内容当做html标签进行解析了，没有带safe的是原样输出，safe是安全的意思，这里怎么理解呢?
如果这里当真就把 html_str 当做一个html代码进行执行了，这个其实是有危险性的。
如果这个内容是让用户输入的：一个懂程序的人写入了一个死循环弹框的 js 代码，然后你还认为是safe安全的，那你这个网页就废了，所以一般是我们自己传递给前端模板的，才有可能使用safe。如果是用户输入的内容，进行显示肯定不会使用safe，直接原样输出就可。
总结如下：
- safe不管碰到html代码还是js代码，都会进行解析然后执行(safe意味安全的理解：我认为你是安全的，我就可以把你当做代码进行执行)
- 不添加safe，就会原样输出
- capitalize：把变量值的首字母转成大写，其余字母转小写
<p>{{ 'hello' | capitalize }}</p>
- lower：把值转成小写
<p>{{ 'HELLO' | lower }}</p>
- upper：把值转成大写
<p>{{ 'hello' | upper }}</p>
- title：把值中的每个单词的首字母都转成大写
<p>{{ 'hello' | title }}</p>
- reverse：字符串反转（注意不是列表）
<p>{{ 'olleh' | reverse }}</p>
- format：格式化输出
<p>{{ '%s is %d' | format('name',17) }}</p>
- striptags：渲染之前把值中所有的HTML标签都删掉
<p>{{ '<em>hello</em>' | striptags }}</p>
- truncate: 字符串截断
<p>{{ 'hello every one' | truncate(9)}}</p>
4.3.2 列表操作
- first：取第一个元素（即：第0个索引的元素）
<p>{{ [1,2,3,4,5,6] | first }}</p>
- last：取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>
- length：获取列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>
- sum：列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>
上图说明：对于my_dict_list列表中字典的属性 price 进行求和
- sort：列表排序（默认升序排列）
<p>{{ [6,2,3,1,5,4] | sort }}</p>
4.4 语句块过滤
{% filter upper %}
#一大堆文字#
{% endfilter %}5 自定义过滤器
过滤器的本质是函数。当模板内置的过滤器不能满足需求，可以自定义过滤器。自定义过滤器有两种实现方式：
- 一种是通过Flask应用对象的 add_template_filter 方法
- 通过装饰器来实现自定义过滤器
重要：自定义的过滤器名称如果和内置的过滤器重名，会覆盖内置的过滤器。
需求：添加列表反转的过滤器
方式一：add_template_filter
通过调用应用程序实例的 add_template_filter 方法实现自定义过滤器。该方法第一个参数是函数名，第二个参数是自定义的过滤器名称：
def do_listreverse(li):
# 通过原列表创建一个新列表
temp_li = list(li)
# 将新列表进行返转
temp_li.reverse()
return temp_li
app.add_template_filter(do_listreverse,'lireverse')
注意：一般不对原列表进行反转，而是再找一个变量存储原列表，并进行数据处理
方式二：装饰器
用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。
@app.template_filter('lireverse')
def do_listreverse(li):
# 通过原列表创建一个新列表
temp_li = list(li)
# 将新列表进行返转
temp_li.reverse()
return temp_li
- 在 html 中使用该自定义过滤器
<br/> my_array 原内容：{{ my_array }}
<br/> my_array 反转：{{ my_array | lireverse }}
- 运行结果
my_array 原内容：[3, 4, 2, 1, 7, 9]
my_array 反转：[9, 7, 1, 2, 4, 3]6 控制代码块
控制代码块主要包含两个：
- if 语句
- for 循环语句
- if/elif /else / endif
- for / endfor
6.1 if 语句
Jinja2 语法中的if语句跟 Python 中的 if 语句相似，后面的布尔值或返回布尔值的表达式将决定代码中的哪个流程会被执行：
{% if user.is_logged_in() %}
<a href='/logout'>Logout</a>
{% else %}
<a href='/login'>Login</a>
{% endif %}
过滤器可以被用在 if 语句中:
{% if comments | length > 0 %}
There are {{ comments | length }} comments
{% else %}
There are no comments
{% endif %}
6.2 循环
我们可以在 Jinja2 中使用循环来迭代任何列表或者生成器函数
{% for post in posts %}
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.text | safe }}</p>
</div>
{% endfor %}
循环和if语句可以组合使用，以模拟 Python 循环中的 continue 功能，下面这个循环将只会渲染post.text不为None的那些post：
{% for post in posts if post.text %}
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.text | safe }}</p>
</div>
{% endfor %}
在一个 for 循环块中你可以访问这些特殊的变量:
| 变量 | 描述 |
|---|---|
| loop.index | 当前循环迭代的次数（从 1 开始） |
| loop.index0 | 当前循环迭代的次数（从 0 开始） |
| loop.revindex | 到循环结束需要迭代的次数（从 1 开始） |
| loop.revindex0 | 到循环结束需要迭代的次数（从 0 开始） |
| loop.first | 如果是第一次迭代，为 True 。 |
| loop.last | 如果是最后一次迭代，为 True 。 |
| loop.length | 序列中的项目数。 |
| loop.cycle | 在一串序列间期取值的辅助函数。见下面示例程序。 |
在循环内部，你可以使用一个叫做loop的特殊变量来获得关于for循环的一些信息
- 比如：要是我们想知道当前被迭代的元素序号，并模拟Python中的enumerate函数做的事情，则可以使用loop变量的index属性，例如：
{% for post in posts%}
{{ loop.index }}, {{ post.title }}
{% endfor %}
- 会输出这样的结果
1, Post title
2, Second Post
- cycle函数会在每次循环的时候，返回其参数中的下一个元素，可以拿上面的例子来说明：
{% for post in posts%}
{{ loop.cycle('odd','even') }} {{ post.title }}
{% endfor %}
- 会输出这样的结果：
odd Post Title
even Second Post
6.3 示例程序
6.3.1 示例一
- 实现的效果
- 准备数据
# 只显示4行数据，背景颜色依次为：黄，绿，红，紫
my_list = [
{
"id": 1,
"value": "我爱工作"
},
{
"id": 2,
"value": "工作使人快乐"
},
{
"id": 3,
"value": "沉迷于工作无法自拔"
},
{
"id": 4,
"value": "日渐消瘦"
},
{
"id": 5,
"value": "以梦为马，越骑越傻"
}
]
- 模板代码
{% for item in my_list if item.id != 5 %}
{% if loop.index == 1 %}
<li style="background-color: orange">{{ item.value }}</li>
{% elif loop.index == 2 %}
<li style="background-color: green">{{ item.value }}</li>
{% elif loop.index == 3 %}
<li style="background-color: red">{{ item.value }}</li>
{% else %}
<li style="background-color: purple">{{ item.value }}</li>
{% endif %}
{% endfor %}6.3.1 示例二
- 实现的效果
- 准备数据
@app.route("/control")
def control():
# 只显示5行内容（包括一行标题栏，4行数据），背景颜色依次为：绿，蓝，灰
my_list = [
{
"id": 1,
"value": "标题栏"
},
{
"id": 2,
"value": "工作使人快乐"
},
{
"id": 3,
"value": "沉迷于工作无法自拔"
},
{
"id": 4,
"value": "日渐消瘦"
},
{
"id": 5,
"value": "以梦为马，越骑越傻"
}
]
return render_template("demo2_control.html",
my_list=my_list)- 模板代码
{% for item in my_list %}
{% if loop.first %}
<li style='background-color: darkolivegreen '>{{ item.value }}</li>
{% else %}
<li style='background-color: {{ loop.cycle("#ccc", "skyblue") }}'>{{ item.value }}</li>
{% endif %}
{% endfor %}