pip install flask_bootstrap
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
初始化Flask-Bootstrap 之后,就可以在程序中使用一个包含所有Bootstrap 文件的基模板。这个模板利用Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入Bootstrap 的元素。
{%extends "bootstrap/base.html"%}
{%block title %}Flask{% endblock %}
这两个块分别表示页面中的导航条和主体内容。在这个模板中,navbar 块使用Bootstrap 组件定义了一个简单的导航条。content 块中有个
{% block scripts %}
{{ super() }}
{% endblock %}
首先了解一下bootstrap提供了多少block,bootstrap中的base.html如下:
{% block doc -%} ###doc:整个HTML文档(开始)
###html_attribs:标签的属性
{%- block html %} ###html:标签中的内容(开始)
{%- block head %} ###head:标签中的内容(开始)
{% block title %}{{title|default}}{% endblock title %} ###title:标签中的内容
{%- block metas %} ###metas:一组标签
{%- endblock metas %}
{%- block styles %} ##styles:层叠样式表定义
{%- endblock styles %}
{%- endblock head %} ###head:标签中的内容(结束)
###body_attribs: 标签的属性
{% block body -%} ###body:标签中的内容(开始)
{% block navbar %} ###navbar:用户定义的导航条
{%- endblock navbar %}
{% block content -%} ###content:用户定义的页面内容
{%- endblock content %}
{% block scripts %} ###scripts:文档底部的JavaScript声明
{%- endblock scripts %}
{%- endblock body %} ###body:标签中的内容(结束)
{%- endblock html %} ###html:标签中的内容(结束)
{% endblock doc -%} ###doc:整个HTML文档(结束)
另外,flask为了防范csfr(cross-site request forgery)攻击,
默认在使用flask-wtf之前要求app一定要设置过secret_key。
最简单地可以通过app.config[‘SECRET_KEY’] = 'xxxx’来配置。
PasswordField 密码字段,自动将输入转化为小黑点
DateField 文本字段,格式要求为datetime.date一样
IntergerField 文本字段,格式要求是整数
DecimalField 文本字段,格式要求和decimal.Decimal一样
FloatField 文本字段,值是浮点数
BooleanField 复选框,值为True或者False
RadioField 一组单选框
SelectField 下拉列表,需要注意一下的是choices参数确定了下拉选项,
但是和HTML中的 标签一样,其是一个tuple组成的列表,
可以认为每个tuple的第一项是选项的真正的值,而第二项是alias。
MultipleSelectField 可选多个值的下拉列表
Validator是验证函数:
Validator是验证函数,把一个字段绑定某个验证函数之后,flask会在接收表单中的数据之前对数据做一个验证,
如果验证成功才会接收数据。验证函数Validator如下,具体的validator可能需要的参数不太一样,这里只给出
一些常用的,更多详细的用法可以参见wtforms/validators.py文件的源码,参看每一个validator类需要哪些参数:
*基本上每一个validator都有message参数,指出当输入数据不符合validator要求时显示什么信息。
Email 验证电子邮件地址的合法性,要求正则模式是.+@([.@][^@]+)$
EqualTo 比较两个字段的值,通常用于输入两次密码等场景,可写参数fieldname,不过注意其是一个字符串变量,指向同表单中的另一个字段的字段名
IPAddress 验证IPv4地址,参数默认ipv4=True,ipv6=False。如果想要验证ipv6可以设置这两个参数反过来。
Length 验证输入的字符串的长度,可以有min,max两个参数指出要设置的长度下限和上限,注意参数类型是字符串,不是INT!!
NumberRange 验证输入数字是否在范围内,可以有min和max两个参数指出数字上限下限,注意参数类型是字符串,不是INT!!然后在这个validator的message参数里可以设置%(min)s和%(max)s两个格式化部分,来告诉前端这个范围到底是多少。其他validator也有这种类似的小技巧,可以参看源码。
Optional 无输入值时跳过同字段的其他验证函数
Required 必填字段
Regexp 用正则表达式验证值,参数regex=‘正则模式’
URL 验证URL,要求正则模式是[a-z]+://(?P
AnyOf 确保值在可选值列表中。参数是values(一个可选值的列表)。特别提下,和SelectField进行配合使用时,不知道为什么SelectField的choices中项的值不能是数字。。否则AnyOf的values参数中即使有相关数字也无法识别出当前选项是合法选项。我怀疑NoneOf可能也是一样的套路。
NoneOf 确保值不在可选值列表中
flask-bootstrap(添加css, js样式)---提供了base.html, wtf.html
flask-wtf(表单处理)-
表单类型(StringField, PasswordField, SubmitField, FileField)
验证表单(DataRequired, Length, Email, Regexp, EqualTo)
eg:
wtflogin.htm:
{% extends 'bootstrap/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block content %}
{% endblock %}
run.py:
import random
from flask import Flask, redirect, render_template, flash
from forms import LoginForm
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
app.config['SECRET_KEY'] = random._urandom(24)
@app.route('/success/')
def success():
return "success"
@app.route('/login/', methods=('GET', 'POST'))
def submit():
# 实例化表单对象;
form = LoginForm()
# 如果是post方法并且表单验证通过的话, 返回True;
if form.validate_on_submit():
return redirect('/success/')
return render_template('wtflogin.html', form=form)
app.run(port=9001)
forms
from flask_wtf import FlaskForm
from flask_wtf.file import FileRequired, FileAllowed
from wtforms import StringField, PasswordField, SubmitField, FileField
from wtforms.validators import DataRequired, Length
class LoginForm(FlaskForm):
name = StringField(
label="用户名/邮箱/手机号",
validators=[
DataRequired(message="请输入用户名"),
Length(3, 10, message="长度不符"),
]
)
passwd = PasswordField(
label="密码",
validators=[
DataRequired(message="输入密码"),
Length(3, 10,message="长度不符")
] )
file = FileField(
label="头像",
validators=[
FileRequired(),
FileAllowed(['png', 'jpg'],message='文件非图片')
]
)
sumbit = SubmitField(
label="登陆"
)