flask笔记：4：web表单

朱雀 2022-08-22 01:28 182阅读 0赞

处理web表单表单需要Flask-WTF

在根目录创建一个配置文件

myblog/config.py

CSRF_ENABLED=True
    SECRET_KEY='you-will-never-guess'

CSRF\_ENABLED配置是为了激活跨站点请求伪造保护

SECRET\_KEY是当CSRF激活后，建立一个加密令牌，用于验证表单

修改app/\_\_init\_\_.py

from flask import Flask
    app=Flask(__name__)
    app.config.from_object('config')
    from app import views
    #读取配置文件

编写第一个表单

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类

定义一个openid文本框(StringField)，名字是openid，需要验证是否为空validators=\[DataRequired()\]

定义一个remember\_me选择框(BooleanField )，名字remember\_me，默认是False

创建表单模板

app/templates/login.html

{% extends "base.html" %}
    {% block content %}
    <h1>Sigh In</h1>
    <form method="post" action="" 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 %}

\{ \{form.hidden\_tag()\}\} 用来实现在配置中的CSRF保护，如果已经激活CSRF，这个字段要出现在所有表单中

\{ \{form.openid(size=80)\}\} form表单的openid字段，输入框大小80

表单视图

修改 app/views.py

from flask import render_template
    from app import app
    from .forms import LoginForm
    
    @app.route('/')
    @app.route('/index')
    def index ():
        user={'nickname':'Bob'}
        posts=[
                {'author':{'nickname':'John'},
                 'body':'Beautiful day in Portland!'},
                {'author':{'nickname':'Susan'},
                 'body':'The Avengers movie was so cool!'}
               ]
        return render_template("index.html",
        title="Home",
        user=user,
        posts=posts)
    
    @app.route('/login',methods=['GET','POST'])
    def login ():
        form = LoginForm()
        return render_template("login.html",
        title = "Sign In",
        form = form)
    #导入LoginForm，视图接受GET和POST请求
    #实例化一个LoginForm

接收表单数据

修改 app/views.py

from flask import render_template,flash,redirect
    from app import app
    from .forms import LoginForm
    
    @app.route('/')
    @app.route('/index')
    def index ():
        user={'nickname':'Bob'}
        posts=[
                {'author':{'nickname':'John'},
                 'body':'Beautiful day in Portland!'},
                {'author':{'nickname':'Susan'},
                 'body':'The Avengers movie was so cool!'}
               ]
        return render_template("index.html",
        title="Home",
        user=user,
        posts=posts)
    
    @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)
    #form.validate_on_submit()判断是否提交
    #提交后用flash( )传递数据
    #redirect( )是url跳转

修改 app/templates/base.html

<html>
        <head>
            {% if title %}
            <title>{
        {title}} - myblog</title>
            {% else %}
            <title>Welcome - myblog</title>
            {% endif %}
        </head>
        <body>
            <div>MyBlog:<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>

修改 app/templates/login.html

{% extends "base.html" %}
    {% block content %}
    <h1>Sigh In</h1>
    <form method="post" action="" 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 %}

显示：

不输入直接提交会显示错误，这个是程序自带的错误提示，就是form.openid.errors

在输入框输入bob，选中remember\_me

![Center][]

![Image 1][]

在index页面显示出提交的内容

![Center 1][]

![Image 1][]

[Center]: /images/20220724/634351e29eea458e87e33fa4eedcf894.png
[Image 1]: 
[Center 1]: /images/20220724/56ffba1bdde34737a7d48376bda0da0a.png