Flask模板渲染
目录
Flask模板渲染
Jinja2模板引擎简介
模板
视图函数的主要作用是生成请求的响应,这是最简单请求.实际上,视图函数有两个作用:
- 处理业务逻辑
- 返回响应内容
在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本.
- 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取
- 使用真实值替换变量,再返回最终得到的字符串,这个过程称为'渲染'
- Flask是使用Jinja2这个模板引擎来渲染模板
使用模板的好处
- 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
- 而模板则取到视图函数的数据结果进行展示(试图展示方面)
- 代码结构清晰,耦合度低
Jinja2
两个概念
- Jinja2:是Python下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言
- 模板语言:是一种被设计来自动生成文档的简单文本格式,在模板语言中,一般都会把一些变量传给模板,替换模板的特定位置上预先定义好的占位变量名
渲染模板函数
- Flask提供的render_template函数封装了该模板引擎
- render_template函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值
模板变量
变量
-
代码中传入字符串,列表,字典到模板中
@app.route('/') def index(): # 往模板中传入的数据 my_str = 'Hello Word' # 字符串 my_int = 10 # 数字 my_array = [3, 4, 2, 1, 7, 9] # 列表 my_dict = { # 字典 'name': 'xiaoming', 'age': 18, 'weight': 125, } 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 Word 10 [3, 4, 2, 1, 7, 9] {'name': 'xiaoming','age': 18,'weight': 125} --> -
列表、字典的取值运算
<!--算数运算--> <br/> my_int + 10 的和为：{{ my_int + 10 }} <!--列表取值 1. list[index] 2. list.index --> <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 }} <!--字典取值 1. dict.key 2. dice[key] 3. dict.get(key) --> <br/> my_dict 中 name 的值为：{{ my_dict['name'] }} <br/> my_dict 中 age 的值为：{{ my_dict.age }} <br/> my_dict 中 weight 的值为：{{ my_dict.get('weight') }} <!-- 运行结果： 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 的值为：18 my_dict 中 weight 的值为：125 -->
控制结构
条件控制语句
Jinja2语法中的if语句跟Python中的if语句相似，后面的布尔值或者返回布尔值的表达式将决定代码中那个流程会被执行：
{% if user %}
Hello, {{ user }}
{% else %}
Hello, Stranger!
{% endif %}
for循环
我们可以在Jinja2中使用循环来迭代任何列表或者生成器函数
<ul>
{% for comment in comment %}
<li>{{ comment }}</li>
{% endfor %}
</ul>
循环和if语句可以组合使用
{% for post in posts if post.text %}
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.text | safe }}</p>
</div>
{% endfor %}
在一个for循环块中你可以访问这些特殊的变量
| 变量 | 描述 |
|---|---|
| loop.inde | 当前循环迭代的次数(从1开始) |
| loop.index0 | 当前循环迭代的次数(从0开始) |
| loop.revindex | 到循环结束需要迭代的次数(从1开始) |
| loop.revindex0 | 到循环结束需要迭代的次数(从0开始) |
| loop.frist | 如果是第一次迭代,为True |
| loop.last | 如果是最后一次迭代,为True |
| loop.length | 序列中的项目数 |
| loop.cycle | 在一串序列间期取值的辅助函数 |
宏，类似Python代码中的函数
定义宏
{% macro input() %}
<input type="text"
name="username"
value=""
size="30"/>
{% endmacro %}
调用宏
{{ input() }}
定义带参数的宏
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"/>
{% endmacro %}
调用宏，并传递参数
{{ input(value='name',type='password',size=40)}}
把宏单独抽取出来，封装成html文件，其它模板中导入使用
文件名可以自定义macro.html
{% macro function() %}
<input type="text" name="username" placeholde="Username">
<input type="password" name="password" placeholde="Password">
<input type="submit">
{% endmacro %}
在其它模板文件中先导入，再调用
{% import 'macro.html' as func %}
{% func.function() %}
模板继承
在模板中,可能会遇到以下情况:
- 多个模板具有完全相同的顶部和底部内容
- 多个模板中具有相同的模板代码内容,但是内容中部分值不同
- 多个模板中具有完全相同的html代码块内容
像遇到这种情况,可以使用Jinja2模板中的继承来进行实现
模板继承是为了重用模板中的公共内容.一般Web开发中,继承主要使用在网站的顶部菜单,底部.这些内容可以定义在父模板中,子模板直接继承,不需要重写
定义标签的内容
{% block top %}
{% endblock%}
- 相当于在父模板中挖个坑,当子模板继承父模板时候,可以进行填充
- 子模板使用extends指令声明这个模板继承自哪个模板
- 父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/parent')
def parent():
return render_template('parent.html')
@app.route('/child')
def child():
return render_template('child.html')
if __name__ == '__main__':
app.run(debug=True)
父模板：parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>我是头部</h2>
<hr>
{# 将父模板中需要重写的内容使用block包含起来 #}
{% block content %}
<h2>我是父模板内容</h2>
{% endblock %}
<hr>
<h2>我是底部</h2>
</body>
</html>
子模板：child.html
{# 1 使用extends关键字集成模板 #}
{% extends '06_one.html' %}
{# 重写block #}
{% block content %}
<h2>我是子模板内容</h2>
{% endblock %}
- 模板继承使用时注意点：
- 不支持多继承。
- 为了便于阅读，在子模板中使用extends时，尽量写在模板的第一行。
- 不能在一个模板文件中定义多个相同名字的block标签。
- 当在页面中使用多个block标签时，建议给结束标签起个名字，当多个block嵌套时，阅读性更好。
包含(Include)
Jinja2模板中，除了宏和继承，还支持一种代码重用的功能，叫包含(Include)。它的功能是将另一个模板整个加载到当前模板中，并直接渲染。
示例：
include的使用
{% include 'hello.html' %}
包含在使用时，如果包含的模板文件不存在时，程序会抛出TemplateNotFound异常，可以加上ignore missing关键字。如果包含的模板文件不存在，会忽略这条include语句。
示例：
include的使用加上关键字ignore missing
{% include 'hello.html' ignore missing %}
- 宏、继承、包含：
- 宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
- 继承(Block)的本质是代码替换，一般用来实现多个页面中重复不变的区域。
- 宏(Macro)的功能类似函数，可以传入参数，需要定义、调用。
- 包含(include)是直接将目标模板文件整个渲染出来。
过滤器
过滤器本质就是函数。
有时候我们不仅仅只是需要输出变量的值，我们还需要修改变量的显示，甚至格式化、运算等等，而在模板中是不能直接调用Python中的某些方法，那么这就用到了过滤器
使用方法：
- 过滤器的使用方法为：变量名 | 过滤器.
- {{ variable | filter_name(*args)}}
- 如果没有任何参数传给过滤器，则可以把括号省略掉
- {{variable | filter_name}}
- 如：'',这个过滤器的作用:把变量variable的值首字母首字母转化为大写,其余字母转化为小写
链式调用
在Jinja2中,过滤器支持链式调用,示例如下:
{{'hello word' | reverse | upper}}
输出结果为：
DROW OLLEH
常见内建过滤器
-
safe：禁用转义
<p>{{ '<em>hello</em>' | safe }}</p> -
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>
列表操作
-
first：取第一个元素
<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> -
sort：列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>
语句块过滤
{% filter upper %}
#一大堆文字#
{% endfilter %}
自定义过滤器
过滤器本质是函数，当模板内置的过滤器不能满足需求，可以自定义过滤器。自定义过滤器有两种方式实现。
- 一种是通过Flask应用对象的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]
-->
完整代码：
from flask import Flask, render_template
app = Flask(__name__)
# 1.自定义列表反转函数
@app.template_filter('list_reverse')
# 方法二:使用装饰器
def list_reverse(list):
# list = []
list.reverse()
return list
# 2.将自定义的函数添加到flask过滤器中
app.add_template_filter(list_reverse, 'list_reverse')
@app.route('/')
def index():
list = [1, 3, 4, 5, 2] # 2,5,4,3,1
return render_template('test.html', list=list)
if __name__ == '__main__':
app.run(debug=True)
<!--test.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>自定义过滤器</h2>
<br>
{{ list }}
<br>
{{ list | list_reverse }}
</body>
</html>
