# 表单提交 ### flask-bootstrap - 说明：在flask中如何使用bootstrap，可以通过此扩展进行解决。 - 安装：`pip install flask-bootstrap` - 使用： ```python from flask_bootstrap import Bootstrap bootstrap = Bootstrap(app) ``` - 模板： ```html {# 继承自bootstrap的基础模板 #} {% extends 'bootstrap/base.html' %} {% block title %}标题{% endblock %} {% block content %} <div class="container"> 内容 </div> {% endblock %} ``` - bootstrap基础模板中的block | block | 说明 | | ------- | ------------------ | | doc | 整个HTML文档 | | html | 整个html标签 | | head | 整个head标签 | | title | 整个title标签 | | metas | 一组meta标签 | | styles | 一组link标签(加载CSS文件) | | body | 整个body标签 | | navbar | 导航条 | | content | 网页内容 | | scripts | 一组script标签(加载JS文件) | > 提示：当重写一个block后，发现原来的显示全没了，很可能是因为没有使用{{ super() }}。 ### 项目基础模板定制 - 从bootstrap官网复制一个顺眼的导航条 - 将`container-fluid`改为`container` - 改为反色导航条，将`navbar-default`改为`navbar-inverse` - 设置为直角：`style="border-radius: 0px;"` - 根据需要定制导航条上的显示内容 ### 加载静态资源 - flask中静态资源默认存放在static目录下，因此目录结构如下： ``` project/ manage.py # 启动控制文件 templates/ # 模板文件目录 static/ # 静态资源目录 img/ css/ js/ favicon.ico ``` - 加载静态资源 ```html {# 基础模板中，加载网站收藏夹小图标 #} {% block head %} {{ super() }} <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" /> {% endblock %} {# 加载图片资源 #} <img src="{{ url_for('static', filename='img/gyy.jpg') }}" /> {# 加载CSS文件 #} {% block styles %} {{ super() }} <link type="text/css" href="{{ url_for('static', filename='css/common.css') }}" rel="stylesheet" /> {% endblock %} {# 加载JS文件 #} {% block scripts %} {{ super() }} <script type="text/javascript" src="{{ url_for('static', filename='js/common.js') }}"></script> {% endblock %} ``` ### 原生表单 - 准备模板文件`login.html`： ```html <form method="post" action="/check/"> 用户名：<input name="username" /><br /> <input type="submit" /> </form> ``` - 添加视图函数，并渲染模板文件： ```python @app.route('/login/') def login(): return render_template('login.html') ``` - 添加检验视图函数： ```python @app.route('/check/', methods=['POST']) def check(): return '登录成功' ``` - 一个路由接收两种请求： ```python @app.route('/login/', methods=['GET', 'POST']) def login(): if request.method == 'GET': return render_template('login.html') else: # request.form存放了所有的POST请求数据 # return request.form.get('username') # request.values存放了所有GET/POST请求数据 return request.values.get('username') ``` ### flask-wtf - 说明：表单处理的扩展库，提供了CSRF、字段校验等功能，使用非常方便 - 安装：`pip install flask-wtf` - 使用： - 创建表单类 ```python # 导入表单基类 from flask_wtf import FlaskForm # 导入相关字段 from wtforms import StringField, SubmitField # 导入相关验证器 from wtforms.validators import Length # 创建表单类 class NameForm(FlaskForm): name = StringField('用户名', validators=[Length(3, 10, message='用户名长度必须在3~10个字符之间')]) submit = SubmitField('提交') ``` - 添加视图函数，创建表单对象，并渲染模板文件： ```python @app.route('/', methods=['GET', 'POST']) def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): # 提取表单数据 return form.name.data return render_template('form.html', form=form) ``` - 原生渲染表单 ```html <form method="post"> {# CSRF字段 #} {{ form.hidden_tag() }} {{ form.name.label() }}{{ form.name(id='xxx', class='yyy') }} {% for e in form.name.errors %} <div>{{ e }}</div> {% endfor %} {{ form.submit() }} </form> ``` - 使用bootstrap方式进行快速渲染 ```html {# 继承自bootstrap基础模板 #} {% extends 'bootstrap/base.html' %} {# 导入快速渲染的宏 #} {% from 'bootstrap/wtf.html' import quick_form %} {% block content %} <div class="container"> {# 在合适位置快速渲染表单 #} {{ quick_form(form) }} </div> {% endblock %} ``` - POST重定向到GET：因为浏览器会记录最后的请求状态，点击刷新时POST请求会有问题。 ```python @app.route('/', methods=['GET', 'POST']) def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): # 提取表单数据 session['name'] = form.name.data return redirect(url_for('index')) name = session.get('name') return render_template('form2.html', form=form, name=name) ``` - 常见字段类型 | 字段类型 | 说明 | | ------------- | ------------------- | | StringField | 普通文本字段 | | Submit | 提交按钮 | | PasswordField | 密文字段 | | HiddenField | 隐藏字段 | | RadioField | 单选框 | | BooleanField | 复选框 | | FileField | 文件上传 | | SelectField | 下拉框 | | TextAreaField | 文本域 | | IntegerField | 文本字段，值为整数 | | FloatField | 文本字段，值为浮点数 | | DateField | datetime.date类型 | | DateTimeField | datetime.datetime类型 | - 常见验证器 | 验证器 | 说明 | | ------------ | ------------------- | | Length | 规定字符长度 | | DataRequired | 确保字段有值(提示信息与所写的不一致) | | Email | 邮箱地址 | | IPAddress | IP地址 | | NumberRange | 数值的范围 | | URL | 统一资源定位符 | | EqualTo | 验证两个字段的一致性 | | Regexp | 正则验证 | - 自定义验证函数 ```python from wtforms.validators import ValidationError class NameForm(FlaskForm): 。。。 def validate_name(self, field): if len(field.data) < 6: raise ValidationError('用户名不能少于6个字符') ``` > 总结：写字段验证函数，就是写一个'validate_字段名'的函数 ### 消息闪烁 - 说明： 当用户发出请求后，状态发生了改变，需要系统给出警告、提示等信息时，通常是弹出一条消息，指示用户下一步的操作，用户可以手动关闭提示消息。而且整个的过程不会影响页面原有的显示。 - 使用： - 在需要弹出消息时，使用`flash`函数保存闪烁消息 ```python @app.route('/', methods=['GET', 'POST']) def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): last_name = session.get('name') if last_name and form.name.data != last_name: flash('大哥，又换签名了！') # 提取表单数据 session['name'] = form.name.data return redirect(url_for('index')) name = session.get('name') return render_template('form2.html', form=form, name=name) ``` - 在模板文件中显示闪烁消息时，可以通过函数`get_flashed_messages`获取 - 从bootstrap上粘贴一个可消失的警告框 ```html {% for message in get_flashed_messages() %} <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button> {{ message }} </div> {% endfor %} ``` ### flask-moment - 说明：专门负责时间本地化显示的扩展库，使用非常方便 - 安装：`pip install flask-moment` - 使用： - python代码 ```python from flask_moment import Moment moment = Moment(app) @app.route('/mom/') def mom(): from datetime import datetime, timedelta current_time = datetime.utcnow() + timedelta(seconds=-60) return render_template('mom.html', current_time=current_time) ``` - 模板文件 ```html {# 加载jQuery #} {{ moment.include_jquery() }} {# 加载moment.js #} {{ moment.include_moment() }} {# 设置语言 #} {{ moment.locale('zh-CN') }} {# 简单的格式化时间显示 #} <div>时间：{{ moment(current_time).format('LLLL') }}</div> <div>时间：{{ moment(current_time).format('LLL') }}</div> <div>时间：{{ moment(current_time).format('LL') }}</div> <div>时间：{{ moment(current_time).format('L') }}</div> {# 自定义格式化显示 #} <div>自定义：{{ moment(current_time).format('YYYY-MM-DD HH:mm:ss') }}</div> {# 显示时间差 #} <div>发表于：{{ moment(current_time).fromNow() }}</div> ``` ### 练习： - 完成用户的注册登录功能