进阶部分-Web表单

从这篇开始,主要开始介绍一些难度较大的内容,如web表单,后端数据库等

Web表单

Flask-WTF是flask用来处理表单的一类扩展。具体使用方法如下
hello.py新增代码

from flask.ext.wtf import Form 
from wtforms import StringField, SubmitField
from wtforms.validators import Required
#导入wtf模块
class NameFomr(Form): #创建NameForm表单
    name = StringField('who are you', validators=[Required()])
    #validators表单验证
    submit = SubmitField('Submit')
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string' #跨站请求伪造保护

HTML中显示表单

手动输入

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name() }}
    {{ form.submit()}}   
</form>

通常还可以加些css样式
偷懒的做法

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

最后的index.html

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block page_content %}
<div class='page_content'>
    <h1>Hello,
        {% if name %} {{ name }}
        {% else %}Stranger
        {% endif %}!
    </h1>
</div>
{{ wtf.quick_form(form) }}
{% endblock %}

视图函数中处理表单

为了保证index()能够接受表单的数据,需要更新hello.py

@app.route('/',method=['GET','POST'])
def index():
    name = None
    form = NameFome()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('index.html',form=form,name=name)

methods参数告知Flask在URL映射中这个视图注册为GET和POST请求的处理程序。默认为GET。


基本上面步骤就完成了WEB表单提交。下面的内容我在看书的时候也不太了解,但是先记录下来。


用户输入名字后提交表单,然后点击浏览器的刷新按钮,会看到一个莫名其妙的警告,要求在再次提交表单前进行确认。
之所以出现这种情况,是因为刷新页面时候,浏览器会重新发送会之前已经发送过的最后一个请求。如果这个请求时一个包含表单的数据POST请求,刷新页面再次提交表单。

这是书本的原话,然而我刷新的时候未出现他说的问题。但是他提到了POST/重定向/GET模式这个技巧。即使用重定向作为POST请求的响应。重定向响应内容是URL,而不是包含HTML代码的字符串。
工作流程:浏览器收到该响应,会向重定向的URL发起GET请求,显示页面的内容。
问题:程序处理POST请求时,使用form.name.data获取用户输入的信息,然而这个请求结束会导致数据丢失。
我们通过让程序把数据存储在用户会话中,让请求之间“记住”数据。用户会话是一种是有储存,存在于每个连接到服务器的客户端中,是一种请求上下文的变量,名为session,想标准的python词典一样操作。
所以更新代码如下:

@app.route('/',methods=['GET','POST'])
def index():
    name = None
    form = NameFome()
    if form.validate_on_submit():
        session['name'] = form.name.data #用session['name']代替之前的name
        return redirect(url_for('index'))#重新生成HTTP重定向响应
    return render_template('index.html',form=form,name=session.get('name')) #在session读取数据,即用get()获取字典中的键对应的值
上一篇:URL中#(井号)的作用(转)


下一篇:WPF的5种绑定模式(mode)