Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6)

1.表单介绍

1.1.表单知识回顾

常见的表单元素：

表单标签<form>
- action：表单提交的URL地址
- method：表单请求的方式（GET/POSt）
- enctype：请求内容的形式，如：application/x-www-form-urlencoded、multipart/form-data
单行文本框/多行文本框
- textarea：多行文本
- 单行文本(type的不同值)，常见的有：text(单行文本)、password(密码)、email(邮箱)、url(URL)、number(数字)、color(颜色)、日期时间等(date、month、week等等)
选择（单选、多选、下拉选择）
- 单选： <input type="radio">
- 多选： <input type="checkbox">
- 下拉框选择： <select><option></option></select>
隐藏表单域： <input type="hidden">
表单按钮： <input type="button"> <button></button>
文件上传框： <input type="file">

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单知识点回顾</title>
 6 </head>
 7 <body>
 8 <form action="/index" method="post" enctype="multipart/form-data">
 9     <ul>
10         <li>
11             用户地址：
12             <textarea name="" id="" cols="30" rows="10" placeholder="请输入地址"></textarea>
13         </li>
14         <li>
15             用户名：
16             <input type="text" placeholder="请输入用户名">
17         </li>
18         <li>
19             密码：
20             <input type="password" placeholder="请输入密码">
21         </li>
22         <li>
23             用户的年龄：
24             <input type="number">
25         </li>
26         <li>
27             性别：
28             <label><input type="radio" value="男" name="sex">男</label>
29             <label><input type="radio" value="女" name="sex">女</label>
30         </li>
31         <li>
32             爱好
33             <input id="id-paly-ball" type="checkbox" value="打球">
34             <label for="id-paly-ball">打球</label>
35             <input id="id-paly" type="checkbox" value="玩耍">
36             <label for="id-paly">玩耍</label>
37         </li>
38     </ul>
39 </form>
40 </body>
41 </html>

在视图中获取表单值：

get请求： request.args.get('name',None)
post请求： request.form.get('name',None)

思考：HTML表单在Flask中如何快速使用？

1.2.wtf表单介绍

通过在Flask中写python代码，可以直接生成HTML表单，通过wtf实现。

flask-wtf提供的3个组要功能：

集成wtforms
CSRF保护，flask-wtf能保护所有表单免受跨站请求伪造（CSRF）的攻击
与Flask-Uploads一起支持文件上传

安装

pip安装： pip install Flask-WTF
源码安装： python setup.py install

下载好之后如何使用呢？需不需要一些配置呢？它的配置很简单，它配置的目的就是用来做CSRF保护。只需要在Flask app上加上 WTF_CSRF_SECRET_KEY = 'a random string' 就行了，这个key可以随便给一个字符串，没有要求，只是一个随机的串就行了。

1 from flask import Flask, render_template,flash
2 from flask_sqlalchemy import SQLAlchemy
3
4 app = Flask(__name__)
5 # 配置数据库的连接参数
6 app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@127.0.0.1/test_flask'
7 app.config['SECRET_KEY'] = 'abc'    #消息闪现保护的key，注意当消息闪现的SECRET_KEY配置了，WTF_CSRF_SECRET_KEY也可以不用配置，但是你配置了也没有影响，这个知识点了解一下
8 app.config['WTF_CSRF_SECRET_KEY'] = 'abc1234abc'    #WTF_CSRF_SECRET_KEY配置

第一个表单模型

1 from flask_wtf import FlaskForm     #导入flask_wtf的FlaskForm类
2 from wtforms import StringField     #StringField表示的是一个文本的输入框
3
4
5 class LoginForm(FlaskForm):     #继承FlaskForm类
6     """ 登录表单的实现 """
7     username = StringField(label='用户名')

1.3.表单常用字段类型及渲染

表单常用字段类型

文本/字符串
- StringField ：字符串输入
- PasswordField ：密码输入
- TextAreaField ：长文本输入
- HiddenField ：隐藏表单域
数值（整数，小数）
- FloatField ：浮点数输入
- IntegerField ：整数输入
- DecimalField ：小数输入（更准确）
选择
- RadioFied ：radio单选
- SelectField ：下拉单选
- SelectMultipleField ：下拉多选
- BooleanField ：勾选（复选框）
日期/时间
- DateField ：日期选择
- DateTimeField ：日期时间选择
文件/文件上传
- FileField ：文件单选
- MultipleFileField ：文件多选
其他
- SubmitField ：提交按钮
- FieldList ：自定义的表单选择列表（如：选择用户对象）
- FormField ：自定义多个字段构成的选项

表单字段的常用核心参数

lable ：lable标签（如：输入框钱的文字描述）
default ：表单的默认值
validators ：表单验证规则
widget ：定制界面显示方式（如：文本框、选择框）
description ：帮助文字

表单渲染

使用模板语法渲染表单内容：

表单输入区域： {{form.username}}
表单label： {{form.username.label}}

实例代码：

forms.py：python编写登录表单页面导入FlaskForm，wtfforms实现

1 from flask_wtf import FlaskForm
2 from wtforms import StringField, PasswordField, SubmitField
3
4
5 class LoginForm(FlaskForm):
6     """ 登录表单的实现 """
7     username = StringField(label='用户名', default='admin')
8     password = PasswordField(label='密码')
9     submit = SubmitField('登录')

app.py：导入forms文件，将python编写好的HTML页面展示类传递给html文件

 1 from flask import Flask, render_template
 2
 3 from forms import LoginForm
 4
 5 app = Flask(__name__)
 6 app.config['WTF_CSRF_SECRET_KEY'] = 'abc1234abc'
 7 app.config['SECRET_KEY'] = 'abc'
 8
 9
10 @app.route('/form', methods=['GET', 'POST'])
11 def page_form():
12     """ form 表单练习 """
13     form = LoginForm()
14     return render_template('page_form.html', form=form)

page_form.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Flask Form表单练习</title>
 6 </head>
 7 <body>
 8     <h3>欢迎登录</h3>
 9     <form action="" method="post">
10         <p>
11             {{ form.username.label }}
12             {{ form.username }}
13         </p>
14         <p>
15             {{ form.password.label }}
16             {{ form.password }}
17         </p>
18         <p>
19             {{ form.submit }}
20         </p>
21
22     </form>
23 </body>
24 </html>

1.4.通过表单保存数据

保单保存数据步骤：

第一步：检测表单是否已经通过验证
- form.validate_on_submit()
第二步：获取表单中传递过来的值
- form.field_name.data
第三步：业务逻辑代码编写（结合ORM）

表单保存数据的时候会触发CSRF表单保护：

默认模板是开启CSRF保护
关闭单个表单CSRF保护
- form = LoginForm(csrf_enabled=False)
全局关闭（不推荐）
- 在类上面加上:WTF_CSRF_ENABLED=False

如果不关闭CSRF保护，如何处理：

同步请求CSRF保护，在模板中添加csrf_token,通过CSRF机制的验证：

方式一：{{ form.csrf_token }}
方式二：<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

实例代码：

新增用户注册表单，对注册的内容进行入库，注册成功后返回index主页面。

app.py

 1 from flask import Flask, render_template, flash, redirect, url_for
 2 from flask_sqlalchemy import SQLAlchemy
 3
 4 from forms import RegisterForm
 5
 6 app = Flask(__name__)
 7 # 配置数据库的连接参数
 8 app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@********/test_flask'
 9 app.config['WTF_CSRF_SECRET_KEY'] = 'abc1234abc'
10 app.config['SECRET_KEY'] = 'abc'
11 db = SQLAlchemy(app)
12
13
14 class User(db.Model):
15     __tablename__ = 'weibo_user'
16     id = db.Column(db.Integer, primary_key=True)
17     username = db.Column(db.String(64), nullable=False)
18     password = db.Column(db.String(256), nullable=False)
19     birth_date = db.Column(db.Date, nullable=True)
20     age = db.Column(db.Integer, default=0)
21
22 @app.route('/')
23 def index():
24     """  首页 """
25     return render_template('index.html')
26
27 @app.route('/user/register', methods=['GET', 'POST'])
28 def page_register():
29     """ 新用户注册 """
30     # csrf_enabled为False表示不做csrf校验
31     # form = RegisterForm(csrf_enabled=False)
32     form = RegisterForm()
33     # 用户在提交表单的时候，会触发validate_on_submit
34     if form.validate_on_submit():
35         # 表单验证通过，接下来处理业务逻辑
36         # 1. 获取表单数据
37         username = form.username.data
38         password = form.password.data
39         birth_date = form.birth_date.data
40         age = form.age.data
41         # 2. 构建用户对象
42         user = User(
43             username=username,
44             password=password,
45             birth_date=birth_date,
46             age=age
47         )
48         # 3. 提交到数据库
49         db.session.add(user)
50         db.session.commit()
51         print('添加成功')
52         # 4. 跳转到登录页面
53         return redirect(url_for('index'))
54     else:
55         # 打印错误信息
56         print(form.errors)
57     return render_template('page_register.html', form=form)

forms.py

 1 from flask_wtf import FlaskForm
 2 from wtforms import StringField, PasswordField, SubmitField, DateField, IntegerField
 3
 4
 5 class RegisterForm(FlaskForm):
 6     """ 用户注册表单 """
 7
 8     # def __init__(self, csrf_enabled, *args, **kwargs):
 9     #     super().__init__(csrf_enabled=csrf_enabled, *args, **kwargs)
10
11     username = StringField(label='用户名', default='')
12     password = PasswordField(label='密码')
13     birth_date = DateField(label='生日')
14     age = IntegerField(label='年龄')
15     submit = SubmitField('注册')

page_register.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用户注册</title>
 6 </head>
 7 <body>
 8     <h3>用户注册</h3>
 9 {#  todo 注释内容：使用宏来把表单进一步完善 #}
10     <form action="{{ url_for('page_register') }}" method="post">
11         {{ form.csrf_token }}
12         <p>
13             {{ form.username.label }}
14             {{ form.username }}
15         </p>
16         <p>
17             {{ form.password.label }}
18             {{ form.password }}
19         </p>
20         <p>
21             {{ form.birth_date.label }}
22             {{ form.birth_date }}
23         </p>
24         <p>
25             {{ form.age.label }}
26             {{ form.age }}
27         </p>
28         <p>
29             {{ form.submit }}
30         </p>
31
32     </form>
33 </body>
34 </html>

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用户首页</title>
 6 </head>
 7 <body>
 8 注册成功
 9 </body>
10 </html>

2.表单验证与图片上传

2.1.表单验证

思考：以手机注册为例，不验证表单会怎么样？

用户输入的可能不是手机号
用户输入的可能不是他的手机号
不断的提交表单

思考：表单验证为了什么？

更好的用户体验
更少的安全隐患
永远不要相信用户的输入

内置的表单验证器

DataRequired/InputRequired ：必填验证
Email/URL/UUID ：电子邮箱/URL/UUID格式验证
Length(min=-1,max=-1,message=None) ：长度范围验证
EqualTo(fieldname,message=None) ：重复验证，用于密码的二次输入验证和上一次是否一致

自定义表单验证

场景一：只有本表单使用，在表单类里面创建一个方法，方法名为：validatge_需要验证的变量，在方法中编写验证逻辑

场景二：多个表单中使用，如：验证手机号码，登录/注册/修改用户信息页面均会用到。在表单类外面声明一个验证方法，传入form对象。这个方法命名就没有要求，这个见示例代码。

图为场景一的示例，场景二跟这个差不多；两者的区别主要在于一个放到类里面，一个放到类外面；备注：方法命名的规则暂时这么理解，我学的好像是这样的，我是这么理解的，有知道所以然的可以教下我，谢谢！

实例：

场景一（当前表单使用）：

 1 import re
 2
 3 from flask_wtf import FlaskForm
 4 from wtforms import StringField, PasswordField, SubmitField, DateField, IntegerField
 5 from wtforms.validators import DataRequired,ValidationError
 6
 7 class RegisterForm(FlaskForm):
 8     """ 用户注册表单 """
 9
10     username = StringField(label='用户名', default='')
11     password = PasswordField(label='密码',validators=[DataRequired("请输入密码")])  #增加必填验证
12     birth_date = DateField(label='生日')
13     age = IntegerField(label='年龄')
14     submit = SubmitField('注册')
15
16     def validate_username(self,field):  #注意这个方法必须是validate_*****
17         """ 验证用户名 """
18         # 自定义：强制验证用户名为手机号
19         username = field.data
20         pattern = r'^1[0-9]{10}$'   #自定义正则匹配规则
21         if not re.search(pattern,username):
22             raise ValidationError('请输入手机号码')
23         return field

我们看到报错提示信息是在控制台展示的，那么我们怎么让提示信息展示给用户？

forms.py文件里面自定义了表单验证规则，验证失败抛出form的错误

app.py文件无法提交时，将打印form文件抛出的异常.。异常内容为 {'username': ['请输入手机号码']} 是个items结构。

前端页面，获取forms的username的报错信息，进行展示

场景二（多个表单使用）：

图froms.py：用python编写登录的前端页面、表单自定义的验证、表单字段使用自定义的验证

疑问：在类外面自定义的验证方法，为什么要传form，不传行不行；不穿form就会报错，说应该传两个参数，只传了一个，那这是为什么呢？

看了系统自带验证规则的源码，发现都是两个形参form和field，就暂时这么理解吧：因为源码有，跟他保持一致，form具体干什么使的后面研究了再说吧！

图app.py启动文件：将登录页面forms.py交给html文件page_form进行渲染展示，同时进行form表单的验证

图：page_form.html+展实效果

2.2.图片上传

图片上传主要有两种方式实现

方式一：不使用wtf实现
方式二：使用wtf的FileField并添加类型验证

图片上传：不使用wtf

1）设置<form>的enctype， enctype="multipart/form-data"
2）在视图函数中获取文件对象 request.files
3）保存文件 f.save(file_path)

文件名称格式化： werkzeug.utils.secure_filename

示例：

上传不规则的文件名，secure_filename进行格式化

app.py

 1 import os
 2
 3 from flask import Flask, render_template, redirect, url_for, request
 4 from werkzeug.utils import secure_filename
 5
 6 from forms import UserAvatarForm
 7
 8 app = Flask(__name__)
 9 app.config['WTF_CSRF_SECRET_KEY'] = 'abc1234abc'
10 app.config['SECRET_KEY'] = 'abc'
11 # 自定义的配置扩展，表示文件上传的路径
12 app.config['UPLOAD_PATH'] = os.path.join(os.path.dirname(__file__), 'medias')
13
14 @app.route('/img/upload', methods=['GET', 'POST'])
15 def img_upload():
16     """ 不使用wtf实现的文件上传 """
17     if request.method == 'POST':
18         # 获取文件列表
19         files = request.files
20         file1 = files.get('file1', None)
21         if file1:
22             # 保存文件
23             f_name = secure_filename(file1.filename)
24             print('filename:', f_name)
25             file_name = os.path.join(app.config['UPLOAD_PATH'], f_name)
26             file1.save(file_name)
27             print('保存成功')
28         return redirect(url_for('img_upload'))
29     return render_template('img_upload.html')

img_upload.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文件上传</title>
 6 </head>
 7 <body>
 8 <form action="/img/upload" method="post" enctype="multipart/form-data">
 9     <p>
10         <input type="file" name="file1">
11         <input type="file" name="file2">
12     </p>
13     <p>
14         <input type="submit" value="开始上传">
15     </p>
16 </form>
17 </body>
18 </html>

图片上传：验证

文件必须上传： FileRequired
文件类型验证： FileAllowed

app.py

 1 import os
 2
 3 from flask import Flask, render_template, redirect
 4 from werkzeug.utils import secure_filename
 5
 6 from forms import UserAvatarForm
 7
 8 app = Flask(__name__)
 9 app.config['WTF_CSRF_SECRET_KEY'] = 'abc1234abc'
10 app.config['SECRET_KEY'] = 'abc'
11 # 自定义的配置扩展，表示文件上传的路径
12 app.config['UPLOAD_PATH'] = os.path.join(os.path.dirname(__file__), 'medias')
13
14
15 @app.route('/avatar/upload', methods=['GET', 'POST'])
16 def avatar_upload():
17     """ 头像上传 """
18     form = UserAvatarForm()
19     if form.validate_on_submit():
20         # 获取图片对象
21         img = form.avatar.data
22         f_name = secure_filename(img.filename)
23         file_name = os.path.join(app.config['UPLOAD_PATH'], f_name)
24         img.save(file_name)
25         print('保存成功')
26         return redirect('/')
27     else:
28         print(form.errors)
29     return render_template('avatar_upload.html', form=form)

forms.py

 1 from flask_wtf import FlaskForm
 2 from flask_wtf.file import FileRequired, FileAllowed
 3 from wtforms import FileField
 4
 5
 6 class UserAvatarForm(FlaskForm):
 7     """ 用户头像上传 """
 8     avatar = FileField(label='上传头像', validators=[
 9         FileRequired('请选择头像文件'),
10         FileAllowed(['png'], '仅支持PNG图片上传')
11     ])

avatar_upload.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>WTF 文件上传</title>
 6 </head>
 7 <body>
 8 <form action="/avatar/upload" method="post" enctype="multipart/form-data">
 9     {{ form.csrf_token }}
10     <p>
11         {{ form.avatar.label }}
12         {{ form.avatar }}
13     </p>
14     <p>
15         <input type="submit" value="开始上传">
16     </p>
17 </form>
18 </body>

使用拓展：Flask-Uploads

常用文件类型验证
指定文件上传的目录