flask--flask-bootstrap与表单

1.flask-bootstrap

(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() }}
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='favicon.ico') }}" />
{% endblock %}

{% block navbar %}
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endblock %}


{% block content %}
    <div class="test">123456</div>
    <img src="{{ url_for('static',filename='image/gift.jpg') }}">
{% endblock %}


{% block styles %}
{{ super() }}
    <link href="{{ url_for('static',filename='css/common.css') }}" type="text/css" rel="stylesheet">
{% endblock %}

{% block scripts %}
{{ super() }}
    <script type="text/javascript" src="{{ url_for('static',filename='js/common.js') }}"></script>
{% endblock %}

bootstrap基础模板中的block有一下几种：doc(控制整个HTML文档)；html(整个html标签)；head(整个head标签)；metas(一组meta标签)；styles(引入css文件，一组link标签)；body(整个body标签)；navbar(设置导航条)；content(页面的内容)；scripts(引入js文件，一组script标签)

这里需要用到哪些block，就在block中写入对应的名称

2.flask表单

(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 %}
<div class="container">
{# 在合适的位置渲染表单 #}
{{ quick_form(form) }}
</div>
{% 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，大家在写的时候一定要注意