Flask开发环境配置
Flask快速入门
Flask实践Step by Step — \’Hello World\’
Flask实践Step by Step — 模板
Flask实践Step by Step — Web表单

Flask Web Forms

上一节我们定义了一个简单的模板，并看到了实际运行的效果，接下来我们来看一下Web表单是如何
工作的，Web表单是Web应用程序的基础控件，使用表单可以使用用户写博客，进行登录等

配置

为了使用表单，我们需要使用Flask的一个扩展插件 Flask-WTF 需要先安装 pip install flask-wtf ,
许多Flask扩展需要很多的配置，我需要一个配置文件来进行管理 config.py

  WTF_CSRF_ENABLED = True
  SECRET_KEY = \'you-will-never-guess\'

配置文件中的内容非常简单，需要两项设置即可，WTF_CSRF_ENABLED设置会激活跨站访问保护
这个设置在这个版本中Flask-WTF是默认打开的，为了更安全我们这里还是显示的设置为 True
SECRECT_KEY的设置只有当WTF_CSRF_ENABLED为true时才会需要，为表单验证创建一个密码
token，这个key值尽量设置的复杂一些
接下来就需要Flask读取相关的配置，并且使用这些配置，在Flask的应用程序创建之后(file app/__init__.py)

  from flask import Flask

  app = Flask(__name__)
  app.config.from_object(\'config\')

  from app import views

用户登录表单

Flask-WTF的表单是一个集成基类Form的一个类，现在我们需要创建一个登录的表单，需要用到身份认证系统
登录机制不是标准的 用户名/密码 模式，我们在这里引入了 OpendID，OpenID本身已经提供了
很好的验证，我们就不在需要验证密码了，这样可以使网站更安全,需要安装OpenID pip install flask-openid
使用OpenID登录只需要一个字符串，我们还提供了一个 \’remember me\’ 选择框，用户可以选择是否需要浏览器在cookie中记住
用户的选择
写第一个表单 (file app/forms.py)

  from flask.ext.wtf import Form
  from wtforms import StringField,BooleanField
  from wtforms.validators import DataRequired

  class LoginForm(Form):
      openid = StringField(\'openid\',validators=[DataRequired()])
      remember_me = BooleanField(\'remember_me\',default=False)

很简单的一个类，继承Form两个字段，StringField和BooleanField,DataRequired是一个验证器
一个方法和一个字段绑定，这个DataRequired验证器只是简单的验证提交的输入内容，这Flask-WTF中还有很多
验证器，后续会继续介绍

表单模板

我们需要一个模板来生成HTML的表单，我们需要创建一个新的模板 (file app/templates/login.html)

  {% extends \"base.html\" %}

  {% block content %}
    
Sign in
    

      {{form.hidden_tag()}}
      

        Please enter your OpenID:

        {{ form.openid(size=80) }}
      
      

        {{ form.remember_me }} Remember Me
      
      

        
      
    
  {% endblock %}

这个模板中同样是继承base.html,这个模板和普通的HTML页面的表单还是有一些区别的，需要
视图中对应的方法来血染这个模板，form.hidden_tag()会被HTML中的隐藏的域来取代，这个参数
需要把CSRF设置为Enabled状态

表单视图

我们需要一个视图方法来渲染这个模板(file app/views.py)

  from flask import render_template,flash,redirect
  from app import app
  from .forms import LoginForm

  #index view function...

  @app.route(\'/login\',methods=[\'GET\',\'POST\'])
  def login():
      form = LoginForm()
      return render_template(\'login.html\',
                              title=\"Sign in\",
                              form=form)

需要引入 LoginForm这类，然后实例化，将这个实例化对象作为参数传入到模板中,我们还引入了
flash和redirect,可以暂时忽略这两个引用，以后我们会用到，在装饰器中我们加入了 methods
作为参数，告诉Flask我们的这个方法接收 GET和POST请求，保存运行，打开浏览器 访问 http://127.0.0.1:5000/login
看一下实际的效果，暂时我们还没有处理接收数据的处理，所以现在点击提交按钮会没有任何反馈

接收数据

Flask-WTF能够很容易处理从客户端发来的数据，我们需要修改一下 login的方法(file app/views.py)

  @app.route(\'/login\',methods=[\'GET\',\'POST\'])
  def login():
      form = LoginForm()
      if form.validate_on_submit():
          flash(\'Login requested for OpenID=\"\"%s\",remember_me=%s\'%
                  (form.openid.data,str(form.remember_me.data)))
          return redirect(\'/index\')
      return render_template(\'login.html\',
                              title=\"Sign in\",
                              form=form)

方法 validate_on_submit会处理所有的表单的处理工作，表单展示给用户时会调用这个方法此时会返回 False
当提交请求时，这个方法会接收所有的数据，验证数据的合法性，如果验证全部正确，这个方法会返回True，只要有一个
参数验证不通过，这个方法就会返回 False，稍后我们会展示如何给用户展示错误信息，当 validate_on_submit返回True
时，方法 flash会展示一个快速的信息，在调到下一个页面之前，这个flash的信息不回显示在页面中，我们需要修改模板信息
来显示这个信息(file app/templates/base.html)

  
  
    
      
      {% if title %}
      
      {% else %}
      
      {% endif %}
    
    
      

        Microblog : Home
      
      

      {% with messages = get_flashed_messages()%}
        {% if messages %}
          

            {% for msg in messages %}
              
{{ msg }}
            {% endfor %}
          
        {% endif %}
      {% endwith %}
      {% block content %}{% endblock %}
    
  

方法get_flashed_messages会接收flash方法发送来的消息，并展示出来，在视图方法中我们还使用另一个
方法 redirect,这个方法会重定向到另一网页地址

改进数据的验证

当用户的输入的信息有误时，希望能够提供给用户友好的错误的信息提示，我们修改一下login的模板(file app/templates/login.html)

  {% extends \"base.html\" %}

  {% block content %}
    
Sign in
    

      {{form.hidden_tag()}}
      

        Please enter your OpenID:

        {{ form.openid(size=80) }}
        {% for error in form.openid.errors %}
          [{{ error }}]
        {% endfor %}
      
      

        {{ form.remember_me }} Remember Me
      
      

        
      
    
  {% endblock %}

添加了错误的提示信息

处理OpenIDs

为了是用户更容易的登录网站，我们添加一些openid的连接，儿不需要用户手动的输入OpenID
先定义一些OpenID的提供者，定义在config.py中

  WTF_CSRF_ENABLED = True
  SECRET_KEY = \'you-will-never-guess\'

  OPENID_PROVIDERS = [
      {\'name\': \'Google\', \'url\': \'https://www.google.com/accounts/o8/id\'},
      {\'name\': \'Yahoo\', \'url\': \'https://me.yahoo.com\'},
      {\'name\': \'AOL\', \'url\': \'http://openid.aol.com/\'},
      {\'name\': \'Flickr\', \'url\': \'http://www.flickr.com/\'},
      {\'name\': \'MyOpenID\', \'url\': \'https://www.myopenid.com\'}]

然后在视图方法中使用

  @app.route(\'/login\',methods=[\'GET\',\'POST\'])
  def login():
      form = LoginForm()
      if form.validate_on_submit():
          flash(\'Login requested for OpenID=\"\"%s\",remember_me=%s\'%
                  (form.openid.data,str(form.remember_me.data)))
          return redirect(\'/index\')
      return render_template(\'login.html\',
                              title=\"Sign in\",
                              form=form,
                              providers=app.config[\'OPENID_PROVIDERS\'])

还需要修改对应的模板视图(file app/templates/login.html)

  {% extends \"base.html\" %}

  {% block content %}

  

    
Sign in
    

      {{form.hidden_tag()}}
      

        Please enter your OpenID:

        {{ form.openid(size=80) }}
        {% for error in form.openid.errors %}
          [{{ error }}]
        {% endfor %}

        | {% for pr in providers %}
            {{ pr.name }} |
        {% endfor %}
      
      

        {{ form.remember_me }} Remember Me
      
      

        
      
    
  {% endblock %}

运行截图

写在最后

我们队登录的表单做了很多的改进，但是我们还没有真正的登录到系统中，真正的登录我们需要后台的数据库的支持