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() }}

{% endblock %}

{% block navbar %}

{% endblock %}


{% block content %}
    
123456
{% endblock %} {% block styles %} { { super() }} {% endblock %} {% block scripts %} { { super() }} {% 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 %}
{# 在合适的位置渲染表单 #} { { 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,大家在写的时候一定要注意

你可能感兴趣的:(flask,form,python,flask表单)