Flask Web开发实战总结笔记3

一、使用Flask-WTF处理表单

​ html中表单用<form>标签创建，表单中的字段用<input>标签定义

1. 定义WTForms表单类

   从wtforms类导入Form基类和字段类，自定义类继承Form基类后，在自定义类里调用字段类作为函数创建对象(实例化)。常用的字段类有如：BooleanField,StringField,PasswordField等等，分别对应着不同的表单类

   在实例化字段时常用的参数有label，render_kw，validators，default

   validators参数可以传入WTForms验证器的列表，作为验证时的约束

2. 输出HTML代码

   将实例属性转换成字符串或者直接调用可以获得对应html代码(如form.username())，<label>元素的代码可以通过"form.字段名.label"获取。通过使用render_kw属性或者在调用时传入字段，可以对<input>添加额外的属性。

   注：可设置"autocomplete"为"off"，关闭input的记忆功能(输入框下拉的历史记录)

3. 在模板中渲染表单

   在视图函数里实例化表单类(如LoginForm)，然后在render_template()函数中将实例传入关键字参数form

二、处理表单数据

1. 提交表单

   当<form>标签声明的表单中类型为submit的提交字段被单击时，就会创建一个提交表单的http请求。表单的提交行为由三个属性控制：

   action：表单提交时发送请求的目标URL

   method：提交表单的HTTP请求方法，默认值为GET方法，还可设置为POST方法

   enctype：表单数据的编码类型，默认值为application/x-www-form-urlencoded，还可设置为multipart/form-data(文件类型)、text/plain(纯文本类型)

2. 验证表单数据

   客户端验证：客户端的内置认证有type,required,min,max,accept等

   服务端验证：wtforms验证，也即validators

   在视图函数中验证表单：使用Flask-WTF提供的validate_on_submit()方法验证表单数据

   通过验证后通过"form.属性名.data"获取对应字段的数据

   对提交表单的POST请求返回重定向响应后，将最后一个请求转换为GET请求

3. 在模板中渲染错误信息

   WTForms会把错误信息添加到表单类的error属性中，通过"forms.字段名.errors"获取对应字段的错误消息列表

三、表单进阶实践

1. 设置错误消息语言

   app.config[“WTF_18N_ENABLED”] = False

   class MyBaseForm(FlaskForm):

   ​ class Meta:

   ​ locales = [“zh”]

2. 使用宏渲染表单

   定义一个宏接受表单类实例的字段属性，和附加的关键字参数作为输入，返回包含<label>标签、表单字段、错误消息列表的HTML表单字段代码

3. 自定义验证器

   行内验证器：定义validate_字段属性名的方法，会作为验证器对字段进行处理

   全局验证器：定义工厂函数

4. 文件上传

   在html中，渲染文件上传字段只需要将<input>标签的type属性设置为file即可。需要注意的几个问题：验证文件类型、验证文件大小、过滤文件名

   1. 定义上传表单

      使用flask_wtf.file里的FileField类构造上传表单，FileRequired验证是否包含文件对象，FileAllowed验证文件类型

      通过app.config[“MAX_CONTENT_LENGTH”]可以设置文件最大限制

   2. 渲染上传表单

      实例化表单类后，传入模板，需要将表单的enctype属性设置为"multipart/form-data"

   3. 处理上传文件

      在使用Flask-WTF时，可通过form.属性名.data获取上传文件对象，有3种处理原文件名方式：直接使用，通过werkzeug模块的secure_filename函数，通过uuid.uuid4().hex统一重命名

      通过内置的send_from_directory()函数来获取文件

   4. 多文件上传

      在客户端文件上传字段(type=file)加入multiple属性，即可开启多选

      使用WTForms的MultipleFileField字段创建该类表单，然后在requests.files.getlist(字段name值)返回上传文件对象的列表

   5.Flask-CKEditor富文本编辑器

   1. 配置富文本编辑器

      app.config[“CKEDITOR_SERVE_LOCAL”] = True使用内置本地资源

   2. 渲染富文本编辑器

      在html上通过<textarea>``</textarea>表示，从flask_ckeditor包导入CKEditorField函数后，传入模板

   6.单个表单多个提交按钮

   ​ 通过提交按钮字段的值判断当前被单机的按钮

   7.单个页面多个表单

   1. 单视图处理

      为两个表单的提交字段设置不同的名称，两个表单类实例通过不同的变量名传入模板，以便在模板中相应渲染对应的表单字段

   2. 多视图处理

      通过分离表单的渲染和验证实现