(1)安装flask-bootstrap
pip install flask-bootstrap
(2)flask-bootstrap简单使用
创建bootstrap对象并初始化,构造简单的路由跟视图函数
from flask import Flask,render_template
from flask_bootstrap import Bootstrap
from flask_script import Manager
flask = Flask(__name__)
manager = Manager(flask)
bootstrap = Bootstrap(flask)
@flask.route('/')
def index():
return render_template('base.html')
if __name__ == '__main__':
manager.run()
通过bootstrap构造一个简单的html页面
包括加载静态资源文件
{% extends 'bootstrap/base.html' %}
{% block title %}
bootstrap标题
{% endblock %}
{% block head %}
{
{ super() }}
{% endblock %}
{% block navbar %}
123456
{% endblock %}
{% block styles %}
{
{ super() }}
{% endblock %}
{% block scripts %}
{
{ super() }}
{% endblock %}
{% endblock %}
{% block content %}
bootstrap基础模板中的block有一下几种:doc(控制整个HTML文档);html(整个html标签);head(整个head标签);metas(一组meta标签);styles(引入css文件,一组link标签);body(整个body标签);navbar(设置导航条);content(页面的内容);scripts(引入js文件,一组script标签)
这里需要用到哪些block,就在block中写入对应的名称
(1)安装flask-wtf
pip install flask-wtf
(2)创建一个简单的表单,并使用bootstrap渲染表单
from flask_wtf import FlaskForm
from wtforms import StringField,DateField,SubmitField,PasswordField,HiddenField,RadioField,BooleanField,SelectField,TextAreaField,IntegerField
from wtforms.validators import Length,ValidationError,EqualTo,DataRequired,NumberRange,Email,IPAddress,URL,Regexp
class RegisterForm(FlaskForm):
# 字符串
name = StringField('用户名',validators=[Length(1,6,message='用户名必须是1-6个字符')])
# 隐藏字段
hidden = HiddenField('隐藏字段')
# 单选框
gender = RadioField('性别',choices=[('1','男'),('0','女')],validators=[DataRequired()])
# 整型
age = IntegerField('年龄',validators=[NumberRange(18,100,message='年龄必须合法18-100')])
# 布尔类型
boolean = BooleanField('是否单身',false_values='False')
# 复选框
education = SelectField('学历',choices=[('1','初中'),('2','高中'),('3','专科'),('4','本科'),('5','研究生')])
# 文本类型
detail = TextAreaField('个性签名',validators=[DataRequired()])
# 日期类型
birth = DateField('出生日期',validators=[DataRequired()])
# 密文类型
password = PasswordField('密码')
passwordConfirm = PasswordField('确认密码',validators=[EqualTo('password',message='密码确认有误')])
# 提交按钮
submit = SubmitField('注册')
这里用到了flask表单中的大部分字段,包括flask中一些常用的验证器
(2)配置路由,构建视图函数
@flask.route('/register/',methods=['GET','POST'])
def register():
# 创建表单对象
form = RegisterForm()
# 判断是否是有效的提交
if form.validate_on_submit():
session['name'] = form.name.data
flash('注册成功')
return redirect(url_for('login'))
name = session.get('name')
return render_template('form2.html',form=form,name=name)
这里需要的注意的地方是methods需要指定,不然会报方法不被允许的异常
(3)使用bootstrap快速渲染表单
{% extends 'bootstrap/base.html' %}
{# 导入快速渲染表单的宏 #}
{% from 'bootstrap/wtf.html' import quick_form %}
{% block title %}
bootstrap渲染表单类
{% endblock %}
{% block content %}
{# 在合适的位置渲染表单 #}
{
{ quick_form(form) }}
{% endblock %}
使用bootstrap快速渲染表单,需要先导入快速渲染表单的宏(quick_form),然后在调用宏。
(4)各种验证器的使用(validators)
在这里简单介绍一下各种验证器的作用:Length(规定字符长度);DataRequired(确保字段有值);Email(判断是否是邮箱格式);
IPAddress(判断是否是IP地址);NumberRange(指定数值的范围);URL(判断是否是url格式);EqualTo(验证两个字段是否一致);
Regexp(使用正则表达式进行校验)
from wtforms.validators import Length,ValidationError,EqualTo,DataRequired,NumberRange,Email,IPAddress,URL,Regexp
class VerifierForm(FlaskForm):
email = StringField('邮箱验证',validators=[Email(message='邮箱格式不正确'),DataRequired()])
ip = StringField('IP地址验证',validators=[IPAddress(message='IP地址格式不正确'),DataRequired()])
url = StringField('url验证',validators=[URL(message='url格式不正确')])
regexp = StringField('正则验证',validators=[Regexp('[0-3]+',message='匹配失败')])
submit = SubmitField('提交')
@flask.route('/verifier/',methods=['GET','POST'])
def verifier():
form = VerifierForm()
if form.validate_on_submit():
return redirect(url_for('index'))
return render_template('verifier.html',form=form)
这里可以通过指定message来自定义如果不符合验证器的要求之后会提示的信息
在html页面中渲染这个form
{% extends 'bootstrap/base.html' %}
{% from 'bootstrap/wtf.html' import quick_form %}
{% block content %}
{
{ quick_form(form) }}
{% endblock %}
flask表单字段的类型与验证器的使用是很基础的一部分,另外bootstrap是一个用来快速生成html页面的一个工具,用起来也特别方便,只不过在加载静态资源文件时可能会出现些bug,大家在写的时候一定要注意