flask表单

一. 原生的表单

(1) 先添加一个login的模板(继承自'bootstarp/base.html')

{% block tcontent %}
    <h1>登录页面</h1>
    <form action="{{ url_for('check') }}" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="userpass"></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"></td>
                <td><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
{% endblock %}

(2) 添加视图函数

@app.route("/login/") # 登录
def login():
    return render_template('login.html')
@app.route('/check/', methods=['post', 'get']) # methods 允许以什么方式提交
def check():
    return '你提交过来了'

(3) 两个视图传递和检验路由合并成一个视图函数

# 将视图传递和登录校验合并成一个
@app.route('/login/', methods=['post', 'get'])
def login():
    info = ""
    if request.method == 'POST': # 注意POST为大写
        username = request.form.get('username')
        info = '欢迎 %s'%username
    return render_template('login.html', info=info)

模板更改为：

{% block tcontent %}
    <h1>登录页面</h1>
    {% if info %} # 新添加的
      {{ info }}
    {% endif %}
    <form action="" method="post"> # 修改action为空,或者没有action 代表提交表单给当前地址

二. flask-wtf

(1) 说明：

是一个用于表单处理的扩展库, 提供了csrf, 表单校验等功能, 使用方便

(2) 安装

pip install flask-wtf

(3) 表单类常用的字段类型

字段类型	字段说明
StringField	普通文本字段
SubmitField	提交按钮字段
PasswordField	密码字段
HiddenField	隐藏文本字段
TextareaField	多行文本域字段
DateField	文本字段 datetime.date格式
DateTimeField	文本字段 datetime.datetime格式
IntegerField	文本字段 值必须为整数
FloatField	文本字段 值为浮点数
BooleanField	复选框 值为True或者False
RadioField	单选框
SelectField	下拉框
FileField	文件上传

(4) 常见的验证器类

验证器	验证器的说明
DataRequired	必填字段, required
Email	验证是否为邮箱
IPAddress	是否是一个正确的ip地址
Length	规定字符的长度有min和max两个参数必填
NumberRange	输入数值的范围
EqualTo	验证两个字段值的一致性
URL	验证是否为有效的url地址
Regexp	正则验证

(5) wtf的csrf

保护所有的表单免受跨站请求攻击, 为了实现防止跨站请求, 需要设置一个密钥, 使用这个密钥生成加密的令牌, 用令牌去验证数据的真伪(使用flask-wtf需要设置csrf)
在manage.py文件中设置密钥

app = Flask(__name__)
app.config['SECRET_KEY'] = '密钥字符串' # 使用csrf

在模板中使用：

{{ form.hidden_tag() }}
{{ form.csrf_token() }} # 法二: 同上

关闭csrf验证

@app.route('/login/', methods=['get', 'post'])
def login():
 form = LoginForm(csrf_enabled=False) # 关闭csrf

(6) 不使用bootstrap的表单

<form action="" method="post">
        <table>
      {{ form.hidden_tag() }} # csrf验证
            {{ form.csrf_token() }}
            <tr>
                <td>{{ form.username.label() }}</td> # 表单字段名
                <td>{{ form.username(id= 'id名称', class='myClss', style='color:red;') }}</td> # 表单标签
                <td>{{ form.username.errors }}</td> # 提交弹出的错误信息
            </tr>
            <tr>
                <td>{{ form.submit() }}</td>
            </tr>
        </table>
    </form>

(7) 使用bootstrap快速生成的表单

{% import 'bootstarp/wtf.html' as wtf %} # 导入bootstrap的wtf表单文件
{% block tcontent %}
    {{ wtf.quick_form(form) }} # 快速生成表单
    {{ wtf.quick_form(form, action=url_for('index'), method="", enctype="") }}
 # 常用关键字参数
    action = '提交地址'
    method = '提交类型'
    enctype = '提交方式'
{% endblock %}

(8) 对应的视图函数

@app.route('/login/', methods=['get', 'post'])
def login():
    form = LoginForm()
    # 验证是否是一个有效的提交的表单,如果不是则会输出错误信息
    if form.validate_on_submit():
        print(form.username.data)
    return render_template('boot_login.html', form=form)

(9) 自定义字段的验证

class LoginForm(FlaskForm):
    ...
    # 自定义字段验证
    # 格式为: validate_属性名(self,field)
    def validate_username(self, field):
        if len(field.data) < 5:
            raise ValidationError('用户名不能小于5个长度')

(10) 避免表单的重复提交(重定向)

@app.route('/login/', methods=['get', 'post'])
def login():
    form = LoginForm()
    if form.validate_on_submit(): # 如果是一个有效的提交的表单,返回True
        print(form.username.data)
        return redirect(url_for('login')) # 重定向
    return render_template('boot_login.html', form=form)

(11) 加载本地的bootstrap样式

app.config['BOOTSTRAP_SERVE_LOCAL'] = True # 加载本地的bootstrap样式

三. flask消息的显示

(1) 说明：

当用户请求发出以后, 用户的状态发生了改变, 需要给出提示或者警示信息的时候, 我们可以通过flash来显示

(2) 使用

导入：

from flask import flask,get_flashed_messages

实例：

@app.route('/login/',methods=['post','get'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        lastName = session.get('username')
        if lastName and lastName!= form.username.data: # 判断如果username发生了修改执行
            session['username'] = form.username.data
            flash('修改信息了1')
            flash('修改信息了2')
            # print(get_flashed_messages()) # get_flashed_messages() 返回列表,保存flash的内容
        return redirect(url_for('login'))
    username = session.get('username')
    return render_template('boot_login.html', form=form,username=username)

在模板中：

{% block tcontent %}
    {% for message in get_flashed_messages() %} # 遍历flash信息
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <strong>警告！</strong> {{ message }}
        </div>
    {% endfor %}
    {% if username %}
        欢迎, {{ username }}
    {% endif %}
{% endblock %}

四. flask-moment

(1) 说明

专门负责时间本地化显示的一个扩展库

(2) 安装

pip install flask-moment

(3) 使用

模板中：

{% extends 'base.html' %}
{% block title %}
    登录
{% endblock %}
{% block tcontent %}
<h2>{{ moment(time).format('L') }}</h2> # 2018年3月21日
<h2>{{ moment(time).format('LL') }}</h2> # 2018年3月21日
<h2>{{ moment(time).format('LLL') }}</h2> # 2018年3月21日下午3点14分
<h2>{{ moment(time).format('LLLL') }}</h2> # 2018年3月21日星期三下午3点14分
<h2>自定义显示</h2>
<h2>{{ moment(time).format('YYYY-MM-DD') }}</h2> # 2018-03-21
<h2>时间差值的显示</h2>
<h2>{{ moment(time).fromNow(refresh=True) }}</h2> # 1 小时前 设置refresh=True 自动刷新时间
{{ moment.include_jquery() }} # 默认为不显示,通过设置这两个,将moment显示出来
{{ moment.include_moment() }} #
{{ moment.locale('zh-CN') }} # 修改为中文
{% endblock %}

视图中：

@app.route('/moment/')
def m():
    myTime = datetime.utcnow() # 获取格林威治时间
    print(myTime)
    return render_template('moment.html',time=myTime)