3 Flask mega-tutorial第3章 Web表单 Froms

Love The Way You Lie 2022-05-17 00:22 150阅读 0赞

如需转载请注明出处。  
win10 64位、Python 3.6.3、Notepad++、Chrome 67.0.3396.99（正式版本）（64 位）  
注：作者编写时间2017-12-20，linux、python 3.5.2

以下内容均是加入自己的理解与增删，以记录学习过程。不限于翻译，部分不完全照搬作者Miguel Grinberg的博客，版权属于作者，感谢他提供免费学习的资料。

<table> 
 <tbody> 
  <tr> 
   <th colspan="4"><b><font>传送门</font></b></th> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81332147" rel="nofollow">00 开篇</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81354752" rel="nofollow">01 Hello world</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81364734" rel="nofollow">02 模板</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81389112" rel="nofollow">03 Web表单</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81485554" rel="nofollow">04 数据库</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81536333" rel="nofollow">05 用户登录</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81565017" rel="nofollow">06 个人资料和头像</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81590339" rel="nofollow">07 错误处理</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81634851" rel="nofollow">08 关注</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81672110" rel="nofollow">09 分页</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81746739" rel="nofollow">10 支持QQ邮箱</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81779883" rel="nofollow">11 美化页面</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81951594" rel="nofollow">12 时间和日期</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81982032" rel="nofollow">13 I18n和L10n 翻译成中文 zh-CN</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81989457" rel="nofollow">14 Ajax(百度翻译API</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82055120" rel="nofollow">15 更好的App结构(蓝图)</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82119331" rel="nofollow">16 全文搜索</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185100" rel="nofollow">17 部署到腾讯云Ubuntu</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185153" rel="nofollow">18 部署到Heroku</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185229" rel="nofollow">19 部署到Docker容器</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82776565" rel="nofollow">20 JavaScript魔法</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778415" rel="nofollow">21 用户通知</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778449" rel="nofollow">22 后台工作(Redis)</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778519" rel="nofollow">23 应用程序编程接口(API)</a></b></td> 
  </tr> 
 </tbody> 
</table>

在[第2章][2]中，为应用程序的主页 创建了一个简单的**模板**，并用`虚拟对象`作为尚未拥有的东西的占位符，如用户、博客文章等。在这章中，将实现：如何通过**Web表单**接受用户的输入。

其中，**Web表单**是任何Web应用程序中基本的**构建块**之一。在此，将使用**表单**来允许用户提交博客帖子，以及登录应用程序。

# Flask-WTF简介和安装 #

在Flask中，处理应用程序中的Web表单，将使用到**[Flask-WTF][]**扩展库，它是Flask和[WTForms][]的简单集成，主要功能有：使用CSRF(Cross-site request forgery，译作 跨站请求伪造)令牌保护表单、文件上传、支持reCAPTCHA（译作 反全自动区分计算机和人类的图灵测试，简单点就是：验证码）。扩展是Flask生态系统中非常重要的一部分。今后还会需要更多的扩展。

进入虚拟环境中，安装Flask-WTF：`pip install flask-wtf`

(venv) D:\microblog>pip install flask-wtf
    Collecting flask-wtf
      Using cached https://files.pythonhosted.org/packages/60/3a/58c629472d10539ae5167dc7c1fecfa95dd7d0b7864623931e3776438a24/Flask_WTF-0.14.2-py2.py3-none-any.whl
    Requirement already satisfied: Flask in d:\microblog\venv\lib\site-packages (from flask-wtf)
    Collecting WTForms (from flask-wtf)
      Using cached https://files.pythonhosted.org/packages/9f/c8/dac5dce9908df1d9d48ec0e26e2a250839fa36ea2c602cc4f85ccfeb5c65/WTForms-2.2.1-py2.py3-none-any.whl
    Requirement already satisfied: Jinja2>=2.10 in d:\microblog\venv\lib\site-packages (from Flask->flask-wtf)
    Requirement already satisfied: click>=5.1 in d:\microblog\venv\lib\site-packages (from Flask->flask-wtf)
    Requirement already satisfied: Werkzeug>=0.14 in d:\microblog\venv\lib\site-packages (from Flask->flask-wtf)
    Requirement already satisfied: itsdangerous>=0.24 in d:\microblog\venv\lib\site-packages (from Flask->flask-wtf)
    Requirement already satisfied: MarkupSafe>=0.23 in d:\microblog\venv\lib\site-packages (from Jinja2>=2.10->Flask->flask-wtf)
    Installing collected packages: WTForms, flask-wtf
    Successfully installed WTForms-2.2.1 flask-wtf-0.14.2

将附带安装WTForms，因为它是Flask-WTF的一部分。在D:\\microblog<b>venv\\Lib\\site-packages下将看到新安装的这俩个扩展。

<table> 
 <thead> 
  <tr> 
   <th>扩展名</th> 
   <th align="center">版本号</th> 
   <th align="right">简要说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flask-wtf</td> 
   <td align="center">0.14.2</td> 
   <td align="right">2017-08-13发布，主要功能：使用CSRF令牌保护表单、文件上传、支持reCAPTCHA</td> 
  </tr> 
  <tr> 
   <td>wtforms</td> 
   <td align="center">2.2.1</td> 
   <td align="right">创建表单</td> 
  </tr> 
 </tbody> 
</table>

# 配置 configuration #

目前为止，这个应用程序足够简单，无需担心它的 **配置**。Flask（以及Flask扩展）在如何执行操作方面提供了很多自由，并需要做一些决定，并将 这些决定作为一个 **配置变量列表**传递给 框架。

应用程序 有多种格式可指定**配置选项**。最基本的方案：在`app.config`这个字典中，将定义的变量作为键。形如：

app = Flask(__name__)
    app.config['SECRET_KEY'] = 'I am a secret, you can't guess.'
    #需要的话，可继续添加更多的变量

尽管上述语法可为Flask成功创建**配置选项**，但根据 *关注点分离原则*（Separation of concerns, SoC），所以不要将**配置**放在创建应用程序的相同位置，而是：将配置保存在单独的*.py*文件中，并使用类存储配置变量，将该.py文件放在项目顶级目录下。  
**D:\\microblog\\config.py**：密钥配置

import os
    class Config:
    	SECRET_KEY = os.environ.get('SECRET_KEY') or 'you will never guess'

`SECRET_KEY`这个配置变量，将会被**Flask及其扩展**使用其值作为加密秘钥，用于生产签名或令牌。而Flask-WTF使用它来保护Web表单来免受CSFR攻击。

**密钥的值** 是具有两个术语的表达式，由`or`运算符连接。第一个术语是查找环境变量的值；第二个术语是一个硬编码的字符串。当然这个安全性还是很低的。当将应用程序部署在生产服务器上时，得设置一个安全级别高的。

其中`os.environ`是获取本机系统的各种信息（如环境变量等，你打印出来就明白了，哈哈），它是一个字典。我觉得`os.environ.get('SECRET_KEY')`在开发环境中并没有用，是`None`，不知部署后是什么。  
有了上述这个**配置文件**，接下来得让**Flask应用程序**读取并应用它。在创建Flask应用程序实例后，就用`app.config.from_object()方法`完成：

app/\_\_init\_\_.py：Flask配置

from flask import Flask
    from config import Config#从config模块导入Config类
    
    app = Flask(__name__)
    app.config.from_object(Config)
    
    from app import routes

查看刚才配置的密钥是什么：

(venv) D:\microblog>python
    Python 3.6.3 (v3.6.3:2c5fed8, Oct  3 2017, 18:11:49) [MSC v.1900 64 bit (AMD64)] on win32
    Type "help", "copyright", "credits" or "license" for more information.
    >>> from microblog import app
    >>> app.config['SECRET_KEY']
    'you will never guess'
    >>>

# 用户登录表单 #

**Flask-WTF**扩展使用 Python类来表示 Web表单。 **表单类**只是将表单的字段定义为类变量。

再次根据SoC（关注点分离原则），新建一个forms.py模块来存放Web表单类。在此，定义一个**用户登录表单**，要求用户输入用户名、密码，还包含“Remember Me”复选框、提交按钮。  
**app/forms.py**：用户登录表单

from flask_wtf import FlaskForm#从flask_wtf包中导入FlaskForm类
    from wtforms import StringField,PasswordField,BooleanField,SubmitField#导入这些类
    from wtforms.validators import DataRequired
    
    class LoginForm(FlaskForm):
    	username = StringField('Username', validators=[DataRequired()])
    	password = PasswordField('Password', validators=[DataRequired()])
    	remember_me = BooleanField('Remember Me')
    	submit = SubmitField('Sign In')

在Flask生态下，Flask扩展一般都使用`flask_<name>`这样的命名约定作为在模块中顶级导入的符号。在这个情况下，Flask-WTF的所有符号都在`flask_wtf`下，这也是`FlaskForm`基类在`app/forms.py`顶部导入的地方。

from wtforms import StringField,PasswordField,BooleanField,SubmitField

这条语句表示：这个用户登录表单的字段类型的4个类是直接从WTForms包导入的，因为Flask-WTF扩展是不提供自定义（字段类型？）版本。对于每个字段，将在`LoginForm类`中将对象创建为类变量。每个字段都有一个描述或标签作为第一个参数。

在某些字段中看到的`可选参数validators`将验证行为附加到字段中，如**用户名、密码**肯定是需要进行验证的。`DataRequired验证器` 只是简单地检查该字段不会提交为空。当然还有其他的验证器可用。

# 用户登录-表单模板 #

有了上一步的登录表单，接下来得将表单添加到**HTML模板**中，让其在网页上呈现。  
LoginForm类中定义的字段知道如何将自己渲染为HTML。  
**app/templates/login.html**：用户登录表单模板

{% extends "base.html" %}
    {% block content %}
    	<h1>Sign In</h1>
    	<form action="" method="post" novalidate>
    		{
       { form.hidden_tag() }}
    		<p>
    			{
       { form.username.label }}<br>
    			{
       { form.username(size=32) }}
    		</p>
    		<p>
    			{
       { form.password.label }}<br>
    			{
       { form.password(size=32) }}
    		</p>
    		<p>{
       { form.remember_me() }} {
       { form.remember_me.label }}</p>
    		<p>{
       { form.submit() }}</p>
    	</form>
    {% endblock %}

这个用户登录表单模板使用了`extends`继承语句继承base.html模板，以确保一致的布局，即基础模板包含了所有页面的顶部导航栏。

在此的用户登录表单模板期望从`LoginForm类`实例化的表单对象作为参数给出，这个参数将由登录视图函数（目前还未编写）发送。

以下将讲述HTML知识，上述这段HTML代码中：`<form>`标签用作Web表单的容器。  
其中

1.  `action`属性表示用于告知浏览器当用户在表单中输入信息提交时应使用的URL。该属性设置为空字符串时，表单将提交到当前位于地址栏的URL，即在页面上呈现表单的URL。
2.  `method`属性用于指定在将表单提交到服务器时应使用的HTTP请求方法。默认情况下，是通过`GET`请求发送它。但几乎在所有情况下，使用`POST`请求会获得更好的用户体验，因为此类请求可在请求正文中提交表单数据，`GET`请求将表单字段添加到URL，会让浏览器地址栏变得混乱。
3.  `novalidate`属性用于告知浏览器不对此表单中的字段运用验证，这有效地将此任务留给服务器中运行的Flask应用程序。当然，使用`novalidate`完全是可选的，但对于第一种形式，设置它是很重要的，因为这将允许在本章后面的测试服务器端验证。
4.  form.hidden\_tag()这个模板参数 生成一个隐藏字段，其中包括用来防止CSRF攻击的令牌。要使表单受保护，需要做的是包含此隐藏字段，并在Flask配置中定义的SECRET\_KEY变量。

写过HTML Web表单的同学可能会发现这个模板中没有HTML字段，这是因为表单对象中的字段知道如何将自己呈现（渲染）为HTML，需要做的就是`{ { form.<field_name>.label }}`需要的字段标签、`{ { form.<field_name>() }}`需要的字段。对于需要其他HTML属性的**字段**，可将这些属性作为参数传递。此模板中的用户名、密码字段将size作为参数添加到`<input>`这个HTML标签作为属性。这还是可将CSS类、或ID附加到表单字段的方法。

# 用户登录-表单视图 #

在编写完上一步的用户登录表单模板后，想要在浏览器中看到此表单的最后一步是：在应用程序中编写一个它的视图函数，用于渲染该模板。

因此，编写一个映射到`/login` URL的视图函数`login()`，并将其传递给模板进行渲染。在routes模块中增加代码：

**app/routes.py**：用户登录视图函数

from flask import render_template
    from app import app
    from app.forms import LoginForm
    
    #...
    
    @app.route('/login')
    def login():
    	form = LoginForm()#表单实例化对象
    	return render_template('login.html', title='Sign In', form=form)

上述视图函数很简单，从`forms.py`模块中导入`LoginForm`类，然后实例化该类，最后将其发送到模板。`form=form`，`return`中将`form实例对象`赋值给`form变量`，这将获得表单字段所需的全部内容。

为了便于访问登录表单，在基础模板中改进，即在导航栏中包含指向它的链接：  
**app/templates/base.html**：导航栏中增加登录链接

<div>
    	Microblog:
    	<a href="/index">Home</a>
    	<a href="/login">Login</a>
    </div>

此刻，运行应用程序就可浏览器中查看该表单了。效果：  
![这里写图片描述][70]

# 接收表单数据 #

尝试点击上述“Sign In”提交按钮，浏览器将出现405错误“Method Not Allowed”。  
![这里写图片描述][70 1]  
在上一步中，用户登录的视图函数执行了一半的工作，即可在网页上显示表单。但它没有处理用户提交的数据的逻辑。这是Flask-WTF让这项逻辑处理变得非常简单的优势。更新用户登录视图函数代码，它接受、验证用户提交的数据：  
app/routes.py：接收登录凭据

from flask import render_template,flash,redirect
    
    @app.route('/login',methods=['GET','POST'])
    def login():
    	form = LoginForm()
    	if form.validate_on_submit():
    		flash('Login requested for user {},remember_me={}'.format(form.username.data,form.remember_me.data))
    		return redirect('/index')
    	return render_template('login.html',title='Sign In',form=form)

在`@app.routes()`装饰器中`参数methods`作用是：告诉Flask这个视图函数接受`GET`和`POST`请求方法，覆盖默认值（即只接受`GET`请求）。HTTP协议中，`GET`请求是将信息返回给客户端（如浏览器）的请求，到目前为止，该应用程序中的所有请求都属于这种类型；`POST` 请求通常在浏览器上服务器提交表单数据时使用。上述出现“Method Not Allowed”，是因为浏览器尝试发送POST请求，而应用程序没有配置去接受它。

`form.validate_on_submit()`方法完成所有表单处理工作。当浏览器发送`GET`接收带有表单的网页请求时，此方法将返回`False`，此时函数会跳过if语句并直接在函数的最后一行呈现模板。  
当用户在浏览器按下提交按钮时，浏览器发送POST请求，`form.validate_on_submit()`将收集所有数据，运行附加到字段的所有验证器，如果一切正常，它将返回`True`，表明数据有效且可由应用程序处理。但如果至少有一个字段未通过验证，则函数就会返回`False`，接着就像上述`GET`请求那样。  
当`form.validate_on_submit()`返回`True`，这个登录视图函数将调用两个函数，分别是`flash()、redirect()`，均从flask包导入的。  
`flash()` 用于向用户显示消息，如让用户知道某些操作是否成功。目前为止，将使用其机制作为临时解决方案，因为暂无用户登录未真实所需的基础结构，此时只是显示一条消息用于确认应用程序已收到凭据。  
`redirect()`用于指示客户端（浏览器）自动导航到作为参数给出的其他页面（如上述代码中的`/index`页面，即重定向到应用程序的`/index`页面）。

当调用`flash()`函数时，**Flask**会存储该消息，但闪烁的消息不会神奇地出现在Web页面中。应用程序的**模板**需要以适用于站点布局的方式**呈现/渲染**这些闪烁的消息。因此，将这些消息添加到**基础模板**中，以便所有模板都继承此功能。更新**基础模板**：  
**app/templates/base.html**：基础模板中的闪烁消息

<html>
    	<head>
    		{% if title %}
    			<title>{
       { title }} - Microblog</title>
    		{% else %}
    			<title>Welcome to Microblog</title>
    		{% endif %}
    	</head>
    	<body>
    		<div>Microblog:<a href="/index">Home</a><a href="/login">Login</a></div>
    		<hr>
    		{% with messages = get_flashed_messages() %}
    		{% if messages %}
    		<ul>
    			{% for message in messages %}
    			<li>{
       { message }}</li>
    			{% endfor %}
    		</ul>
    		{% endif %}
    		{% endwith %}
    		{% block content %}
    		{% endblock %}
    	</body>
    </html>

上述代码中，使用`with`结构将调用`get_flashed_messages()`的结果分配给变量`messages`，都在**模板**的上下文。这个`get_flashed_messages()`函数来自**Flask**，并返回`flash()`之前已注册的所有消息的列表。接着`if`语句判断messages是否具有某些内容，在这种情况下，一个`ul`标签被渲染成每个消息作为一个`li`标签列表项。而这种渲染风格看起来不太好，但Web应用程序样式化的主题将在稍后出现。

这些闪烁的消息的一个有趣属性是：一旦通过`get_flashed_messages()`请求它们，它们就会从列表中删除，因此它们在`flash()`调用后只出现一次。

运行程序，再次测试表单是如何工作的。确保将用户名或密码字段为空来提交表单，以查看DataRequired验证器如何暂停提交过程。

C:\Users\Administrator>d:
    
    D:\>cd D:\microblog\venv\Scripts
    
    D:\microblog\venv\Scripts>activate
    (venv) D:\microblog\venv\Scripts>cd D:\microblog
    
    (venv) D:\microblog>flask run
     * Serving Flask app "microblog.py"
     * Environment: production
       WARNING: Do not use the development server in a production environment.
       Use a production WSGI server instead.
     * Debug mode: off
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    127.0.0.1 - - [07/Aug/2018 16:16:26] "GET /login HTTP/1.1" 200 -

用户名或密码为空时提交表单，网页没反应。都不为空时，随意输入。  
![这里写图片描述][70 2]  
点击Sign in按钮后，倒是出现了一条消息：`Login requested for user 123456@qq.com，remember_me=Flase`  
![这里写图片描述][70 3]

# 增强字段验证 #

附加到表单字段的验证器可防止无效数据接受到应用程序中。应用程序 处理无效表单输入的方式是重新显示表单，让用户进行必要的更正。

当提交无效数据时，却没有明显提示用户提交的数据有问题，只是重新返回表单，这将影响用户体检。因此，现在的任务是：通过在验证失败的每个字段傍边**增加**有意义的错误提示来改善用户体验。

实际上，表单验证器已经生成了这些描述性错误消息，因此，缺少的是在模板中用于渲染/呈现它们的一些额外逻辑。在**用户登录模板**的用户名、密码字段中添加字段验证消息：更新代码  
**app/templates/login.html**：提示字段验证错误消息

{% extends "base.html" %}
    
    {% block content %}
        <h1>Sign In</h1>
        <form action="" method="post" novalidate>
            {
       { form.hidden_tag() }}
            <p>
    			{
       { form.username.label }}<br>
    			{
       { form.username(size=32) }}<br>
    			{% for error in form.username.errors %}
    			<span style="color:red;">[{
       { error }}]</span>
    			{% endfor %}
            </p>
            <p>
    			{
       { form.password.label }}<br>
    			{
       { form.password(size=32) }}<br>
    			{% for error in form.password.errors %}
    			<span style="color:red;">[{
       { error }}]</span>
    			{% endfor %}
            </p>
            <p>{
       { form.remember_me() }} {
       { form.remember_me.label }}</p>
            <p>{
       { form.submit() }}</p>
        </form>
    {% endblock %}

上述代码中，只是在用户名、密码字段之后添加`for`循环，以红色字体消息渲染错误消息。一般规则下，任何附加验证器的字段都会通过`form.<field_name>.errors`添加错误消息。这将是一个列表，因为字段可以附加多个验证器，并且多个可能提供错误消息提示给用户。

如果尝试提交空用户名或密码的表单，将看到红色错误提示，效果：  
![这里写图片描述][70 4]

# 生成URL #

用户登录表单现在比较完整了，下面将学习在 **模板** 包含链接和 重定向的方法。 例：基础模板中的当前导航栏

<div>
         Microblog:
         <a href="/index">Home</a>
         <a href="/login">Login</a>
    </div>

登录视图函数还定义了传递给redirect()函数的链接：

@app.route('/login', methods=['GET', 'POST'])
    def login():
        form = LoginForm()
        if form.validate_on_submit():
            # ...
            return redirect('/index')
        # ...

直接在**模板、源文件**中编写链接的一个问题是：如果将来某天要重新组织链接，将不得不修改整个应用程序的这个链接，搜索、替换。

为更好地控制这些链接，**Flask**提供了一个名为 `url_for()`函数，它使用URL的内部映射到视图函数来生成URL。例：`url_for('login')`返回`/login`；`url_for('index')`返回`/index`。`url_for()`中的参数就是端点名称，也就是视图函数的名字。

使用函数名称而不是URL的优点：URL比视图函数名称更可能发生变化；某些URL很可能包含动态组件，手动生成这URL需要连接多个元素，这极易出错，而`url_for()`能生成这些复杂的URL。

因此，今后每次应用程序要生成URL时，都使用`url_for()`。  
更新基础模板中的代码：  
**app/templates/base.html**：使用url\_for()进行链接

...
        <div>
            Microblog:
            <a href="{
       { url_for('index') }}">Home</a>
            <a href="{
       { url_for('login') }}">Login</a>
        </div>
    ...

更新login()视图函数中的代码：  
app/routes.py：对链接使用url\_for()函数

from flask import render_template, flash, redirect, url_for
    
    # ...
    
    @app.route('/login', methods=['GET', 'POST'])
    def login():
        form = LoginForm()
        if form.validate_on_submit():
            # ...
            return redirect(url_for('index'))
        # ...

目前为止，项目结构：

microblog/
        venv/
        app/
            templates/
                base.html
                index.html
                login.html
            __init__.py
            forms.py
            routes.py
        microblog.py

参考：  
[作者博客][Link 1]

如需转载请注明出处。

[2]: https://blog.csdn.net/weixin_38256474/article/details/81364734
[Flask-WTF]: https://flask-wtf.readthedocs.io/en/stable/
[WTForms]: https://wtforms.readthedocs.io/en/stable/
[70]: /images/20220517/8dd1d1326f8041e9a8a7d45cc8955f27.png
[70 1]: /images/20220517/1122309fbc0a444d9a8c536ef82e40a0.png
[70 2]: /images/20220517/bcadbb1b8e754b5a9160cff2b0a55461.png
[70 3]: /images/20220517/c608e2e4d74c49bcb33d962d28636590.png
[70 4]: /images/20220517/00938915a49d4ff48068278150be6d47.png
[Link 1]: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iii-web-forms