一.Jinja2模板
1.Jinja2是由python实现的
2.是Flask内置的模板语言
3.参照Django设计思想设计的,跟Django差不多
渲染模板函数
Flask提供的 render_template 函数封装了该模板引擎
render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值
二.模板的使用
1.在项目下创建 template 文件夹,用于存放所有的模板文件,并在目录下创建一个模板html文件 temp_demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>
2.设置 templates 文件夹属性以便能够在代码中有智能提示
3. 设置html 中的模板语言,以便在 html 有智能提示
4. 创建视图函数,将该模板内容进行渲染返回
@app.route('/')
def index():
return render_template('temp_demo1.html')
5. 代码中传入字符串,列表,字典到模板中
@app.route('/')
def index():
# 往模板中传入的数据
my_str = 'Hello '
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
)
6.模板中代码
<!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>
7.运行效果
<!DOCTYPE html>
我的模板html内容Hello
10
[3, 4, 2, 1, 7, 9]
{'name': 'xiaoming', 'age': 18}
8.相关运算,取值
<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 }}
9.结果
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
三.过滤器
过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。
过滤器的使用方式为:变量名 | 过滤器。
{{variable | filter_name(*args)}}
如果没有任何参数传给过滤器,则可以把括号省略掉
{{variable | filter_name}}
在 jinja2 中,过滤器是可以支持链式调用的,示例如下:
{{ "hello world" | reverse | upper }}
1.常见的过滤器
字符串操作
1.1 upper:把值转成大写
<p>{{ 'hello' | upper }}</p>
1.2 lower: 把值转成小写
<p>{{ 'HELLO' | lower }}</p>
1.3 capitalize:把变量值的首字母转成大写,其余字母转小写
<p>{{ 'hello' | capitalize }}</p>
1.4 title : 把值中的每个单词的首字母都转成大写
<p>{{ 'hello' | title }}</p>
1.5 reverse:字符串反转
<p>{{ 'olleh' | reverse }}</p>
1.6 safe:禁用转义
<p>{{ '<em>hello</em>' | safe }}</p>
列表操作
2.1 first:取第一个元素
<p>{{ [1,2,3,4,5,6] | first }}</p>
2.2 l
ast:取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>
2.3 length:获取列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>
2.4 s
um:列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>
2.5 sort:列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>
四.自定义过滤器
过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。
自定义过滤器有两种实现方式:
一种是通过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]
五.控制代码块
控制代码块主要包含两个:
- if/else if /else / endif
- for / endfor
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 %}
2.循环
我们可以在 Jinja2 中使用循环来迭代任何列表或者生成器函数
{% for post in posts %}
<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
六. 模板代码复用
在模板中,可能会遇到以下情况:
1.多个模板具有完全相同的顶部和底部内容
2.多个模板中具有相同的模板代码内容,但是内容中部分值不一样
3.多个模板中具有完全相同的 html 代码块内容
像遇到这种情况,可以使用 JinJa2 模板中的 宏、继承、包含来进行实现
1.模板继承
模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。
标签定义的内容:
{% block top %} {% endblock %}
相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。
子模板使用 extends 指令声明这个模板继承自哪个模板
父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()
1.1父模板
base.html
{% block top %}
顶部菜单
{% endblock top %}
{% block content %}
{% endblock content %}
{% block bottom %}
底部
{% endblock bottom %}
1.2子模板
extends指令声明这个模板继承自哪
{% extends 'base.html' %}
{% block content %}
需要填充的内容
{% endblock content %}
总之一句话:先把一个界面里的内容拷到 base里面,把不同的内容当成block,让子类继承父类(base),然后去填坑
七 Web表单
Web 表单是 Web 应用程序的基本功能。
它是HTML页面中负责数据采集的部件。表单有三个部分组成:表单标签、表单域、表单按钮。表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器。
在Flask中,为了处理web表单,我们可以使用 Flask-WTF 扩展,它封装了 WTForms,并且它有验证表单数据的功能
1. 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 | 一组指定类型的字段 |
2.WTForms常用验证函
验证函数 | 说明 |
---|---|
DataRequired | 确保字段中有数据 |
EqualTo | 比较两个字段的值,常用于比较两次密码输入 |
Length | 验证输入的字符串长度 |
NumberRange | 验证输入的值在数字范围内 |
URL | 验证URL |
AnyOf | 验证输入值在可选列表中 |
NoneOf | 验证输入值不在可选列表中 |
使用 Flask-WTF 需要配置参数 SECRET_KEY。
CSRF_ENABLED是为了CSRF(跨站请求伪造)保护。 SECRET_KEY用来生成加密令牌,当CSRF激活的时候,该设置会根据设置的密匙生成加密令牌。
代码验证
3.使用html 自带的表单
3.1 创建模板文件 login.html,在其中直接写form表单:
<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 %}
3.2 视图函数中获取表单数据验证登录逻辑:
@app.route('/demo1', methods=["get", "post"])
def demo1():
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('temp_register.html')
4.使用 Flask-WTF实现表单
4.1 配置参数,关闭 CSRF 校验
app.config['WTF_CSRF_ENABLED'] = False
模板页面:
<form method="post">
{{ form.username.label }} {{ form.username }}<br/>
{{ form.password.label }} {{ form.password }}<br/>
{{ form.password2.label }} {{ form.password2 }}<br/>
{{ form.submit }}
</form>
视图函数:
from flask import Flask,render_template, flash
#导入wtf扩展的表单类
from flask_wtf import FlaskForm
#导入自定义表单需要的字段
from wtforms import SubmitField,StringField,PasswordField
#导入wtf扩展提供的表单验证器
from wtforms.validators import DataRequired,EqualTo
app = Flask(__name__)
app.config['SECRET_KEY']='SECRET_KEY'
#自定义表单类,文本字段、密码字段、提交按钮
class RegisterForm(FlaskForm):
username = StringField("用户名:", validators=[DataRequired("请输入用户名")], render_kw={"placeholder": "请输入用户名"})
password = PasswordField("密码:", validators=[DataRequired("请输入密码")])
password2 = PasswordField("确认密码:", validators=[DataRequired("请输入确认密码"), EqualTo("password", "两次密码不一致")])
submit = SubmitField("注册")
#定义根路由视图函数,生成表单对象,获取表单数据,进行表单数据验证
@app.route('/demo2', methods=["get", "post"])
def demo2():
register_form = RegisterForm()
# 验证表单
if register_form.validate_on_submit():
# 如果代码能走到这个地方,那么就代码表单中所有的数据都能验证成功
username = request.form.get("username")
password = request.form.get("password")
password2 = request.form.get("password2")
# 假装做注册操作
print(username, password, password2)
return "success"
else:
if request.method == "POST":
flash("参数有误或者不完整")
return render_template('temp_register.html', form=register_form)
if __name__ == '__main__':
app.run(debug=True)
八. CSRF
csrf 全拼为 cross Site Request Forgery,译为跨站请求伪造 。
csrf 指攻击者盗用了你的身份,以你的名义发送恶意请求。
包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账......
造成的问题:个人隐私泄露以及财产安全。
1.CSRF攻击示意图
2.防止 CSRF 攻击
步骤:
1.在客户端向后端请求界面数据的时候,后端会往响应中的 cookie 中设置 csrf_token 的值
2.在Form 表单中添加一个隐藏的的字段,值也是 csrf_token
3.在用户点击提交的时候,会带上这两个值向后台发起请求
4.后端接受到请求,以会以下几件事件:
从 cookie中取出 csrf_token
从 表单数据中取出隐藏的 csrf_token 的值
进行对比
5.如果比较之后两值一样,那么代表是正常的请求,如果没取到或者比较不一样,代表不是正常的请求,不执行下一步操作
代码演示
未进行csrf校验的WebA
后端代码实现
from flask import Flask, render_template, make_response
from flask import redirect
from flask import request
from flask import url_for
app = Flask(__name__)
@app.route('/', methods=["POST", "GET"])
def index():
if request.method == "POST":
# 取到表单中提交上来的参数
username = request.form.get("username")
password = request.form.get("password")
if not all([username, password]):
print('参数错误')
else:
print(username, password)
if username == 'laowang' and password == '1234':
# 状态保持,设置用户名到cookie中表示登录成功
response = redirect(url_for('transfer'))
response.set_cookie('username', username)
return response
else:
print('密码错误')
return render_template('temp_login.html')
@app.route('/transfer', methods=["POST", "GET"])
def transfer():
# 从cookie中取到用户名
username = request.cookies.get('username', None)
# 如果没有取到,代表没有登录
if not username:
return redirect(url_for('index'))
if request.method == "POST":
to_account = request.form.get("to_account")
money = request.form.get("money")
print('假装执行转操作,将当前登录用户的钱转账到指定账户')
return '转账 %s 元到 %s 成功' % (money, to_account)
# 渲染转换页面
response = make_response(render_template('temp_transfer.html'))
return response
if __name__ == '__main__':
app.run(debug=True, port=9000)
前端登陆页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<h1>我是网站A,登录页面</h1>
<form method="post">
<label>用户名:</label><input type="text" name="username" placeholder="请输入用户名"><br/>
<label>密码:</label><input type="password" name="password" placeholder="请输入密码"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>
前端转账页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转账</title>
</head>
<body>
<h1>我是网站A,转账页面</h1>
<form method="post">
<label>账户:</label><input type="text" name="to_account" placeholder="请输入要转账的账户"><br/>
<label>金额:</label><input type="number" name="money" placeholder="请输入转账金额"><br/>
<input type="submit" value="转账">
</form>
</body>
</html>
运行测试,如果在未登陆的情况下,不能直接进入转账页面,测试转账是成功的
攻击网站B的代码
后端代码实现
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('temp_index.html')
if __name__ == '__main__':
app.run(debug=True, port=8000)
前端代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是网站B</h1>
<form method="post" action="http://127.0.0.1:9000/transfer">
<input type="hidden" name="to_account" value="999999">
<input type="hidden" name="money" value="190000" hidden>
<input type="submit" value="点击领取优惠券">
</form>
</body>
</html>
运行测试,在用户登录网站A的情况下,点击网站B的按钮,可以实现伪造访问
在网站A中模拟实现 csrf_token 校验的流程
- 添加生成 csrf_token 的函数
# 生成 csrf_token 函数
def generate_csrf():
return bytes.decode(base64.b64encode(os.urandom(48)))
- 在渲染转账页面的,做以下几件事情:
- 生成 csrf_token 的值
- 在返回转账页面的响应里面设置 csrf_token 到 cookie 中
- 将 csrf_token 保存到表单的隐藏字段中
@app.route('/transfer', methods=["POST", "GET"])
def transfer():
...
# 生成 csrf_token 的值
csrf_token = generate_csrf()
# 渲染转换页面,传入 csrf_token 到模板中
response = make_response(render_template('temp_transfer.html', csrf_token=csrf_token))
# 设置csrf_token到cookie中,用于提交校验
response.set_cookie('csrf_token', csrf_token)
return response
在转账模板表单中添加 csrf_token 隐藏字段
<form method="post">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<label>账户:</label><input type="text" name="to_account" placeholder="请输入要转账的账户"><br/>
<label>金额:</label><input type="number" name="money" placeholder="请输入转账金额"><br/>
<input type="submit" value="转账">
</form>
运行测试,进入到转账页面之后,查看 cookie 和 html 源代码
在执行转账逻辑之前进行csrf_token的校验
if request.method == "POST":
to_account = request.form.get("to_account")
money = request.form.get("money")
# 取出表单中的 csrf_token
form_csrf_token = request.form.get("csrf_token")
# 取出 cookie 中的 csrf_token
cookie_csrf_token = request.cookies.get("csrf_token")
# 进行对比
if cookie_csrf_token != form_csrf_token:
return 'token校验失败,可能是非法操作'
print('假装执行转操作,将当前登录用户的钱转账到指定账户')
return '转账 %s 元到 %s 成功' % (money, to_account)
运行测试,用户直接在网站 A 操作没有问题,再去网站B进行操作,发现转账不成功,因为网站 B 获取不到表单中的 csrf_token 的隐藏字段,而且浏览器有
同源策略
,网站B是获取不到网站A的 cookie 的,所以就解决了
跨站请求伪造
的问题