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

1.表单介绍

1.1.表单知识回顾

 

常见的表单元素:

  • 表单标签
    • 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 

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图

下载好之后如何使用呢?需不需要一些配置呢?它的配置很简单,它配置的目的就是用来做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}} 

 

实例代码:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图1

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图2Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图3

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>

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图4Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图5

 Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图6

 

2.表单验证与图片上传

2.1.表单验证

思考:以手机注册为例,不验证表单会怎么样?

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

思考:表单验证为了什么?

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图7

内置的表单验证器

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图8Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图9

 

自定义表单验证

  • 场景一:只有本表单使用,在表单类里面创建一个方法,方法名为:validatge_需要验证的变量,在方法中编写验证逻辑
  • 场景二:多个表单中使用,如:验证手机号码,登录/注册/修改用户信息页面均会用到。在表单类外面声明一个验证方法,传入form对象。这个方法命名就没有要求,这个见示例代码。

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图10

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

 

实例:

场景一(当前表单使用):

 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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图11

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图12Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图13

 

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

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图14

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图15

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图16

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图17Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图18

场景二(多个表单使用):

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图19

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图20

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图21

👇图app.py启动文件:将登录页面forms.py交给html文件page_form进行渲染展示,同时进行form表单的验证Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图22

👇图:page_form.html+展实效果

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图23Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图24

2.2.图片上传

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

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

 

图片上传:不使用wtf

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

 

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

 

示例:

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图25

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

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) – Flask表单的实现插图26

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

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

 

文章来源于互联网:Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) - Flask表单的实现

THE END
分享
二维码