Flask03-Form

## Web 表单 配置

    为了能够处理 web 表单,我们将使用 Flask-WTF ,该扩展封装了 WTForms 并且恰当地集成进 Flask 中。

    许多 Flask 扩展需要大量的配置,因此我们将要在 microblog 文件夹的根目录下创建一个配置文件以至于容易被编辑。这就是我们将要开始的(文件 config.py):

    $ config.py
    > CSRF_ENABLED = True
    > SECRET_KEY = 'you-will-never-guess'

    // 告诉 Flask 去读取配置文件 app/__init__.py

    > from flask import Flask
    >
    > app = Flask(__name__)
    > app.config.from_object('config')
    >
    > from app import views

## 用户登录表单

    在 Flask-WTF 中,表单是表示成对象,Form 类的子类。一个表单子类简单地把表单的域定义成类的变量。

    我们将要创建一个登录表单,用户用于认证系统。在我们应用程序中支持的登录机制不是标准的用户名/密码类型,我们将使用 OpenID。OpenIDs 的好处就是认证是由 OpenID 的提供者完成的,因此我们不需要验证密码,这会让我们的网站对用户而言更加安全。

    OpenID 登录仅仅需要一个字符串,被称为 OpenID。我们将在表单上提供一个 ‘remember me’ 的选择框,以至于用户可以选择在他们的网页浏览器上种植 cookie ,当他们再次访问的时候,浏览器能够记住他们的登录。

    $ vim 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)

## 表单模板

    $ vim app/templates/login.html
    > <!-- extend from base layout -->
    > {% extends "base.html" %}
    >
    > {% block content %}
    > <h1>Sign In</h1>
    > <form action="" method="post" name="login">
    >     {{form.hidden_tag()}}
    >     <p>
    >         Please enter your OpenID:<br>
    >         {{form.openid(size=80)}}<br>
    >     </p>
    >     <p>{{form.remember_me}} Remember Me</p>
    >     <p><input type="submit" value="Sign In"></p>
    > </form>
    > {% endblock %}

## 表单视图

    $ vim app/views.py

    > from flask import render_template, flash, redirect
    > from app import app
    > from .forms import LoginForm
    >
    > # 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)


## 接收表单数据

    // 验证表达数据是否正确(form.validate_on_submit),调用flash()显示消息
    $ vim app/views.py
    > @app.route('/login', methods = ['GET', 'POST'])
    > def login():
    >     form = LoginForm()
    >     if form.validate_on_submit():
    >         flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
    >         return redirect('/index')
    >     return render_template('login.html',
    >         title = 'Sign In',
    >         form = form)

    // flash显示消息
    $ vim app/templates/base.html
    <html>
      <head>
        {% if title %}
        <title>{{title}} - microblog</title>
        {% else %}
        <title>microblog</title>
        {% endif %}
      </head>
      <body>
        <div>Microblog: <a href="/index">Home</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>

## 加强字段验证

    $ vim app/templates/login.html
    > <!-- extend base layout -->
    > {% extends "base.html" %}
    >
    > {% block content %}
    >   <h1>Sign In</h1>
    >   <form action="" method="post" name="login">
    >       {{ form.hidden_tag() }}
    >       <p>
    >           Please enter your OpenID:<br>
    >           {{ form.openid(size=80) }}<br>
    >           {% for error in form.openid.errors %}
    >             <span style="color: red;">[{{ error }}]</span>
    >           {% endfor %}<br>
    >       </p>
    >       <p>{{ form.remember_me }} Remember Me</p>
    >       <p><input type="submit" value="Sign In"></p>
    >   </form>
    > {% endblock %}


## 处理 OpenIDs

    $ vim config.py
    > 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/<username>' },
    >     { 'name': 'Flickr', 'url': 'http://www.flickr.com/<username>' },
    >     { 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]

    $ vim app/view.py
    > return render_template('login.html',
    >     title = 'Sign In',
    >     form = form,
    >     providers = app.config['OPENID_PROVIDERS'])

    $ vim app/templates/login.html)
    > <!-- extend base layout -->
    > {% extends "base.html" %}
    >
    > {% block content %}
    > <script type="text/javascript">
    > function set_openid(openid, pr)
    > {
    >     u = openid.search('<username>')
    >     if (u != -1) {
    >         // openid requires username
    >         user = prompt('Enter your ' + pr + ' username:')
    >         openid = openid.substr(0, u) + user
    >     }
    >     form = document.forms['login'];
    >     form.elements['openid'].value = openid
    > }
    > </script>
    > <h1>Sign In</h1>
    > <form action="" method="post" name="login">
    >     {{ form.hidden_tag() }}
    >     <p>
    >         Please enter your OpenID, or select one of the providers below:<br>
    >         {{ form.openid(size=80) }}
    >         {% for error in form.openid.errors %}
    >           <span style="color: red;">[{{error}}]</span>
    >         {% endfor %}<br>
    >         |{% for pr in providers %}
    >           <a href="javascript:set_openid('{{ pr.url }}', '{{ pr.name }}');">{{ pr.name }}</a> |
    >         {% endfor %}
    >     </p>
    >     <p>{{ form.remember_me }} Remember Me</p>
    >     <p><input type="submit" value="Sign In"></p>
    > </form>
    > {% endblock %}
原文地址:https://www.cnblogs.com/mlsec/p/8595277.html