最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 16:20:21
文档

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

Flask学习笔记-在Bootstrap框架下Web表单WTF的使用_html/css_WEB-ITnose:表单的处理一般都比较繁琐和枯燥,如果想简单的使用表单就可以使用Flask-WTF插件,同时我们把WTF融合到Bootstrap中这样样式的问题都自动解决了,本篇文章就为您讲解这些内容。 先要注意一点,在使用WTF的时候我们要在程序中设定一下SECRET_KEY,不
推荐度:
导读Flask学习笔记-在Bootstrap框架下Web表单WTF的使用_html/css_WEB-ITnose:表单的处理一般都比较繁琐和枯燥,如果想简单的使用表单就可以使用Flask-WTF插件,同时我们把WTF融合到Bootstrap中这样样式的问题都自动解决了,本篇文章就为您讲解这些内容。 先要注意一点,在使用WTF的时候我们要在程序中设定一下SECRET_KEY,不

表单的处理一般都比较繁琐和枯燥,如果想简单的使用表单就可以使用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 Formfrom wtforms import StringField, SubmitField, SelectFieldfrom wtforms.validators import DataRequiredclass 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 %} 数据: 

{% if name %} {{ name }} {% endif %}
{% if phone %} {{ phone }} {% endif %}
{% if photoset %} {{ photoset }} {% endif %}

{{ wtf.quick_form(form) }}{% endblock %}

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

重点是:

{{ wtf.quick_form(form) }}

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

 数据: 

{% if name %} {{ name }} {% endif %}
{% if phone %} {{ phone }} {% endif %}
{% if photoset %} {{ photoset }} {% endif %}

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

显示结果

还挺不错的是不是。

高级-重定向会话

我们提交表单后最后一个请求为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 %} 数据: 

{% if name %} {{ name }} {% endif %}
{% if phone %} {{ phone }} {% endif %}
{% if photoset %} {{ photoset }} {% endif %}

{% for message in get_flashed_messages() %} {{ message }} {% endfor %} {{ wtf.quick_form(form) }}{% endblock %}

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

{% for message in get_flashed_messages() %}  {{ message }}{% endfor %}

效果如下:

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

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

Flask学习笔记-在Bootstrap框架下Web表单WTF的使用_html/css_WEB-ITnose:表单的处理一般都比较繁琐和枯燥,如果想简单的使用表单就可以使用Flask-WTF插件,同时我们把WTF融合到Bootstrap中这样样式的问题都自动解决了,本篇文章就为您讲解这些内容。 先要注意一点,在使用WTF的时候我们要在程序中设定一下SECRET_KEY,不
推荐度:
标签: html css 框架
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top