[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程

简介：简单的集成flask，WTForms，包括跨站请求伪造（CSRF），文件上传和验证码。

一.安装（Install）

此文仍然是Windows操作系统下的教程，但是和linux操作系统下的运行环境相差甚微。

使用Python版本3.5.2.

上一篇文章提到Virtualenv环境运行Python，这次仍然建立Python虚拟运行环境以便实现不同数据包的隔离。

• 创建wtfdemo虚拟运行环境

用控制台（管理员运行模式）进入（cd）到想要创建工程的路径下，创建wtfdemo文件夹。

mkdir wtfdemo

进入（cd）wtfdemo文件夹，创建Python虚拟运行环境。

virtualenv flaskr

出现如下字样，说明虚拟环境创建成功

PS:本次提供第二种创建Python虚拟运行环境的使用方法

virtualenv -p source_file\python.exe target_file

为什么提出第二种创建方法，你会发现，当你的Python Web程序开发多了以后，PC上难免安装了很多版本的Python运行环境。

举例：当PC上同时安装了Python2.7和Python3.5，运行virtualenv flaskr后，建立的Python虚拟运行环境是Python2.7版本的，但是我们的开发环境是Python3.5。

在控制台中输入一下指令，你就会发现问题。

virtualenv -h

出现下面图片显示，默认的virtualenv安装路径是Python2.7，也就是默认的安装的虚拟环境是Python2.7版本。

所以，在这种情况下，请指定你需要的Python版本，并建立虚拟运行环境。

• 安装flask-wtf库文件

进入Python虚拟运行环境（在上一篇博文中写过），执行以下指令。

pip install flask
pip install flask-wtf
pip install flask-login
pip install flask-sqlalchemy

出现如下图所示，说明安装成功。

flask安装成功。

flask-wtf安装成功。

flask-login安装成功。（本次使用flask-wtf库时需要辅助以该运行库）

flask-sqlalchemy安装成功。

至此，环境配置阶段结束。

二.Flask-WTF

flask-wtf实现了简单集成WTForms，包括CSRF，文件上传以及Google内嵌的验证码。

特性：

①集成了WTForms。

②包含了带有CSRF的安全表单

③全局的CSRF保护

④验证码Recaptcha的支持

⑤支持Flask-Upload的文件上传

⑥多语言集成

但，成也集成败也集成，flask-wtf不包含WTForms中许多重要的API，在进行复杂作业时显得力不从心。

实际上，flask-wtf下整合的WTForm单元已经能基本满足一些小型网站的建设使用了。

三.在实例中应用

• 文件结构

上一篇博文中，文件结构很是混乱，在实际维护中很不方便，会留下很多隐患，比如后期维护人员无法很快的切人项目中进行解读代码。

此处将各个模块进行分离，抽离出各个不同的模块。这样的有点是单个文件只操作自己的功能，代码可读性强，逻辑清晰。缺点就是大型项目时文件会有很多碎小的文件，需要经常使用from import语句从不同的文件中引用出不同的功能。

但是相对于优点，缺点所带来的风险是很小的。实际工作中，这样的分文件管理项目是极力推荐的，逻辑清晰，可维护性高是每一个优秀的项目应该具有的最基本属性。

本文采用以下文件结构。

wtfdemo→flaskr
　　　　→templates   →login.html
　　　　　　　　　　　 →index.html
       →uploads
       →wtf.py
       →model.py
       →views.py
       →run.py
       →config.py
       →form.py

本次应用实现一个简单的用户登录功能模块，文中涵盖的flask-login包将在下一篇博文中详细解释，如果想马上了解，请查看flask-login官方文档。

• 详细参数解析

config.py代码如下所示。

 import os

 basedir = os.path.abspath(os.path.dirname(__file__))

 SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'test.db')
 SQLALCHEMY_TRACK_MODIFICATIONS = False

 CSRF_ENABLED = True
 SECRET_KEY = 'you will never guess'

 RECAPTCHA_PUBLIC_KEY = '6LeYIbsSAAAAACRPIllxA7wvXjIE411PfdB2gt2J'
 RECAPTCHA_PRIVATE_KEY = '6LeYIbsSAAAAAJezaIq3Ft_hSTo0YtyeFG-JgRtu'

一句一句解释

①OS模块是Python标准库中的一个用于访问操作系统功能的模块，OS模块提供了一种可移植的方法使用操作系统的功能。

这里利用os.path.abspath（）函数，取出该文件下的绝对路径。

②将取出的绝对路径下存放到basedir中，以便被其他文件引用。

③SQLALCHEMY_DATABASE_URI用于连接数据库，SQLALCHEMY_TRACK_MODIFICATIONS追踪对象的修改并且发送信号，这里在上一篇文章讲解过。

④CSRF_ENABLED为是否开启flask-wtf下的CSRF（跨站请求伪造）保护，True为开启保护状态。

⑤SECRET_KEY设置Flask的应用密匙，同时CSRF开启保护时，同时需要一个密匙，如果不在文件中明确指出，通常与你的 Flask 应用密钥一致。如果想要使用不同的密匙，请在文件中配置CSRF单独的密匙。

WTF_CSRF_ENABLED = False

⑥RECAPTCHA_PUBLIC_KEY与RECAPTCHA_PRIVATE_KEY分别为，必需公钥与必需私钥。

wtf.py代码如下。

 from flask import Flask
 from flask_sqlalchemy import SQLAlchemy
 from config import SQLALCHEMY_DATABASE_URI, SQLALCHEMY_TRACK_MODIFICATIONS
 from flask_login import LoginManager, AnonymousUserMixin

 app = Flask(__name__)
 app.config.from_object('config')
 db = SQLAlchemy(app)
 lm = LoginManager()
 lm.init_app(app)
 lm.login_view = 'login'
 lm.login_message = 'Please log in!'
 lm.login_message_category = 'info'
 lm.anonymous_user = AnonymousUserMixin
 lm.session_protection = 'strong'
 lm.refresh_view = 'login'
 lm.needs_refresh_message = 'Please enter your info'
 lm.needs_refresh_message_category = "refresh_info"

 from model import User
 import views

①引用包中的函数说明。

Flask函数为flask架构的主函数，一切flask架构的Web开发都是由此函数引申出来的。

SQLAlchemy函数为flask-sqlalchemy包的主函数，由此函数绑定相应的flask架构应用，就可以实现连接数据库的操作。

SQLALCHEMY_DATABASE_URI与SQLALCHEMY_TRACK_MODIFICATIONS为config.py中配置相应的参数，在此文件中被引用以便使用。

LoginManager函数是flask-login包的主函数，由此将flask架构和flask-login连接成一个整体。

②app.config.from_object函数将config文件下能配置到app的条目，绑定到app上。结果等同于直接绑定，等同结果如下。

app.config['SQLALCHEMY_DATABASE_URI'] = SQLALCHEMY_DATABASE_URI
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = SQLALCHEMY_TRACK_MODIFICATIONS

③其他关于flask-login包下的函数，在下篇博文中将详细的讲解，本篇文章重点介绍flask-wtf包中的API使用。

form.py代码构成如下。

 from flask_wtf import Form
 from wtforms import TextField, BooleanField
 from wtforms.validators import DataRequired
 from flask_wtf.recaptcha import RecaptchaField

 from werkzeug import secure_filename
 from flask_wtf.file import FileField

 class LoginForm(Form):
     username = TextField('username', validators=[DataRequired()])
     password = TextField('password', validators=[DataRequired()])
     remember_me = BooleanField('remember_me', default=False)
     recaptcha = RecaptchaField()

 class UploadForm(Form):
     file = FileField()

①Form为flask-wtf的基础form类型，一切的网页表单都是继承Form父类的属性，并添加自己独有的处理

②TextField, BooleanField是WTForm构建的文字域和复选框域，对应HTML的<input type='text'/>和<input type='checkbox'/>标签。

③DataRequired验证TextField是否为空，为空返回一个错误信息（error message）

④在将文件保存在文件系统之前，要坚持使用secure_filename函数来确保文件名是安全的。

⑤flask-wtf整合了flask-upload中的部分函数，所以FileField不是从WTForm中引用出来的。FileField顾名思义，对应HTML标签<input type='file'/>标签。

⑥分析LoginForm类

 class LoginForm(Form):
     username = TextField('username', validators=[DataRequired()])
     password = TextField('password', validators=[DataRequired()])
     remember_me = BooleanField('remember_me', default=False)
     recaptcha = RecaptchaField()

类成员构成： 变量名 = xxxField（），其中xxxField中可以选择传入<input/>标签的name，validators属性判断如果TextBox中为None则返回错误消息

变量名可以在相对应的HTML文件中使用对应的 form.变量名 使用。

解析：此处添加两个TextBox一个输入用户名，一个输入密码。一个CheckBox复选框，实现记住用户功能。最后一个为登陆时防止恶意登陆的验证码。

model.py代码构成。

 from wtf import db
 from flask_login import UserMixin

 class User(db.Model, UserMixin):
     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String(80), unique=True)
     password = db.Column(db.String(80), unique=True)

     def __init__(self, username, password):
         self.username = username
         self.password = password

     def __repr__(self):
         return '<User %r>' % self.username

①将wtf中模块中的db参数引用到model.py中，以创建ORM数据库映射关系

②其中UserMixin为flask-login中的用户类，其中包含了一些可以在实现用户登录时验证时需要的属性。

③User类中定义id，用户名及密码属性。__init__为User类的构造函数，__repr__方便在调试中输出数据时使用。

views.py代码构成。（下边的代码包含了Flask框架下的一些简单应用，请在有一定Flask架构基础的情况下，可以快速的切入下段代码。其中flask-login在本文只一笔带过，将在下篇博文中详细解析flask-login包的API使用实例教程）

 from flask import render_template, flash, redirect, session, url_for, request, g
 from flask_login import login_user, logout_user, current_user, login_required, AnonymousUserMixin, fresh_login_required, login_fresh
 from wtf import app, db, lm, User
 from form import LoginForm, UploadForm

 @app.before_request
 def before_request():
     g.user = current_user

 @lm.user_loader
 def load_user(id):
     user = User.query.filter_by(id=id).first()
     return user

 @app.route('/login', methods=['GET', 'POST'])
 def login():
     if g.user is not None and g.user.is_authenticated:
         login_fresh()
         session['_fresh'] = False
         return redirect(url_for('index'))
     if g.user.is_active == True:
         flash('active is True')
     else:
         flash('active is False')
     form = LoginForm()
     if form.validate_on_submit():
         user = User.query.filter_by(username=form.username.data, password=form.password.data).first()
         if(user is not None):
             login_user(user,remember=form.remember_me.data)
             return redirect(request.args.get("next") or url_for('index'))
     return render_template('login.html', form=form)

 @app.route('/', methods = ['GET', 'POST'])
 @app.route('/index', methods=['GET', 'POST'])
 @login_required
 def index():
     form = UploadForm()

     if form.validate_on_submit():
         filename = secure_filename(form.file.data.filename)
         form.file.data.save('uploads/' + filename)
         return redirect(url_for('upload'))

     return render_template('upload.html', form=form)

 @app.route('/logout')
 @login_required
 def logout():
     logout_user()
     return redirect(url_for('login'))

①from form import LoginForm, UploadForm, InfoForm

将form.py中定义的表单类引入到该文件中。

②before_request函数，定义为flask-login绑定用户时使用，在发起请求之前首先调用此函数。

③load_user函数，定义为根据ID取出用户实体。

④login函数，详细分析：

@app.route('/login', methods=['GET', 'POST'])         #接受前段POST和GET的表单信息，绑定到发布/login页面上
def login():
    if g.user is not None and g.user.is_authenticated:#判断用户是否登录过系统，或者是否使用过记住用户这个功能        
        return redirect(url_for('index'))             #如果满足条件，则跳转到/index界面    
    form = LoginForm()                                #实例化LoginForm()
    if form.validate_on_submit():                     #validate_on_submit函数判断form表单中是否有提交动作，如果有，则获取该动作
        user = User.query.filter_by(username=form.username.data, password=form.password.data).first()#获取是否存在用户（这种未加密登录方法不推荐在实际项目中使用）
        if(user is not None):                         #判断取出的数据库用户实体是否为空
            login_user(user,remember=form.remember_me.data)#将用户实体，记住用户选项，绑定到flask-login中
            return redirect(request.args.get("next") or url_for('index'))#重定向到next页面或是index页面
    return render_template('login.html', form=form)   #使用模板函数，将form绑定到login.html页面上

⑤index函数分析

@app.route('/', methods = ['GET', 'POST'])            #接受前段POST和GET的表单信息，绑定到发布跟目录上
@app.route('/index', methods=['GET', 'POST'])　　　　　　　　#接受前段POST和GET的表单信息，绑定到发布/index页面上
@login_required                                       #验证用户是否登录
def index():　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
    form = UploadForm()                               #实例化UploadForm()
    if form.validate_on_submit():　　　　　　　　　　　　　　　　　  #判断表单中是否存在提交动作
        filename = secure_filename(form.file.data.filename)#secure_filename函数确保文件名是安全，并赋值到filename中
        form.file.data.save('uploads/' + filename)    #将文件保存到工程目录的位置
        return redirect(url_for('index'))            #上传完文件后将页面重定向到index.html
    return render_template('index.html', form=form)  #使用模板函数

⑥logout函数分析

@app.route('/logout') #将函数绑定到/logout链接上
@login_required       #验证用户是否登录
def logout():
    logout_user()     #清空session中的缓存
    return redirect(url_for('login'))#重定向到login.html页面上

login.html代码构成

<html>
<head>
Login-Demo
</head>
<body>
<form method="POST" action="">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul>
    {% for message in messages %}
        <li>{{ message }} </li>
    {% endfor %}
    </ul>
    <hr/>
    {% endif %}
    {% endwith %}
    {{form.csrf_token}}
    {{form.username(size=80)}}
    {% for error in form.username.errors %}
        <span style="color: red;">[{{error}}]</span>
    {% endfor %}<br>
    {{ form.password(size=80) }}
    {% for error in form.password.errors %}
        <span style="color: red;">[{{error}}]</span>
    {% endfor %}<br>
    <p>{{ form.remember_me }} Remember Me</p>
    <p></p>
    <p><input type="submit" value="Sign In"></p>
    <a href="{{ url_for('logout') }}">Logout</a>
</form>
</body>
</html>

一下讲解表单中各个语句的含义。

{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
    <li>{{ message }} </li>
{% endfor %}
</ul>
<hr/>
{% endif %}
{% endwith %}

①get_flashed_messages函数获取flask后端发动的flash消息。

②判断如果是消息类型的话循环输出

{{form.csrf_token}}
{{form.username(size=80)}}
{% for error in form.username.errors %}
    <span style="color: red;">[{{error}}]</span>
{% endfor %}<br>
{{ form.password(size=80) }}
{% for error in form.password.errors %}
    <span style="color: red;">[{{error}}]</span>
{% endfor %}<br>
<p>{{ form.remember_me }} Remember Me</p>
<p><input type="submit" value="Sign In"></p>
<a href="{{ url_for('logout') }}">Logout</a>

①form.csrf_token设置开启CSRF保护

②form.username(size=80)，创建一个长度为80px的TextBox，对应前面提到的LoginForm创建的成员变量username

③for error in form.username.errors，此处抓取validators=[DataRequired()]返回的错误信息（error message）

④form.password(size=80），创建一个长度为80px的TextBox，对应前面提到的LoginForm创建的成员变量password

⑤form.remember_me，创建一个CheckBox，对应前面提到的LoginForm创建的成员变量remember_me

⑥<input type="submit" value="Sign In">添加一个按钮，点击后触发form.validate_on_submit()函数

⑦<a href="{{ url_for('logout') }}">前段调用后端函数的一种方法，调用后端函数view.py中的logout函数

index.html代码构成

<html>
<head>
{% if filedata %}
<h3>{{ filedata.filename }}</h3>
{% endif %}
</head>
<body>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
    <li>{{ message }} </li>
{% endfor %}
</ul>
<hr/>
{% endif %}
{% endwith %}
<a href="{{ url_for('logout') }}">Logout</a>
<form method="post" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    {{ form.file }}
    <input type="submit">
</form>
</body>
</html>

将UploadForm类中的file呈现在页面上。

最后，我们为了运行程序，添加run.py文件。

from wtf import app
app.run(debug=True)

运行如下代码，执行此次实例程序。

四.运行实例程序

打开浏览器输入 http://127.0.0.1:5000/login，进入登录界面。

关于数据库的操作已经在上一篇博文里写的很清楚了，在数据库中已经添加了用户(username=john,password=1)。

①当直接点击Sign In按钮之后，会出现如下图显示的效果。

出现上面[This field is required.]是from.py文件中validators=[DataRequired()]的功劳，这段代码帮你验证了提交表单中TextBox是否为空。

②当输入用户名和密码之后，你会发现，点击Sign In按钮之后，并没有跳转到预期的index.html界面。

Q:为什么没有跳转。

A:这和我们之前的一个疏忽造成的，之前的代码我已经留下了一个位置修改这个问题。

下面我们来分析，问题是点击按钮无法执行代码中的跳转，说明后端代码绑定控件的时候出现问题。

那是什么问题呢，flask-wtf已经为你提供了一个可以查出问题的方法，使用form.errors检索出在提交表单之后发生的问题。

在views.py文件的login函数中添加如下代码（在实例化LoginForm之后添加）

flash(form.errors)

重新运行程序，输入用户名和密码，点击Sign In按钮。

看到{'recaptcha': ['The response parameter is missing.']}你发现问题了么，对的，就是因为笔者的一个不小心，没有在HTML文件实例化recaptcha，由于验证码和按钮有一个相互作用的关系，试想当你登录一个系统，不输入验证码直接点击登录，会发生一样的问题。

解决办法：

在login.html添加如下代码。

<p>{{ form.remember_me }} Remember Me</p>
<p>{{ form.recaptcha }}</p>#添加的代码
<p><input type="submit" value="Sign In"/><p>

再次重新启动程序，这回我们就会看到我们需要的样子。

输入用户名和密码，按验证码要求点击相应的图片，点击Sign In按钮，登录成功！

点击Choose File，让我们上传一个文件试试看，点击upload按钮之后，你会在项目根目录下的Uploads文件夹找到你上传的文件。

PS：本地运行并上传文件，不会出现问题。如果你是发布在网络中的时候，请注意一下几个问题。

①图片同名问题。

②上传文件夹权限问题。（笔者之前在项目中处理的办法是将读写权限赋予给everyone用户，但是这样会大大降低服务器的安全性）

关于flask-wtf中文件上传的一些解析，将在以后讲解flask-upload的时候一起讲解。

关于本文中的flask-login包，我们将在下一篇文章中解析。

以上就是基本的flask-wtf使用实例说明，欢迎探讨转载及引用参考，你们的回应是我的动力。

如果文中存在错误或是某个地方说的不够精确，劳烦批评指出。

以上，辛苦了。

参考：

[1] github源码：https://github.com/lepture/flask-wtf

[2] flask-wtf官方文档：https://flask-wtf.readthedocs.io/en/latest/

*本文为Alima原创，如果转载请联系笔者，转载注明格式[转载][博客园][Alima][关于flask-wtf中API使用实例教程]，并在文首注明本文链接，多谢合作。

*非法转载及非法抄袭博文将依照网络著作权流程办理，请尊重作者劳动成果，最终解释权归Alima与博客园共同所有，感谢合作