Flask Web 极简教程（四）- Flask WTF Froms（Part A）

RiemannHypothesis

发布于 2022-09-26 16:37:12

3.7K00

代码可运行

文章被收录于专栏：ElixirElixir

运行总次数：0

代码可运行

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

一、表单

表单在页面中主要负责数据采集，一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框密码框、隐藏域多行文本框、复选框单选框下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作

常见的表单有注册表单、登录表单、搜索表单等

视图函数中获取表单数据的方式有两种：

GET请求提交的表单：request.args.get('name', None)
POST请求提交的表单：request.from.get('age', None)

二、WTF表单

WTF 表单是一个第三方的库，可以通过Python代码生成表单，而Flask-WTF则是Flask集成了WTF表单功能的实现。

Flask-WTF可以实现这些功能，

集成 wtforms。
带有 csrf 令牌的安全表单。
全局的 csrf 保护。
支持验证码（Recaptcha）。
与 Flask-Uploads 一起支持文件上传。
国际化集成。

更多信息可以查看 Flask-WTF 官网。Flask-WTF需要通过安装才可以使用。

pip3 install Flask-WTF

在Pycharm中创建新的Flask项目flask-wtf，要使用Flask-WTF需要在app.py中创建Flask对象之后添加如下配置，

# 配置WTF的CSRF，Value可以是任意的字符串
app.config['WTF_CSRF_SECRET_KEY'] = 'abc21231fafae2'

第一个表单模型

在项目目录下新建一个form.py文件，专门用来编写表单模型，以登录表单为例，新增一个LoginForm对象，并增加相应的属性

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField


class LoginForm(FlaskForm):
    username = StringField(label='用户名')
    password = PasswordField(label='密码')
    submit = SubmitField(label='提交')

表单字段的常用核心属性如下

属性名	属性作用
label	form表单中的label标签，如输入框前的文字描述
default	表单中输入框的默认值
validators	表单验证规则
widget	定制界面的显示方式
description	帮助文字

在app.py中增加视图函数

from flask import Flask, render_template
from form import LoginForm

@app.route('/form')
def form():
    login_form = LoginForm()
    # 返回login_form表单模型，在form.html中进行渲染
    return render_template('form.html', login_form=login_form)

在templates增加form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Form</title>
</head>
<body>
<h3>登录</h3>
<form action="">
    {# 渲染LoginForm表单模型中username字段的label属性#}
    {{ login_form.username.label }}:
    {{ login_form.username }} <br>
    {{ login_form.password.label }}:
    {{ login_form.password }} <br>
    {{ login_form.submit }}
</form>
</body>
</html>

启动应用，浏览器访问 http://127.0.0.1:5000/form

表单渲染成功，但是input输入框是空白的，可以通过表单模型中字段的default属性来设置默认值

# 其余代码不变

class LoginForm(FlaskForm):
    username = StringField(label='用户名', default='stark')
    password = PasswordField(label='密码', default='1231231')
    submit = SubmitField(label='提交')

再次访问 http://127.0.0.1:5000/form

用户名字段类型是StringField并且显示了设置的默认值，密码是PasswordField类型，虽然设置了默认值，但是是不能显示的。在表单中的用户名和密码输入框中输入数据

可以看出密码是非明文显示的

表单模型的字段类型

在第一个表单模型中使用了两个字段类型，分别是StringField和PasswordField，并且在页面输入密码是也能够将密码以非明文的形式显示，除了这两个类型外还有其他的字段类型，

文本/字符串相关类型
- StringField，字符串输入
- PasswordField，密码输入
- TextAreaField，长文本输入
- HiddenField，隐藏表单域
数值类型既整数和小数相关类型
- FloadField，浮点数输入
- IntegerField，整数输入
- DecimalField，精确小数输入
单选多选等选择相关类型
- RadioField，radio单选
- SelectField，下拉单选
- SelectMultipleField，下拉多选
- BooleanField，勾选
日期时间相关类型
- DateField，日期选择
- DateTimeField，日期时间选择
文件上传相关类型
- FileField，文件单选
- MultipleFileField，文件多选
其他类型
- SubmitField，提交表单按钮
- FieldList，自定义的表单选择列表
- FormField，自定义多个字段构成的选项