文档章节

Flask学习笔记-在Bootstrap框架下Web表单WTF的使用

ykbj
 ykbj
发布于 2016/02/22 16:02
字数 1142
阅读 1716
收藏 17

表单的处理一般都比较繁琐和枯燥,如果想简单的使用表单就可以使用Flask-WTF插件,同时我们把WTF融合到Bootstrap中这样样式的问题都自动解决了,本篇文章就为您讲解这些内容。


先要注意一点,在使用WTF的时候我们要在程序中设定一下SECRET_KEY,不然会出现"Must provide secret_key to use csrf"错误。

app.config['SECRET_KEY'] = 'xxxx'


Flask-Bootstrap在前面的文章中已经讲过了,不再重复。


后台WTF编码

先看实例:

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

class BookForm(Form):
    name = StringField('姓名', validators=[DataRequired()])
    phone = StringField('电话', validators=[DataRequired()])
    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])
    submit = SubmitField("预定")
    

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        name = booker.name.data
        phone = booker.phone.data
        photoset = booker.photoset.data
    return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

BookForm是我们自己定义的一个Form对象,里面包含了两个文本框和一个下拉选择框,很简单。

class BookForm(Form):
    name = StringField('姓名', validators=[DataRequired()])
    phone = StringField('电话', validators=[DataRequired()])
    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])
    submit = SubmitField("预定")

validators是输入检查控制器,有很多种,这里使用的是DataRequired用于必填项的检查,还有字符长度以及输入类型等等好多控制器,需要说明一下在SelectField中不要使用这些不然会报错,这个地方我没有深入研究,暂时就不使用了,哈。

book_photo()是/book/的处理函数,我们初始化了文本框的默认为空,还初始化了BookForm对象,render_template函数指定了页面和form对象。

if booker.validate_on_submit():
        name = booker.name.data
        phone = booker.phone.data
        photoset = booker.photoset.data

这段处理是在表单提交后的接收参数值的处理逻辑,同时还是用

return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

返回了name,phone和photoset值到book_photo.html页面。

下面我们就来看下页面的代码


表单页面

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
    <div class="page-header">
        数据:
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>
    {{ wtf.quick_form(form) }}
{% endblock %}

很简单吧,因为我们使用了bootstrap/wtf.html的基模板,很好的跟bootstrap结合起来。

重点是:

{{ wtf.quick_form(form) }}

我们利用wtf.quick_form函数自动生成了表单,非常cool对不对。

    <div class="page-header">
        数据:
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>

这段是表单提交后显示提交数据的处理,所以我们在一个页面上就搞定了表单的显示和提交后的数据显示。


显示结果

还挺不错的是不是。


高级-重定向会话

我们提交表单后最后一个请求为POST,这样我们在刷新页面的时候会出现重新提交表单,通过重定向会话就可以解决这个问题(这个技巧称“Post/重定向/Get模式”),还有就是可以通过重定向会话实现自定义的跳转等更灵活的控制。

重定向会话我们要利用session机制实现,代码如下:

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

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        session['name'] = booker.name.data
        session['phone'] = booker.phone.data
        session['photoset'] = booker.photoset.data
        return redirect(url_for('book_photo'))
    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))


高级-Flash消息

如果需要页面通知用户消息的话,可以使用Flash消息,也很简单,代码如下:

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

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        old_name = session.get('name')
        if old_name is not None and old_name != booker.name.data:
            flash('您的提交发生变化')
        session['name'] = booker.name.data
        session['phone'] = booker.phone.data
        session['photoset'] = booker.photoset.data
        return redirect(url_for('book_photo'))
    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))


判断字段值的变化,设置提示信息

        if old_name is not None and old_name != booker.name.data:
            flash('您的提交发生变化')

页面上也需要处理:

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
    <div class="page-header">
        数据:
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ message }}
    {% endfor %}
    </div>
    {{ wtf.quick_form(form) }}
{% endblock %}

通过for/endfor进行控制,也是使用的bootstrap的样式

{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    {{ message }}
{% endfor %}


效果如下:



© 著作权归作者所有

共有 人打赏支持
ykbj
粉丝 21
博文 36
码字总数 16995
作品 0
昌平
CTO(技术副总裁)
私信 提问
Flask入门 表单Flask-wtf form原生与Bootstrap渲染(七)

(1) 原生的表单 模板页面,form表单 在manage.py中 在manage.py中将路由函数合并 (2) Flask-wtf表单 说明 : 是一个用于表单处理,校验并提供csrf验证的功能的扩展库 安装 : 作用: Flask-wtf能保...

善良小郎君
2018/06/02
0
0
Flask插件与资源整理

flask-script 支持命令行选相 使用示例 flask-bootstrap 集成Bootstrap flask-moment 本地化日期和时间 flask-wtf网络表单类防止跨站伪请求CSRF flask-sqlalchemy数据库框架ORM或ODM转换 数据...

晴难自控
2017/11/19
0
0
Flask 教程 第十一章:美化

本文转载自:https://www.jianshu.com/p/2c3305d75bf4 这是Flask Mega-Tutorial系列的第十一部分,我将告诉你如何用基于Bootstrap用户界面框架的新模板替换基础的HTML模板。 你把玩Microblog...

天降攻城狮
02/22
0
0
Flask学习笔记-使用PyCharm

不得不PyCharm确实是开发Python优秀IDE,用于开发Flask更是没说的。 建议使用Pro版本,注册的问题推荐花点小钱:http://dwz.cn/2KpNib (声明:该店与本人无关) 注册成功后就可以放心使用了...

ykbj
2016/02/19
1K
8
python学习-flask-模版/表单

2.1初始化 所有 Flask 程序都必须创建一个程序实例。Web 服务器使用一种名为 Web 服务器网关接口 (Web Server Gateway Interface,WSGI)的协议,把接收自客户端的所有请求都转交给这个对象处...

时间之友
2018/01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
47分钟前
0
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
17
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部