第十阶段 -- Flask框架03：【Jinja2模板01：模板；过滤器；控制语句if for】

文章目录

1. Jinja2模板介绍和查找路径
2. 模板传参及其技巧
3. 模板中使用url_for
4. Jinja2过滤器
- 1. 基本使用
- 2. 过滤器介绍
- 3. default详解
- 4. 常用过滤器讲解
- 5. 自定义过滤器
5. 控制语句 if
6. 控制语句 for

1. Jinja2模板介绍和查找路径

模板是一个 web 开发必备的模块。因为我们在渲染一个网页的时候，并不是只渲染一个纯文本字符串，而是需要渲染一个有富文本标签的页面。这时候我们就需要使用模板了。在 Flask 中，配套的模板是 Jinja2 ， Jinja2 的作者也是 Flask 的作者。这个模板非常的强大，并且执行效率。

不建议去官网学习，多，乱。

官网：http://jinja.pocoo.org/

查找路径：
1. 在渲染模版的时候，默认会从项目根目录下的templates目录下查找模版。
2. 如果不想把模版文件放在templates目录下，那么可以在Flask初始化的时候指定template_folder来指定模版的路径。
Flask 渲染 Jinjia 模板：

要渲染一个模板，通过 render_template 方法即可；如：

from flask import Flask,render_template
app = Flask(__name__)@app.route('/')
def hello_world():return render_template('index.html')

示例：

from flask import Flask,render_template# 02. 如果不想把模版文件放在`templates`目录下，那么可以在`Flask`初始化的时候指定`template_folder`来指定模版的路径。
# __name__参数的作用：可以改变模版的查找路径
app = Flask(__name__,template_folder='D:/demo')@app.route('/')
def hello_world():# return 'Hello World!'# return '<p><span>清华、北大、浙大的计算机课程资源集都在这里了</span></p>'# 去操作数据库拿到数据# 模拟数据库的一个用户数据uname='momo'return render_template('index.html',content=uname)# 查询所有的新闻信息
# 01. 在渲染模版的时候，默认会从项目根目录下的`templates`目录下查找模版。
@app.route('/news/list/')
def news_list():return render_template('news/news_list.html')if __name__ == '__main__':app.run(debug=True)

【被渲染的模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p><span>清华、北大、浙大的计算机课程资源集都在这里了</span></p><h3>系统首页1</h3><p>欢迎<font color="red"> {{ content}} </font>登录某政府平台</p>
</body>
</html>

【被渲染的模板】news_list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>这是新闻列表页1</h2><p>数据1</p><p>数据2</p><p>数据3</p><p>数据4</p>
</body>
</html>

2. 模板传参及其技巧

在使用render_template渲染模版的时候，可以传递关键字参数（命名参数）。以后直接在模版中使用就可以了。

模板传参：

from flask import Flask,render_template
app = Flask(__name__)@app.route('/')
def hello_world():return  render_template('index.html',uname='momo')

页面传参：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SXT</title>
</head>
<body>从模版中渲染的数据<br>{{ uname}}
</body>
</html>

如果你的参数项过多，那么可以将所有的参数放到一个字典中，然后在传这个字典参数的时候，使用两个星号，将字典打散成关键字参数（也叫命名参数）。

如：

@app.route('/')
def hello_world():context = {'uname': 'momo','age': 18,'country': 'china','childrens': {'name': 'mjz','height': '62cm'}}return  render_template('index.html',**context)

注意访问技巧：

{{childrens.name}} 或者 {{childrens['name'}}}（了解）

示例：

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')
def hello_world():# 01. 在使用`render_template`渲染模版的时候，可以传递关键字参数（命名参数），【只适用于参数项较少的时候使用】。以后直接在模版中使用就可以了。return  render_template('index.html',uname="momo") #传参# return  render_template('index.html',uname="momo",pwd="123",gender='1',age=23,school='sxt')@app.route('/li/')
def hi():# 02. 如果你的参数项过多，那么可以将所有的参数放到一个字典中，然后在传这个字典参数的时候，使用两个星号，将字典打散成关键字参数（也叫命名参数）。context = {'uname': 'momo','age': 18,'country': 'china','childrens': {'name': 'mjz','height': '62cm'}}# return  render_template('index.html',**context) # 传参技巧return  render_template('index.html',c=context) #不使用传参技巧：取参时必须这么写：c.uname；uname不好使if __name__ == '__main__':app.run(debug=True)

【被渲染的模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>这个页面的数据 都是从Jinja2模版中渲染出来的   ---》取参数值</h2>
{#   <p>{{ uname }}</p>#}
{#   <p>{{ age }}</p>#}
{#   <p>{{ country}}</p>#}
{#   <p>{{ childrens.name }}</p>#}
{#   <p>{{ childrens['height'] }}</p>#}<h2>不使用传参技巧   的取参方式</h2>
<p>{{ c.uname }}</p>
<p>{{ c.childrens.name }}</p>
</body>
</html>

3. 模板中使用url_for

模版中的url_for跟我们后台视图函数中的url_for使用起来基本是一模一样的。也是传递视图函数的名字，也可以传递参数。使用的时候，需要在url_for左右两边加上一个{{ url_for('func') }}

传参也分为两种方式：

路劲传参：（在视图函数中）

python文件如：
@app.route('/accounts/login/<name>/')
def login(name):print(name)return render_template('login.html')

html页面使用如：

<a href="{{ url_for('login',p1='abc',p2='ddd',name='momo') }}"> 登录4 </a>

点击变为：http://127.0.0.1:5000/accounts/login/momo/?p1=abc&p2=ddd

查询传参：（在模板中）

<a href="{{ url_for('login',p1='abc',p2='ddd') }}">登录3</a>

点击变为：http://127.0.0.1:5000/accounts/login/momo/?p1=abc&p2=ddd

示例：

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')
def hello_world():return render_template('index.html')######## 方式01 #########
# 路劲变，就要修改！
# @app.route('/login/')
# def login():
#     return render_template('login.html')# 需求：在所用跟用户操作相关的地方 加上一个路径account
# @app.route('/account/login/')
# def login():
#     return render_template('login.html')######## 方式02 #########
@app.route('/account/login/<name>/')
def login(name):print(name)return render_template('login.html')if __name__ == '__main__':app.run(debug=True)

【模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>首页</h2><hr><a href="/login/">登录1</a><br><a href="/account/login/">登录2</a><h3>模版中url_for的基本使用</h3>{#  <a href="{{ url_for('login') }}">登录3</a>#}<h3>模版中url_for的传参：路径传参</h3>{# /account/login/tantan/   其中tantan为路径参数 #}<a href="{{ url_for('login',name='tantan') }}">登录4</a><h3>模版中url_for的传参：查询字符串传参</h3>{# /account/login/tantan/?p1=lol&amp;p2=daota #}<a href="{{ url_for('login',p1='lol',p2='daota',name='tantan') }}">登录5</a>
</body>
</html>

【模板】login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>用户名:<input type="text"><br>密  码:<input type="password"><br><input type="submit"  value="登录">
</body>
</html>

4. Jinja2过滤器

1. 基本使用

举个例子，提示时间处就用到了过滤器
简单使用一下：

@app.route('/')
def hello_world():return render_template('index.html',postion=-1)

【模板】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SXT</title>
</head>
<body><h3>过滤器的基本使用</h3><p>位置的绝对值为[未使用过滤器]：{{ postion}}</p><p>位置的绝对值为[使用过滤器]：{{ postion|abs}}</p>
</body>
</html>

简单总结：
1. 有时候我们想要在模版中对一些变量进行处理，那么就必须需要类似于Python中的函数一样，可以将这个值传到函数中，然后做一些操作。在模版中，过滤器相当于是一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面中。
2. 基本语法：{{ variable|过滤器名字 }}；使用管道符号|进行组合。

2. 过滤器介绍

过滤器是通过管道符号（|）进行使用的，例如：{{ name|length }}，将返回name的长度。过滤器相当于是一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到模板页面中。Jinja2中内置了许多过滤器，
查看所有过滤器：http://jinja.pocoo.org/docs/dev/templates/#builtin-filters
常用的过滤器简介：

abs(value)：返回一个数值的绝对值。例如：-1|abs。
default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。name|default(‘xiaotuo’)——如果name不存在，则会使用xiaotuo来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。
escape(value)或e：转义字符，会将<、>等符号转义成HTML中的符号。例如：content|escape或content|e。
first(value)：返回一个序列的第一个元素。names|first。
format(value,*arags,**kwargs)：格式化字符串。例如以下代码：

{{ “%s” - “%s”|format(‘Hello?’,“Foo!”) }}将输出：Helloo? - Foo!
last(value)：返回一个序列的最后一个元素。示例：names|last。
length(value)：返回一个序列或者字典的长度。示例：names|length。
join(value,d=’+’)：将一个序列用d这个参数的值拼接成字符串。
safe(value)：如果开启了全局转义，那么safe过滤器会将变量关掉转义。示例：content_html|safe。
int(value)：将值转换为int类型。
float(value)：将值转换为float类型。
lower(value)：将字符串转换为小写。
upper(value)：将字符串转换为小写。
replace(value,old,new)：替换将old替换为new的字符串。
truncate(value,length=255,killwords=False)：截取length长度的字符串。
striptags(value)：删除字符串中所有的HTML标签，如果出现多个空格，将替换成一个空格。
trim：截取字符串前面和后面的空白字符。
string(value)：将变量转换成字符串。
wordcount(s)：计算一个长字符串中单词的个数。

3. default详解

使用场景：个性签名

用户设置了签名：写什么就是什么

用户没设置签名：默认给出“此人狠懒，暂无任何签名”
示例：

#default过滤器的使用
@app.route('/')
def hello_world():context={'postion':-1}return render_template('index.html',**context)

【模块】html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SXT</title>
</head>
<body><h3>过滤器的基本使用</h3><p>个性签名[使用过滤器]：{{ signature|default('此人很懒，没有任何说明')}}</p>
</body>
</html>

访问结果

但若将上述的例子代码稍微改一改，例：

@app.route('/')
def hello_world():context={'postion':-1,'signature':None}return render_template('index.html',**context)

【模块】html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SXT</title>
</head>
<body><h3>过滤器的基本使用</h3><p>个性签名[使用过滤器]：{{ signature|default('此人很懒，没有任何说明')}}</p>
</body>
</html>

访问结果：

[外链图片转存失败(img-ZxadJTeG-1563282297674)(C:\Users\zhuwe\AppData\Roaming\Typora\typora-user-images\1563259896547.png)]

若此时需要让default过滤器生效的话，需要在default中添加’boolean=True’；例如：

<p>个性签名[使用过滤器]：{{ signature|default('此人很懒，没有任何说明',boolean=True)}}</p>

default过滤器使用总结：

使用方式{{ value|default('默认值') }}。如果value这个key不存在，那么就会使用default过滤器提供的默认值。如果，就不会使用

扩展：

使用方式{{ value|default('默认值') }}。

如果value这个key不存在，那么就会使用default过滤器提供的默认值。如果，就不会使用

例如：两种写法等价

<p>个性签名[使用过滤器]：{{ signature|default('此人很懒，没有任何说明',boolean=True)}}</p>
<p>个性签名[使用过滤器]：{{ signature or '此人很懒，没有任何说明'}}</p>

4. 常用过滤器讲解

示例：(包括上一节 default 过滤器)

from flask import Flask,render_template
from  datetime  import  datetimeapp = Flask(__name__)#将模版设置为自动加载模式
app.config['TEMPLATES_AUTO_RELOAD']=True# 01.过滤器的基本使用
# @app.route('/')
# def hello_world():
#     return render_template('index.html',postion=-1)################ Part I：default过滤器 ################# 02.default过滤器的使用
# @app.route('/')
# def hello_world():
#     context = {#         'postion': -1,
#         # 'signature':'天道酬勤',
#         'signature':None
#     }
#     return render_template('index.html', **context)################ Part II ################# 03.常用的过滤器讲解
# @app.route('/')
# def hello_world():
#     context = {#         'postion': -1,
#         # 'signature':'天道酬勤',
#         'signature':'<script>alert("杜绝眼高手低")</script>'
#     }
#     return render_template('index.html', **context)################ Part III：常用过滤器 ################# 04.常用的过滤器讲解
@app.route('/')
def hello_world():context = {'postion': -1,'signature':'<script>  alert("杜绝眼高手低")   </script>','persons':['momo','lulu','tantan'],'gender':'1','article':'好机会发的菲菲浮动，她妈的，老子心情不好,她妈的','news':'户发放，奋斗奋斗飞，十大酷刑,发得分多发点，浮动的，飞的，十大酷刑，飞的，飞地方， 的，浮动，十大酷刑， 发得分的，发的发到付， 浮动，浮动， ， 浮动，浮动，浮动','create_time':datetime(2019,2,1,17,50,11)}return render_template('index.html', **context)################ Part IV：自定义过滤器 ################# 05.自定义过滤器的步骤
@app.template_filter('cut')
def cut_words(value):value=value.replace("十大酷刑",'****')return value# 06.自定义过滤器   来处理时间
# 需求：操作发布新闻 与现在的时间间隔
@app.template_filter('handle_time')
def handle_time(time):"""time距离现在的时间间隔1. 如果时间间隔小于1分钟以内，那么就显示“刚刚”2. 如果是大于1分钟小于1小时，那么就显示“xx分钟前”3. 如果是大于1小时小于24小时，那么就显示“xx小时前”4. 如果是大于24小时小于30天以内，那么就显示“xx天前”5. 否则就是显示具体的时间 2018/10/20 16:15"""if isinstance(time, datetime):now = datetime.now()timestamp = (now - time).total_seconds()if timestamp < 60:return "刚刚"elif timestamp >= 60 and timestamp < 60 * 60:minutes = timestamp / 60return "%s分钟前" % int(minutes)elif timestamp >= 60 * 60 and timestamp < 60 * 60 * 24:hours = timestamp / (60 * 60)return '%s小时前' % int(hours)elif timestamp >= 60 * 60 * 24 and timestamp < 60 * 60 * 24 * 30:days = timestamp / (60 * 60 * 24)return "%s天前" % int(days)else:return time.strftime('%Y/%m/%d %H:%M')else:return timeif __name__ == '__main__':app.run(debug=True)

【模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
{#    <h3>过滤器的基本使用</h3>#}
{#    <p>位置的绝对值为[未使用过滤器]：{{ postion}}</p>    #}
{#    <p>位置的绝对值为[使用过滤器]：{{ postion|abs}}</p> #}
{#   <hr> #}
{#    <h3>default过滤器的使用</h3>    #}
{#    <p>个性签名1[使用过滤器]：{{ signature|default('此人很懒，暂无签名',boolean=True)}}</p> #}
{#    <p>个性签名2[使用or]：{{ signature or '此人很懒，没有任何说明'}}</p>    #}<hr><h3>常用的过滤器使用</h3><!--注意：jinja2模版 默认【全局】开启了 自动转译功能  意思是：会把"<"转换成html知识里边的实体字符"&lt;"--><p>个性签名3:{{ signature }}</p><!-- `autoescape`jinja标签，可以对他里面的代码块关闭或开启自动转义-->{% autoescape off %}<p>个性签名4:{{ signature | escape}}</p>{% endautoescape %}{#    <p>个性签名5:{{ signature | safe}}</p>#}<p>第一个人:{{ persons | first}}</p><p>最后一个人:{{ persons | last}}</p><p>总人数:{{ persons | length}}</p>{% if gender|int==1 %}<p>性别：男</p>{% else %}<p>性别：女</p>{% endif %}<p>章节内容old:{{ article }}</p><p>章节内容new:{{ article |replace('她妈的','TMD') }}</p><p>新闻内容old:{{ news}}</p><p>新闻内容new:{{ news | truncate(length=10)}}</p><p>签名显示去掉其中的html标签:{{ signature | striptags}}</p><h3>使用自定义过滤器</h3><p>新闻内容old:{{ news }}</p><p>新闻内容new:{{ news| cut }}</p><h3>使用自定义过滤器   处理时间</h3><p>新闻创建时间old:{{ create_time }}</p><p>新闻间隔现在的时间new:{{ create_time |handle_time }}</p>
</body>
</html>

5. 自定义过滤器

自定义模版过滤器：

只有当系统提供的过滤器不符合需求后，才须自定义过滤器过滤器本质上就是一个函数。如果在模版中调用这个过滤器，那么就会将这个变量的值作为第一个参数传给过滤器这个函数，然后函数的返回值会作为这个过滤器的返回值。需要使用到一个装饰器：

@app.template_filter('过滤器名称')

例如：将新闻中出现的所有“十大酷刑” 删除掉

app.config['TEMPLATES_AUTO_RELOAD']=True@app.template_filter('cut')
def cut(value):value=value.replace("十大酷刑",'')return value

使用：

<p>使用自定义过滤器：{{新闻内容值|cut}}</p>

实例：见上一节代码（Part IV：自定义过滤器）

5. 控制语句 if

所有的控制语句都是放在{% … %}中，并且有一个语句{% endxxx %}来进行结束，Jinja中常用的控制语句有if/for…in…，现逐一对他们进行讲解：
if：if语句和python中的类似，可以使用>，<，<=，>=，==，!=来进行判断，也可以通过and，or，not，()来进行逻辑合并操作，以下看例子：

{% if uname =='momo' %}<p>莫莫</p>
{% else %}<p>露露</p>
{% endif %}{% if age >= 18 %}<p>{{ age }}岁，成年人，能进入网吧</p>{% else %}<p>{{ age }}岁，未成年人，禁止能进入网吧</p>
{% endif %}

注意：

if`条件判断语句必须放在`{% if statement %}`中间，并且还必须有结束的标签`{% endif %}

示例：

from flask import Flask,render_templateapp = Flask(__name__)
app.config.update({'DEBUG': True,'TEMPLATES_AUTO_RELOAD': True
})# app.config['TEMPLATES_AUTO_RELOAD']=True
@app.route('/')
def hello_world():content={'uname':'momo','age':16,'score':45}return render_template('index.html',**content)#修改个人信息预操作
@app.route("/updateUser/")
def updateUser():#去查询数据库  获取个人信息详情#模拟操作数据库 得到的值content={'addr':'cq','gender':'0'}return  render_template('update.html',**content)if __name__ == '__main__':# app.run(debug=True)app.run()

【模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>首页</h2><h4>学习Jinja2模版语言的if语句</h4>{% if uname=='momo' %}<p>姓名：莫莫</p>{% endif %}<hr>{% if age>=18 %}<p>年龄为{{ age }}岁的人可以进入网吧</p>{% else %}<p>未成年人{{ age }}岁，不可以进入网吧</p>{% endif %}<hr>{% if score>=90 %}<p>{{ score }}成绩等级为：A</p>{% elif score>=80 %}<p>{{ score }}成绩等级为：B</p>{% elif score>=60 %}<p>{{ score }}成绩等级为：C</p>{% else %}<p>{{ score }}成绩等级为：男女混合双打</p>{% endif %}<hr><a href="{{ url_for('updateUser') }}">修改个人信息</a></body>
</html>

【模板】update.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>个人信息修改页面</h2><form action="#" method="post">户籍：{% if addr=='bj' %}<select name="addr"><option value="-1">-请选择-</option><option value="bj"  selected="selected">北京市</option><option value="sh">上海市</option><option value="cq">重庆市</option></select>{% elif  addr=='cq' %}<select name="addr"><option value="-1">-请选择-</option><option value="bj" >北京市</option><option value="sh">上海市</option><option value="cq"  selected="selected">重庆市</option></select>{% else %}<select name="addr"><option value="-1"  selected="selected">-请选择-</option><option value="bj" >北京市</option><option value="sh">上海市</option><option value="cq" >重庆市</option></select>{% endif %}<br>性别：{% if gender|int ==1 %}<input type="radio" name="sex" value="1" checked="checked">男<input type="radio" name="sex" value="0" >女{% else %}<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="0"  checked="checked">女{% endif %}<br><input type="submit" value="确认修改"></form>
</body>
</html>

6. 控制语句 for

for…in…：for循环可以遍历任何一个序列包括列表、字典、元组。并且可以进行反向遍历，以下将用几个例子进行解释：

遍历列表：

<ul>{% for user in users%}<li>{{ user}}</li>{% endfor %}
</ul>

遍历字典：

 <tr>{% for key in person.keys() %}<td>{{ key}}</td>{% endfor %}
</tr><tr>{% for val in person.values() %}<td>{{ val}}</td>{% endfor %}
</tr><tr>{% for item in person.items() %}<td>{{ item}}</td>{% endfor %}
</tr><tr>{% for key,value in person.items() %}<td>{{ value}}</td>{% endfor %}
</tr>

如果序列中没有值的时候，进入else，反向遍历用过滤器 reverse：

<ul>{% for user in users|reverse %}<li>{{ user}}</li>{% else %}<li>没有任何用户</li>{% endfor %}
</ul>

并且Jinja中的for循环还包含以下变量，可以用来获取当前的遍历状态：

| 变量 | 描述 | | — | — |

| loop.index | 当前迭代的索引（从1开始） |

| loop.index0 | 当前迭代的索引（从0开始） |

| loop.first | 是否是第一次迭代，返回True或False |

| loop.last | 是否是最后一次迭代，返回True或False |

| loop.length | 序列的长度 |

总结：在jinja2中的for循环，跟python中的for循环基本上是一模一样的。也是for...in...的形式。并且也可以遍历所有的序列以及迭代器。但是唯一不同的是，jinja2中的for循环没有break和continue语句。
示例：

from flask import Flask,render_templateapp = Flask(__name__)#1.遍历所有的用户[]
#2.遍历个人信息 {}
#3.遍历所有图书信息[{},{},{},...]
@app.route('/')
def hello_world():# 准备模拟的数据datas = {'users': ['momo', 'lulu', 'tantan'],# 'users': [],'person': {'name': '莫莫','age': 18,'gender': '男','nick': '莫帅'},'books': [{'name': '鸟哥的linux私房菜','price': 89,'author': '鸟哥'},{'name': '墨菲定律','price': 100,'author': '墨菲'},{'name': 'Web之Flask1','price': 89,'author': '李辉'},{'name': 'Web之Flask2','price': 89,'author': '李辉'},{'name': 'Web之Flask3','price': 89,'author': '李辉'}]}return render_template('index.html',**datas)if __name__ == '__main__':app.run(debug=True)

【模板】index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>学习Jinja2模版语言中的for循环的使用</h2><h3>1.遍历所有的用户[]  列表</h3><ul>{% for user in users|reverse %}<li>{{ user }}</li>{% else %}<li style="color: red;background-color: yellow;width: 200px">没有任何用户</li>{% endfor %}</ul><h3>2.遍历个人信息 {}  字典  keys()   values()  items()</h3><table border="1px"><tr><th>姓名</th><th>年龄</th><th>性别</th><th>昵称</th></tr><tr><td>{{ person.name }}</td><td>{{ person.age }}</td><td>{{ person.gender }}</td><td>{{ person.nick }}</td></tr><tr>{% for key in person.keys() %}<td>{{ key }}</td>{% endfor %}</tr><tr>{% for value in person.values() %}<td>{{ value }}</td>{% endfor %}</tr><tr>{% for item in person.items() %}<td>{{ item }}</td>{% endfor %}</tr><tr>{% for key,value in person.items() %}<td>{{ value }}</td>{% endfor %}</tr><tr>{% for key,value in person.items() %}<td>{{ key }}</td>{% endfor %}</tr></table><h3>3.遍历所有图书信息[{},{},{},...]  列表和字典的组合</h3><table border="1px"><thead><tr><th>序号</th><th>书名</th><th>价格</th><th>作者</th><th>所有书的总数量</th></tr></thead><tbody>{% for book in books %}{% if loop.first %}<tr style="background-color: rebeccapurple">{% elif loop.last %}<tr style="background-color: darkcyan">{% else %}<tr style="background-color: greenyellow">{% endif %}<td>{{ loop.index }} | {{ loop.index0 + 1 }}</td><td>{{ book.name}}</td><td>{{ book.price }}</td><td>{{ book.author }}</td><td>{{ loop.length }}</td></tr>{% endfor %}</tbody></table><h3>4.for嵌套循环案例：99乘法表</h3><table border="1px">{% for x in range(1,10) %}<tr>{% for y in range(1,x + 1) %}<td>{{y}}*{{x}}={{ x*y }}</td>{% endfor %}</tr>{% endfor %}</table>
</body>
</html>