##配置为了能够处理 web 表单，我们将使用 Flask-WTF，该扩展封装了 WTForms并且恰当地集成进 Flask 中。创建配置文件(config.py): ``` CSRF_ENABLED = True SECRET_KEY = 'shi-yan-lou' ``` Flaks-WTF 扩展只需要两个配置。CSRF_ENABLED 配置是为了激活*跨站点请求伪造*保护。在大多数情况下，你需要激活该配置使得你的应用程序更安全些。 SECRET_KEY 配置仅仅当 CSRF 激活的时候才需要，它是用来建立一个加密的令牌，用于验证一个表单。当你编写自己的应用程序的时候，请务必设置很难被猜测到密钥。在初始化文件(\__init__.py)中，加上一行 ``` app.config.from_object('config') ``` 来读取和使用配置文件。 ##使用表单 ###创建用户登录表单（例子）：在 Flask-WTF 中，表单是表示成对象，Form 类的子类。一个表单子类简单地把表单的域定义成类的变量。我们将要创建一个登录表单，用于用户认证系统。在我们应用程序中支持的登录机制是标准的用户名/密码类型我们同时在表单上提供一个 ‘remember me’ 的选择框，以至于用户可以选择在他们的网页浏览器上种植 cookie ，当他们再次访问的时候，浏览器能够记住他们的登录。第一个编写的表单看起来会像下面这个样子： ``` #导入 Form 类 from flask_wtf import Form #导入两个我们需要的字段类，TextField 和 BooleanField from wtforms import TextField, BooleanField, PasswordField #Required 是一个验证器，一个函数，它能够作用于一个域，用于对用户提交的数据进行验证。 Required 验证器只是简单地检查相应域提交的数据是否是空，个人感觉之后可以使用自己编写的验证器来进行自定义的验证。 from wtforms.validators import Required class LoginForm(Form): name = TextField('Name', validators=[Required()]) password = PasswordField('password', validators=[Required()]) remember_me = BooleanField('Remember_me', default=False) ``` ###创建表单模板我们同样需要一个包含生成表单的HTML的模板。好消息是我们刚刚创建的 LoginForm类知道如何呈现为HTML表单字段。在这里我们创建一个login.html作为登陆界面。 ``` {% extends "base.html" %} {% block content %}

Sign In

{% endblock %} ``` 可以看到我们继承了base.html，这是上一节的模板知识。在模板中出现了**{{form.hidden_tag()}}，{{form.name(size=8)}}，{{ form.password }}**这一类的变量用来渲染，实际上，模板预期我们传入一个继承自表单对象的form变量，在这个例子中即我们刚刚编写的LoginForm的一个实例。解释一下几个函数的意思： 1. form.hidden_tag() 模板参数将被替换为一个隐藏字段，用来是实现在配置中激活的 CSRF 保护。如果你已经激活了 CSRF，这个字段需要出现在你所有的表单中。 2. {{form.name(size=8)}}要求表单生成一个 8 个字符宽度的 name 字段。 >注:在实验楼中导入Flask-WTF使用的是flask_wtf，亲测不行，改成flask.ext.wtf就好了,另外亲测size=80太长了，改成8就差不多，见截图 ###编写视图函数实际上这十分简单因为我们只需要把一个表单对象传入模板中。 ``` from flask import render_template, flash, redirect from forms import LoginForm from app import app # index view function suppressed for brevity @app.route('/login', methods = ['GET', 'POST']) def login(): form = LoginForm() return render_template('login.html', title = 'Sign In', form = form) ``` 以上代码导入 LoginForm 类，从这个类实例化一个对象，接着把它传入到模板中。这就是我们渲染表单所有要做的。路由装饰器的 methods 参数。参数告诉 Flask 这个视图函数接受 GET 和 POST 请求。如果不带参数的话，视图只接受 GET 请求。暂时还没有编写接收数据的代码，因此此时按提交按钮不会有任何作用。 ##处理表单数据表单最重要的作用就是使用户和后台发生交互，传递数据，只用GET获取表单是不够的，还需要能够对用户填入的数据进行处理。 Flask-WTF 使得工作变得简单的另外一点就是处理提交的数据。这里是我们登录视图函数更新的版本，它验证并且存储表单数据，在我们刚刚写到一半的视图文件中，继续编写当我们POST数据所要做的事情。 ``` @app.route('/login', methods = ['GET', 'POST']) def login(): form = LoginForm() if form.validate_on_submit(): flash('Login requested for Name: ' + form.name.data) flash('passwd: ' + str(form.password.data)) flash('remember_me: ' + str(form.remember_me.data)) return redirect('/index') return render_template('login.html', title = 'Sign In', form = form) ``` 如果 **validate_on_submit** 在表单提交请求中被调用，它将会收集所有的数据，对字段进行验证，如果所有的事情都通过的话，它将会返回 True，表示数据都是合法的，继续进行后续的处理。这就是说明数据是安全的，并且被应用程序给接受了。如果至少一个字段验证失败的话，它将会返回 False，接着表单会重新呈现给用户，这也将给用户一次机会去修改错误。我们将会看到当验证失败后如何显示错误信息。 flash 函数是一种快速的方式下呈现给用户的页面上显示一个消息。在这个例子中，将会使用它来调试，因为目前还不具备用户登录的必备的基础设施，即没有数据库用来存储，相反我们将会用flush来显示提交的数据。即用户输入后我们将会把输入的数据返回在页面上以提示用户数据已经被接收。当然，闪现的消息将不会自动地出现在我们的页面上，我们的模板需要加入展示消息的内容。我们将添加这些消息到我们的基础模板中，在{% block content %}{% endblock %}上方，加上以下代码： ``` {% with messages = get_flashed_messages() %} {% if messages %}

{{ message }}

{% endif %} {% endwith %} ``` 登录视图这里使用的其它新的函数就是 redirect。这个函数告诉网页浏览器引导到一个不同的页面而不是请求的页面。在我们的视图函数中我们用它重定向到前面已经完成的首页上('/index')。要注意地是，闪现消息将会显示即使视图函数是以重定向结束。当字段验证失败的时候， Flask-WTF 会向表单对象中添加描述性的错误信息。这些信息是可以在模板中使用的，因此我们只需要增加一些逻辑来获取它。 ```

Please enter your name:
{{form.name(size=8)}}
{% for error in form.errors.name %} [{{error}}] {% endfor %}

Password:
{{form.password}} {% for error in form.errors.password%} [{{error}}] {% endfor %}

``` 增加了一个循环获取验证 name 字段的信息。通常情况下，任何需要验证的字段都会把错误信息放入**form.errors.field_name**下。在模板文件中，如果form.errors.field_name中含有错误信息，则会在输入框后面显示出来。至此，表单的基本功能基本完成，然而我们还没有东西来储存用户的信息，下一课将学习连接数据库。 ![](https://dn-simplecloud.qbox.me/63bbe59fddacb32e450bbf77fe005fa2?watermark/1/image/aHR0cDovL3N5bC1zdGF0aWMucWluaXVkbi5jb20vaW1nL3dhdGVybWFyay5wbmc=/dissolve/60/gravity/SouthEast/dx/0/dy/10-wm) ![](https://dn-simplecloud.qbox.me/63db7f2c7f85acb32e35690e2f03c0d7?watermark/1/image/aHR0cDovL3N5bC1zdGF0aWMucWluaXVkbi5jb20vaW1nL3dhdGVybWFyay5wbmc=/dissolve/60/gravity/SouthEast/dx/0/dy/10-wm) ![](https://dn-simplecloud.qbox.me/c042331616e7a5c2345aa2a194f1ebfa?watermark/1/image/aHR0cDovL3N5bC1zdGF0aWMucWluaXVkbi5jb20vaW1nL3dhdGVybWFyay5wbmc=/dissolve/60/gravity/SouthEast/dx/0/dy/10-wm)

“Flask 开发轻博客”实验报告