1.Flask模板介绍
前置：理解渲染机制即上篇笔记中render_template()功能是如何实现的！
1）找到html文件地址
2）读取html文件中的内容
3）替换html中的特殊字符
4）将html的内容发送给浏览器
1 <!-- html文件 --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 </head> 9 <body> 10 <nav> 11 导航条 12 </nav> 13 <h1 style="color: #f00">你好, 当前的时间是：{{time}} {{user}}</h1> 14 </body> 15 </html>
1 # Flask py文件 2 3 import os 4 from datetime import datetime 5 6 from flask import Flask,render_template 7 app = Flask(__name__) 8 9 10 @app.route('/') 11 def index(): 12 return 'index' 13 14 15 @app.route('/html') 16 def html_from_file(): 17 """ 把html文件的内容在浏览器展现出来""" 18 return render_template('index.html') 19 20 21 @app.route('/show/html') 22 def html_show(): 23 """ 理解渲染机制 """ 24 # 1. 找到磁盘上的html文件地址（全路径） 25 file_name = os.path.join(os.path.dirname(__file__), 'templates', 'index.html') 26 print(file_name) 27 # 2. 读取html文件中的内容 28 now_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S') 29 with open(file_name, 'r', encoding='utf-8') as f: 30 html = f.read() 31 # 3. 替换html中的特殊字符（{{time}}） 32 html = html.replace('{{time}}', now_time) 33 # 4. 将html的内容发送给浏览器 34 return html
什么是模板？
- 模板其实是一个包含响应文本的文件，其中用占位符(变量)表示动态部分，告诉模板引擎其具体的值需要从使用的数据中获取
- 使用真实值替换变量，再返回最终得到的字符串，这个过程称为渲染
为什么学模板？刚刚的示例代码，将所有的业务逻辑代码都写在一个py文件里面，公共的业务变更需要修改多处代码；掌握模板之后，就可以解决上述问题。
2.入门Flask模板
2.1.模板引擎Jinja2
模板引擎：可以简单理解为，它就是对模板（html）中的内容按照一定规则（变量）进行替换。得到最终我们给客户端展示的页面（模板）
- Flask使用Jinja2作为默认模板引擎，安装Flask的时候已经自动安装了；不需要再次安装Jinja2了
- 如果不是Flask框架，是其他框架想要使用模板引擎，也是可以安装的。通过pip进行安装：pip install Jinja2；或者通过源码安装：python setup.py install(把源码先下载下来，进入setup.py文件的目录)
Jinja2的默认配置
- template_folder='templates'：这个是模板存放的默认目录，也可以自定义但是不建议改，就用它默认的就行了，便于项目成员理解共识
- render_template()：(x)html自动转义，把html读取出来，也可以对它里面一些变量进行替换，在Jinja2里面这些变量的格式为双大括号开头，双大括号结尾，如：{{name}}
- render_template_string()：字符串自动转义，html是以字符串赋值给一个变量的时候，可以用这个方法，可以将html响应结果展示出来；如果跟render_template一样传html文件名时，render_template_string是不会读取里面文件的，只会将这个文件名展示出来
- {% autoescape %}：手动设置是否转义
- 全局函数和辅助对象：增强模板的功能
什么是转义？
把有特殊意义的字符显示出来，例如：
- html标签中的<>：<>
- 代码中的&：&
- 特殊字符转义对照表；详细的可以百度键入关键字“HTML特殊转义字符对照表”进行搜索
示例：
2.2.模板常用全局对象
- config：Flask的配置信息
- request：请求的对象
- session：会话对象
- g：请求相关的全局变量（如：g.user）
2.3.模板常用全局函数
- url_for()：URL解析函数（如：静态文件地址解析、链接跳转地址解析）；传入视图函数，显示其url路径；
常用场景：html常常会进行href页面跳转，如果直接指定路由(即路径)，当视图函数路由发生变更时，就会找不到。实际开发中路由地址会变，但是视图函数一般不会变，这时候我们就可以使用url_for对视图函数进行反向解析获取其路由，这样html页面就能正常跳转了
👇这么写，是常用手法
- get_flashed_messages()：会话消息；常见场景退出登录，提示你下次再来；具体使用后面笔记会有，也可自行百度了解下，比如https://www.cnblogs.com/cangqinglang/p/13656739.html
2.4.模板上下文处理器
- 通过装饰器@app.context_processor实现
- 在模板的上下文中添加新的内容
- 内容可以是变量，也可以是函数
2.5.模板中变量的使用
思考：dict/list/tuple这些类型的数据怎么渲染？(开篇讲过，渲染：使用真实值替换变量，再返回最终得到的字符串展示，这个过程称为渲染)
模板当中变量的语法：{{ value }}，双括号开头双大括号结尾；这个默认规则我们同样是可以在模板引擎配置中改成3个大括号.....都可以，建议不要动，使用 默认统一规范
- 简单数据类型的渲染，如字符串、整型、浮点型：{{ value }}
- dict类型数据的渲染：{{ object.attribute }}或{{ object['attribute'] }}
- list/tuple类型数据的渲染：{{ object[index] }}
- list/tuple嵌套dict复杂类型数据的渲染：详见示例代码
在使用render_template读取解析html模板时，将变量传递进去
1 # app.py 2 3 from flask import Flask, render_template 4 5 app = Flask(__name__) 6 7 @app.route('/index') 8 def index1(): 9 return 'hello zhangsan' 10 11 12 @app.route('/') 13 def index(): 14 # 1. 简单数据类型的渲染 15 age = 40 16 money = 65.89 17 name = '张三' 18 # 2. 用户信息 dict 19 user_info = { 20 'username': '张三', 21 'nickname': '三个', 22 'address.city': '广州', 23 'address.area': '天河' 24 } 25 # 3. 元组和列表 26 tuple_city = ('北京', '上海', '广州', '深圳') 27 list_city = ('北京', '上海', '广州', '深圳') 28 29 # 4. 复杂的数据结构 30 list_user = [ 31 { 32 'username': '张三', 33 'address': { 34 'city': '广州' 35 } 36 }, 37 { 38 'username': '李四', 39 'address': { 40 'city': '北京' 41 } 42 } 43 ] 44 return render_template('index.html', 45 age=age, 46 money=money, 47 name=name, 48 user_info=user_info, 49 tuple_city=tuple_city, 50 list_city=list_city, 51 list_user=list_user)
1 <!-- index.html --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 </head> 9 <body> 10 <h3>1. 简单数据类型的渲染</h3> 11 <p>我的年龄: {{ age }}</p> 12 <p>我的钱包: {{ money }}</p> 13 <p>我的名字：{{ name }}</p> 14 15 <h3>2. 用户信息 dict</h3> 16 <p>用户名： {{ user_info.username }}</p> 17 <p>用户昵称： {{ user_info.nickname }}</p> 18 <p>用户的地址：{{ user_info['address.city'] }}- {{ user_info['address.area'] }}</p> 19 20 <h3>3. 元组和列表</h3> 21 <p> 22 {{ tuple_city[0] }} <br/> 23 {{ tuple_city[1] }} <br/> 24 {{ tuple_city[2] }} <br/> 25 {{ tuple_city[3] }} <br/> 26 </p> 27 <p> 28 {{ list_city[0] }} <br/> 29 {{ list_city[1] }} <br/> 30 {{ list_city[2] }} <br/> 31 {{ list_city[3] }} <br/> 32 </p> 33 34 <h3>4. 复杂的数据结构</h3> 35 <p> 36 第一个：<br/> 37 用户名：{{ list_user[0].username }};地址： {{ list_user[0]['address']['city'] }} 38 </p> 39 <p> 40 第二个：<br/> 41 用户名：{{ list_user[1].username }};地址： {{ list_user[1]['address']['city'] }} 42 </p> 43 </body> 44 </html>
思考：长度为100的list对象如何渲染？
3.Flask模板语法
3.1.模板语法_模板标签
在【模板中变量的使用】笔记中，对list和tuple这两种python数据类型进行渲染的时候。发现长度非常长的时候，去取它的下标来进行渲染非常的不方便。模板标签就可以很好解决这个问题！
什么是模板标签？我们能在模板中，也就是html中写python的逻辑代码(条件判断、循环、赋值)吗？
模板标签语法：
1)：{% tag %}
2)：第二种是有tag开始和结束，一一对应的，比如写python逻辑代码if，在{% if %}开始，但是它不知道什么时候结束。最后用{% endif %}结尾，它就知道结束了
{% tag %} 内容 {% endtag %}
- 模板标签示例模板：条件表达式
<!-- 条件表达式 --> {% if condition_a %} 满足了A条件 {% elif condition_b %} 满足了B条件 {% else %} 都不满足 {% endif %}
- if标签中的is判断，以及一些其他的内置判断条件
- defined/undefined：变量是否已经定义
- none：变量是否为None
- number/string：数字/字符串判断
- even/odd：奇偶判断
- upper/lower：大小写判断
{% if value is defined %} ....... {% endif %}
- if 标签中除了is还有其他逻辑控制判断
- and , or
- == , !=
- > , <
- >= , <=
- in , not in
- for循环，示例：如果{% for....... %}循环成立，显示for循环下面的语句块；如果for循环里面没有任何东西就会显示{% else %}下面的语句块
示例代码：
1 # app.py 2 3 from flask import Flask, render_template 4 5 app = Flask(__name__) 6 7 @app.route('/tag') 8 def tag(): 9 """ 模板标签的使用 """ 10 var = None 11 a = 2 12 list_user = [ 13 {'username': '张三', 'age': 32, 'address': '北京'}, 14 {'username': '李四', 'age': 22} 15 ] 16 # list_user = [] 17 return render_template('tag.html', 18 var=var, 19 a=a, 20 list_user=list_user)
1 <!-- tag.html --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>模板标签的使用</title> 8 </head> 9 <body> 10 <h3>if 的使用</h3> 11 {% if var is none %} 12 <p>var 是 none</p> 13 {% else %} 14 <p>var 不是 none</p> 15 {% endif %} 16 17 {% if a is defined %} 18 <p>a定义了</p> 19 {% else %} 20 <p> a 没有定义</p> 21 {% endif %} 22 {% if a == 2 %} 23 <p>a 是 2</p> 24 {% endif %} 25 26 <h3>for循环的使用</h3> 27 {% for item in list_user %} 28 <p>用户名：{{ item.username }}，年龄：{{ item.age }}</p> 29 {% else %} 30 <p>用户信息为空</p> 31 {% endfor %} 32 </body> 33 </html>
- for循环体内的变量
思考：如果要在for循环中使用continue/break怎么办？
解决方案： jinja_env = Environment(extensions=['jinja2.ext.loopcontrols']) 下图这个扩展方式为覆盖，用的=。不建议，推荐使用添加扩展，下面的示例代码会有；同时 jinja2还有一些其他的扩展，感兴趣点击看下；
示例代码
1 # app.py 2 3 from flask import Flask, render_template 4 5 6 app = Flask(__name__) 7 # 添加扩展：为模板引擎添加扩展，支持break/continue语法 8 app.jinja_env.add_extension('jinja2.ext.loopcontrols') 9 10 ''' 11 该扩展为覆盖不建议使用 12 from jinja2 import Environment 13 app.jinja_env=Environment(extensions=['jinja2.ext.loopcontrols']) 14 ''' 15 @app.route('/tag') 16 def tag(): 17 """ 模板标签的使用 """ 18 var = None 19 a = 2 20 list_user = [ 21 {'username': '张三', 'age': 32, 'address': '北京'}, 22 {'username': '李四', 'age': 22}, 23 {'username': '王五', 'age': 32, 'address': '北京'}, 24 {'username': '王文', 'age': 22} 25 ] 26 # list_user = [] 27 return render_template('tag.html', 28 var=var, 29 a=a, 30 list_user=list_user)
1 <!-- tag.html --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>模板标签的使用</title> 8 <style type="text/css"> 9 .odd { 10 background-color: #f00; 11 color: #fff; 12 } 13 .even { 14 background-color: aqua; 15 color: #fff; 16 } 17 </style> 18 </head> 19 <body> 20 <h3>for 循环 dict</h3> 21 {% for user in list_user %} 22 <p class="{{ loop.cycle('odd','even') }}"> 23 第{{ loop.index }}个用户，总共{{ loop.length }}个：<br/> 24 {% for key, value in user.items() %} 25 {{ key }}: {{ value }} 26 {% endfor %} 27 </p> 28 {% else %} 29 <p>用户信息为空</p> 30 {% endfor %} 31 32 <h3>for 循环 dict -break</h3> 33 {% for user in list_user -%} 34 <p class="{{ loop.cycle('odd','even') }}"> 35 第{{ loop.index }}个用户，总共{{ loop.length }}个：<br/> 36 {% for key, value in user.items() -%} 37 {% if loop.index > 2 -%} <!--跳出了address的显示--> 38 {% break -%} 39 {% endif -%} 40 {{ key }}: {{ value }} 41 {% endfor -%} 42 </p> 43 {% else %} 44 <p>用户信息为空</p> 45 {% endfor %} 46 </body> 47 </html>
同时模板标签还支持添加注释，注释分为两种：
1）会在浏览器html源码中显示： <!-- 我是HTML注释 -->
2）不会在浏览器html源码中显示： {# 注释内容 #}
去除HTML源码中多余的空白可以提高性能，不能忽视！去除方式，在块的开始或结束放置一个减号（-），不能有空格
- 设置变量，进行赋值操作：先设置，后使用，可以通过import导入；
<!-- 设置变量 --> {% set key,value = (1,2) %}
建议设置变量的时候，和with代码块结合使用，实现块级作用域。这个变量只在with这个代码块中有效果。
思考：如下内容如何显示？
{{}} {% %}
1）视为字符串： {{ ‘{{}} {% %}’ }}
2）使用raw标签进行转义，使得特殊符号正常显示
3.2.模板语法_过滤器
思考：下面的场景如何实现？
什么是过滤器？
- 过滤器：定义好规则，修改变量（如：格式化显示）
- 过滤器的使用格式，用管道符号（|）分割，如：{{ name|striptags }}，striptags就是过滤器，将name变量传递给striptags处理最后返回处理后的结果
- 可以链式调用：{{ name|striptags|title }}，name传递给多个过滤器
- 可以用园括号传递可选参数{{ list|join(',')}}
过滤器的使用
方式一：用管道符（ | ）
{{ value|safe }}
方式二：使用便签{% filter 过滤器 %} {% endfilter %}
{% filter upper %} This text becomes uppercase {% endfilter %} 过滤器upper对字符串This text。。。进行格式化显示
内置的过滤器
- 求绝对值abs：{{ value|abs }}
- 默认值显示：default(value,default_value='',boolean=False)
- {{ value|default('默认值')}}：如果value变量没有定义，传递过来，default过滤器处理value返回“默认值”
- {{ value|d('默认值') }}：上面的简写
- html转义escape或e：{{ value | escape }} 或 {{ value | e }}
👆由于浏览器一般默认对html自动转义成字符串输出，所以我们使用{% autoescape fale %}将其关闭。这时调试，过滤器e的作用就直观了。
- 富文本内容转义显示safe：{{ value|safe }}
- 倒叙显示reverse：{{ value|reverse }}
- 查看更多内置过滤器
自定义过滤器
方式一：使用装饰器@app.template_filter对自定义装饰器进行注册；推荐使用这个
- 示例reverse：自定义装饰器名称
- 示例reverse_filter函数：自定义装饰器的逻辑方法，需要传递被修改的变量s
@app.template_filter('reverse') def reverse_filter(s): return s[::-1]
方式二：调用函数app.jinja_env.filters对自定义装饰器进行注册
- 示例reverse：自定义装饰器名称
- 示例reverse_filter函数：自定义装饰器的逻辑方法，需要传递被修改的变量s
def reverse_filter(s): return s[::-1] app.jinja_env.filters['reverse'] = reverse_filter
3.3.模板语法_模板全局函数
思考：如何在模板中实现range函数的效果？
全局函数可在模板中直接使用
1 <ul> 2 {% for i in range(10) %} 3 <li>{{ i }}</li> 4 {% endfor %} 5 </ul>
模板提供的全局函数有：
- range([start],stop[,step])：和python的range用法基本一致
- dict(**items)：转换成字典形式
- cycler(*items)：常用于css类名的循环。
应用场景简单说明：声明变量class_name，通过cycler()赋值给这个变量。标签的class属性值等于这个变量，通过next()获取下一个。使用css查找class并对其样式修改。
- joiner(sep= ',')：可用于字符串拼接；相当于python里面join的语法
- url_for()：URL解析函数（如：静态文件地址解析、链接跳转地址解析）
静态文件地址解析；使用link引用外部css文件时，需要加上rel=stylesheet；rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是：href连接的文档是一个样式表。
链接跳转地址解析
4.Flask模板中的宏
什么是宏？
把常用功能抽取出来，实现可重用；简单理解：宏≈函数；宏可以写在单独的html文件中。
4.1.模板中的宏
1）定义宏{% macro %}：像书写函数一样定义宏，示例解析
- 示例代码定义了一个input的宏
- 调用input宏的时候，需要传入name、value、type、size；其中name是必传参数，value、type和size都有默认值，不传时使用默认值
- 返回的内容为👇，调用input宏传递的参数，赋值给返回内容{{变量}}。其中value还经过了过滤器e进行了html转义。
<input type="{{ type }}" name="{{ name }}" value"{{ value|e }}" size="{{ size }}">
调用宏返回的内容
2）使用宏{{ 宏名() }}：像调用函数一样调用。
3）完整示例
4.2.文件中的宏
可以把写在html文件中的宏，当成python的一个模块进行使用
1）导入宏，跟python使用模块方法一样。
- {% import 'forms.html' as forms %}：导入宏文件forms.html，并重命名forms
- {% from 'forms2.html' import input2 %}：导入宏文件forms2.html中的input宏
2）使用宏
- <p>{{ forms.input('username' )}}</p>
- <p>{{ input2('password' )}}</p>
3）完成示例
5.Flask模板的继承
思考：为什么要对模板进行抽象和继承？模板的抽象继承，和python的面向对象是一样的。
思考：如下场景怎样设计（易维护、可扩展）？
- 每个页面都引用了公共的头部，js，css
- 有几个页面结构和内容及其相似（如：导航菜单）
5.1.继承实现
设定：有一个公用模板页面base.html。其他模板页面基于base.html修改自己页面的header、body等部分信息。其他的使用公共模板页面base.html
1）在通用模板上，通过 {% block 部分名称%}{% endblock %} 将可变的部分圈出来；图示步骤一，使用block将可变的部分圈出来，命名为content。
2）新模板页面，通过 {% extends "父模板" %} 继承通用模板；虽然新模板.html只有一行代码 {% extends "父模板" %} ，但是新模板目前是和父类模板展示效果一样的。
3）新模板页面这时候要定制开发了，通过 {% block 选择要修改的可变部分名称%}你修改的新代码块{% endblock %} ，完成修改后，新模板页面展示你修改后的效果
4）当你想保留可变部分，并且基本可变部分原先内容再添加新内容时，通过 {{ super() }}后面接你新的内容 ，既保留了可变部分又添加了你新增的部分
示例代码：
思考：只有部分页面使用到的导航条怎么设计？
- 按照继承的手法，我们可以将这些部分页面圈起来，继承的时候，然后重写他内容为空。但是这个方法是不是很low
- 使用模板的包含语法进行实现才是最有解决方案
5.2.模板继承的包含语法
- include “sidebar.html” ignore missing：sidebar.html不存在，不会报错
- include “sidebar.html” ignore missingwith context：将模板的上下文对象传递到sidebar.html文件中
- include “sidebar.html” ignore missing without context：将模板的上下文对象不传递到sidebar.html文件中
- include without context的简单示例
5.3.继承与包含的区别
6.消息闪现
什么是消息闪现
思考：要在如下场景下给予操作提示，怎么实现？
- 用户登录成功，提示：欢迎回来
- 用户发布问题成功，提示：发帖成功
消息闪现
第一步：在视图中产生一个消息（提示/警告/错误）
flash(msg_content,msg_type) #参数msg_content：消息内容 #参数msg_type：消息类型
View Code
第二步：在模板中展示消息
get_flashed_messages(category_filter=["error"]) #参数category_filter：对产生的消息按类别查询 #返回的是一个可迭代的对象
View Code
使用for循环获取get_flashed_messages返回的对象内容：category，message
实例：
get_flashed_messages参数说明
- 参数不是必填的可以不传
- with_categories=true：代表我们启用消息分类，之后针对消息类型，可以进行相关的过滤操作
- category_filter=['error']：这里面参数是list，筛选参数msg_type：消息类型
code
1 # app.py 2 3 from flask import Flask, render_template, flash, redirect, request 4 5 app = Flask(__name__) 6 # session的安全机制，使用flash时需要设置该随机串 7 app.secret_key = 'secret_keyabcdes334' 8 9 # 用户登录之后，跳转到个人中心，在个人中心页面，展示一个提示：登录成功 10 11 12 @app.route('/login', methods=['GET', 'POST']) 13 def login(): 14 """ 用户登录 """ 15 if request.method == 'POST': 16 print('处理了登录的逻辑') 17 flash('登录成功', 'success') 18 flash('欢迎回来', 'success') 19 flash('错误提示', 'error') 20 return redirect('/mine') 21 return render_template('login.html') 22 23 24 @app.route('/mine') 25 def mine(): 26 """ 个人中心 """ 27 return render_template('mine.html')
1 <!-- login.html --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>用户登录</title> 8 </head> 9 <body> 10 <h3>用户登录</h3> 11 <form action="{{ url_for('login') }}" method="post"> 12 <div> 13 <input type="text" name="username" value="admin"> 14 </div> 15 <div> 16 <input type="password" name="password"> 17 </div> 18 <div> 19 <button type="submit">登录</button> 20 </div> 21 </form> 22 </body> 23 </html>
1 <!-- mine.html --> 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>个人中心</title> 8 <style type="text/css"> 9 .success { 10 color: #0f0; 11 } 12 .error { 13 color: #f00; 14 } 15 </style> 16 </head> 17 <body> 18 <h3>个人中心</h3> 19 {% for category, message in get_flashed_messages(with_categories=true, category_filter=['error']) %} 20 <p class="{{ category }}"> 21 {{ category }} -{{ message }} 22 </p> 23 {% endfor %} 24 </body> 25 </html>
6.重点掌握
- 模板语法的使用（变量、标签、过滤器）
- 模板的继承、包含、引用
- 模板中的宏定义和使用
- 消息闪现
