内容概述:
过滤器,
自定义过滤器,
控制代码块,
模板代码复用,
特有变量和函数,
Flask-WTF 表单,
CSRF
过滤器
过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器
过滤器的使用方式为:变量名 | 过滤器。 {{ 变量名 | 过滤器 }}
如果没有任何参数传给过滤器,则可以把括号省略掉
在 jinja2 中,过滤器是支持链式调用的
常见内建过滤器
字符串操作
- **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>
自定义过滤器
过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。自定义过滤器有两种实现方式:重要:自定义的过滤器名称如果和内置的过滤器重名,会覆盖内置的过滤器
- 一种是通过Flask应用对象的 add_template_filter 方法
- 通过装饰器来实现自定义过滤器
# 自定义过滤器
# 方式1: 装饰器的形式
# @app.template_filter('lireverse')
def do_lireverse(li):
temp = list(li)
temp.reverse()
return temp
# 方式2: 直接添加过滤器
app.add_template_filter(do_lireverse, 'lireverse')
控制代码块
控制代码块主要包含两个:
- if/else if /else / endif
- for / endfor
{% 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: gray">{{ item.value }}</li>
{% else %}
<li style="background-color: red">{{ item.value }}</li>
{% endif %}
{% endfor %}
模板代码复用
- 宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
- **继承(Block)**的本质是代码替换,一般用来实现多个页面中重复不变的区域。
- **宏(Macro)**的功能类似函数,可以传入参数,需要定义、调用。
- **包含(include)**是直接将目标模板文件整个渲染出来。
宏
对宏(macro)的理解:
- 把它看作 Jinja2 中的一个函数,它会返回一个模板或者 HTML 字符串
- 为了避免反复地编写同样的模板代码,出现代码冗余,可以把他们写成函数以进行重用
- 需要在多处重复使用的模板代码片段可以写入单独的文件,再包含在所有模板中,以避免重复
- 定义宏
{% macro input(name,value='',type='text') %} <input type="{{type}}" name="{{name}}" value="{{value}}" class="form-control"> {% endmacro %}
- 调用宏
{{ input('name' value='zs')}}
- 这会输出
<input type="text" name="name" value="zs" class="form-control">
- 把宏单独抽取出来,封装成html文件,其它模板中导入使用,文件名可以自定义macro.html
{% macro function(type='text', name='', value='') %} <input type="{{type}}" name="{{name}}" value="{{value}}" class="form-control"> {% endmacro %}
- 在其它模板文件中先导入,再调用
{% import 'macro.html' as func %} {% func.function() %}
模板继承
模板继承是为了重用模板中的公共内容。一般 Web 开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。
- 标签定义的内容
{% block top %} {% endblock %}
- 相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。
- 子模板使用 extends 指令声明这个模板继承自哪个模板
- 父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()
在子模板中使用 extends
指令声明这个模板继承自哪
模板继承使用时注意点:
- 不支持多继承
- 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。
- 不能在一个模板文件中定义多个相同名字的block标签。
- 当在页面中使用多个block标签时,建议给结束标签起个名字,当多个block嵌套时,阅读性更好。
{% extends 'base.html' %}
{% block contentBlock %}
{{ super() }}
我是子类的内容<br/>
{% endblock %}
包含
Jinja2模板中,除了宏和继承,还支持一种代码重用的功能,叫包含(Include)。它的功能是将另一个模板整个加载到当前模板中,并直接渲染。
包含在使用时,如果包含的模板文件不存在时,程序会抛出TemplateNotFound异常,可以加上
关键字。如果包含的模板文件不存在,会忽略这条include语句。
ignore missing
{% include 'includeaaa.html' ignore missing %}<br/>
{% include 'include.html' %}<br/>
特有变量和函数
config: 可以从模板中直接访问 Flask 当前的 config 对象
**request:**就是 flask 中代表当前请求的 request 对象
session: 为 flask 的 session 对象
g 变量: 在视图函数设置 g 变量的 name 属性的值,然后在模板中直接可以取出
url_for():url_for会根据传入的路由器函数名,返回该路由对应的URL,在模板中始终使用url_for()就可以安全的修改路由绑定的URL,则不比担心模板中渲染出错的链接;如果我们定义的路由URL是带有参数的,则可以把它们作为关键字参数传入url_for(),Flask会把他们填充进最终生成的URL中
get_flashed_messages():这个函数会返回之前在flask中通过flask()传入的消息的列表,flash函数的作用很简单,可以把由Python字符串表示的消息加入一个消息队列中,再使用get_flashed_message()函数取出它们并消费掉:
config: {{ config.DEBUG }}<br/> {# 可以从模板中直接访问Flask当前的config对象 #}
<hr/>
请求上下文中两个变量:<br/>
当前路由: {{ request.url }}<br/>
session 取值: {{ session.name }}<br/>
<hr/>
应用上下文中 1 个变量<br/>
g 变量: {{ g.name }}<br/>
<hr/>
两个可以直接使用的函数:<br/>
<a href="{{ url_for('index') }}" target="_blank" rel="external nofollow" >回到首页</a><br/>
<hr/>
获取闪现消息:<br/>
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %}
Flask-WTF 表单
Web 表单是 Web 应用程序的基本功能。
它是HTML页面中负责数据采集的部件。表单有三个部分组成:表单标签、表单域、表单按钮。表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器。
在Flask中,为了处理web表单,我们可以使用 Flask-WTF 扩展,它封装了 WTForms,并且它有验证表单数据的功能
WTForms 支持的 HTML 标准字段
字段对象 | 说明 |
---|---|
StringField | 文本字段 |
TextAreaField | 多行文本字段 |
PasswordField | 密码文本字段 |
HiddenField | 隐藏文件字段 |
DateField | 文本字段,值为 datetime.date 文本格式 |
DateTimeField | 文本字段,值为 datetime.datetime 文本格式 |
IntegerField | 文本字段,值为整数 |
DecimalField | 文本字段,值为decimal.Decimal |
FloatField | 文本字段,值为浮点数 |
BooleanField | 复选框,值为True 和 False |
RadioField | 一组单选框 |
SelectField | 下拉列表 |
SelectMutipleField | 下拉列表,可选择多个值 |
FileField | 文件上传字段 |
SubmitField | 表单提交按钮 |
FormField | 把表单作为字段嵌入另一个表单 |
FieldList | 一组指定类型的字段 |
WTForms 常用验证函数
验证函数 | 说明 |
---|---|
DataRequired | 确保字段中有数据 |
EqualTo | 比较两个字段的值,常用于比较两次密码输入 |
Length | 验证输入的字符串长度 |
NumberRange | 验证输入的值在数字范围内 |
URL | 验证URL |
AnyOf | 验证输入值在可选列表中 |
NoneOf | 验证输入值不在可选列表中 |
使用 Flask-WTF 需要配置参数 SECRET_KEY。
CSRF_ENABLED是为了CSRF(跨站请求伪造)保护。 SECRET_KEY用来生成加密令牌,当CSRF激活的时候,该设置会根据设置的密匙生成加密令牌。
服务器代码
from flask import Flask, render_template, flash, request
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import InputRequired, EqualTo, DataRequired
app = Flask(__name__)
# 关闭 csrf 验证
app.config['WTF_CSRF_ENABLED'] = True
app.secret_key = 'asdfasdf'
# 自定义注册表单
class RegisterForm(FlaskForm):
username = StringField('用户名:', validators=[InputRequired('请输入用户名')], render_kw={'placeholder': '我是占位文字'})
password = PasswordField('密码:', validators=[InputRequired('请输入密码')])
password2 = PasswordField('确认密码:', validators=[InputRequired('请输入确认密码'), EqualTo('password', '两次密码要一致')], )
submit = SubmitField('注册:')
@app.route('/')
def index():
return 'Hello World!'
@app.route('/register_wtf', methods=['GET', 'POST'])
def register_wtf():
register_form = RegisterForm()
# 使用 wtf 表单帮我们做验证
if register_form.validate_on_submit():
# 执行注册逻辑
# 取到表单中提交上来的三个参数
username = request.form.get("username")
password = request.form.get("password")
password2 = request.form.get("password2")
# 取值方式 2
# username = register_form.username.data
# 假装做注册操作
print(username, password, password2)
return "success"
else:
if request.method == 'POST':
flash('参数错误')
return render_template('temp5_wtf.html', form=register_form)
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == "POST":
# 取到表单中提交上来的三个参数
username = request.form.get("username")
password = request.form.get("password")
password2 = request.form.get("password2")
if not all([username, password, password2]):
# 向前端界面弹出一条提示(闪现消息)
flash("参数不足")
elif password != password2:
flash("两次密码不一致")
else:
# 假装做注册操作
print(username, password, password2)
return "success"
return render_template('temp5_wtf.html')
if __name__ == '__main__':
app.run(debug=True)
模板代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
<label>用户名:</label><input type="text" name="username" placeholder="请输入用户名"><br/>
<label>密码:</label><input type="password" name="password" placeholder="请输入密码"><br/>
<label>确认密码:</label><input type="password" name="password2" placeholder="请输入确认密码"><br/>
<input type="submit" value="注册">
</form>
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %}
<hr/><br/>
以下是使用 Flask_wtf 实现 <br/><br/><br/><br/>
<form method="post">
{{ form.csrf_token() }}
{{ form.username.label }}{{ form.username }}<br/>
{{ form.password.label }}{{ form.password }}<br/>
{{ form.password2.label }}{{ form.password2 }}<br/>
{{ form.submit }}<br/>
</form>
</body>
</html>
CSRF
全拼为
CSRF
,译为跨站请求伪造。
Cross Site Request Forgery
CSRF
指攻击者盗用了你的身份,以你的名义发送恶意请求。
造成的问题:个人隐私泄露以及财产安全。
流程:
CSRF
- 客户端浏览并登录信任网站 A
- 验证通过,在用户处产生 A 的 cookie
- 用户在没有登出的情况下访问攻击网站 B
- B 会用一个诱惑性的按钮来让用户点击,但是这个点击会要求访问第三方网站 A ,发出一个请求
- 根据 B 的请求,浏览器要去访问 A 网站,访问 A 网站会默认带上之前保存的 cookie
- A 网站不知道这个请求是用户发出的还是 B 攻击网站发出的,但是浏览器过去的时候带上了 cookie,所以 A 会根据用户的权限处理这个请求,B 攻击网站的请求里一般会有请求,这样 B 就达到了模拟用户操作进行攻击的目的
防止 CSRF 攻击
- 在客户端向后端请求界面数据的时候,后端会往响应中的 cookie 中设置 csrf_token 的值
- 在 Form 表单中添加一个隐藏的的字段,值也是 csrf_token
- 在用户点击提交的时候,会带上这两个值向后台发起请求
- 后端接受到请求,以会以下几件事件:
- 从 cookie中取出 csrf_token
- 从 表单数据中取出来隐藏的 csrf_token 的值
- 进行对比
- 如果比较之后两值一样,那么代表是正常的请求,如果没取到或者比较不一样,代表不是正常的请求,不执行下一步操作