4.1 web表单

——————————————————————前言————————————————————————————

本节我们讲解flask-wtf扩展， 它可以把处理web表单的过程变成一种愉悦的体验。

————————————————————————————————————————————————————

一. 设置flask-wtf

app.config['SECRET_KEY'] = 'hard to guess string'

flask-wtf扩展能保护所有表单免受跨站请求伪造的攻击， 需要程序设置一个密钥， 保存在app.config字典里面。

二. 安装扩展

（*注意先激活虚拟环境，然后再安装扩展）

三. 修改hello.py

from flask_wtf import FlaskForm

from wtforms import StringField, SubmitFIeld

from wtforms.validators import DataRequired

from flask import render_template, Flask, session, redirect, url_for

#设置flask-wtf

app = Flask(__name__)

app.config['SECRET_KEY'] = 'hard to guess string'

#表单类

class NameForm(FlaskForm):

    name = StringField('What is your name?', validators=[DataRequired()])  #文本框字段
    submit = SubmitField('submit')  #提交按钮字段

#视图函数

@app.route('/', methods=['GET', 'POST'])

def index():

    name = None

    form = NameForm()  #get请求生成空表单， post请求生成含有数据的表单

    if form.validate_on_submit():  #只有是post请求并且字段验证函数通过才为True

        session['name'] = form.name.data  #把文本框中的输入保存在会话字典中

        return redirect(url_for('index'))  #重定向， 作用是使浏览器向index重新发送get请求

    return render_template('index.html', name=session.get('name'), form=form)  #返回响应

四.修改index.html

{% extends 'base.html' %}  #继承base模板， 用现成的导航条， 网页名称等

{% import 'bootstrap/wtf.html' as wtf %}  #导入wtf模板

{% block title %}Flasky{% endblock %}  #修改网页名称

{% block page_content %}  

<div class='page-header'>

<h1>Hello, {% if name %} {{ name }} {% else %}Stranger{% endif %}</h1>  #if逻辑结构

</div>

{{ wtf.quick_form(form) }}  #使用wtf模板中的quick_form函数渲染表单

{% endblock %}

#我们除了继承base.html模板外， 还导入了wtf.html模板， 里面有quick_form函数用来渲染我们的表单

五. 效果演示

输入地址：

在文本框中输入Dave然后点击提交按钮：

之后我们回看终端， 发现最后三个命令分别是GET-POST-GET， 是因为我们在视图函数中使用了重定向。