模板表单
flask-bootstrap
安装:
sudo pip3 install flask-bootstrap
使用
manage.py
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
自定义base基础模板
{% extends 'bootstrap/base.html' %}
{% block title %}
首页
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-inverse" style="border-radius: 0;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-eye-open"
aria-hidden="true"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
<li><a href="#">发表博客</a></li>
<li><a href="#">我收藏的</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">个人中心<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人信息</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">修改密码</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">修改邮箱</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}
{% endblock %}
</div>
{% endblock %}
使用自定义的base模板
{% extends'common/base.html' %}加载静态资源
css、js、img、视频、音频
创建静态资源文件的目录 static
目录结构
project/
static/
templates/
manage.py实例
{% extends'common/base.html' %}
{% block page_content %}
<img src="{{ url_for('static',filename='img/meinv.jpg',_external=True) }}" alt="">
{% endblock %}
_external参数 将当期路由地址变成绝对路径的路由地址
{#
name 公有变量
_name 受保护变量
__name 私有变量
注意： 在不同的python解释器中 解释是不同的 从当前模块中 导入到其它模块使用 _ 和 __ 是不能导入（只能在当前文件中执行）
#}注意：
如果加载的静态资源文件 在static的顶级目录 则filename=文件名称 如果包含在某个目录中 则filename='目录名/文件名'
在视图中传递多个参数到模板中
1、使用关键字方式
@app.route('/')
def index():
return render_template('index.html',title='标题',con='首页')2、使用字典
@app.route('/')
def index():
return render_template('index.html',data=data{'title':'标题','con':'首页'})3、 使用**
@app.route('/')
def index():
return render_template('index.html',**{'title':'标题','con':'首页'})4、 使用 **locals()
@app.route('/')
def index():
name = 'zhangsan'
age = 18
# print(locals()) #返回当前的所有局部变量 以字典的形式
return render_template('index.html',**locals())5、使用全局变量g
@app.route('/')
def index():
g.name = 'zhangsan'
g.age = 18
return render_template('index.html')
使用:
g.name
g.age表单
1、 原生表单
form.html
<form action="{{ url_for('check_login') }}" method="post">
<p>用户名： <input type="text" maxlength="12" name="username" placeholder="请输入用户名..."></p>
<p>密码： <input type="password" name="userpass" placeholder="请输入密码..."></p>
<p><input type="submit" value="登录"></p>
</form>
manage.py中的视图函数
#表单第一种 原生form
@app.route('/login/')
def login():
return render_template('yuanshengform/form.html')
#获取表单提交过来的数据
@app.route('/check_login/',methods=['POST']) #设置当前的路由地址只允许post请求
# @app.route('/check_login/') #设置当前的路由地址只允许post请求
def check_login():
# print(request.form) #获取不到get传递过来的数据
# print(request.args) #获取get传递过来的数据
# print(request.form) #获取不到get传递过来的数据
username = request.form.get('username')
userpass = request.form.get('userpass')
return '欢迎{} 密码为{}'.format(username,userpass)
# return '获取到数据了'俩个合并为同一个
#俩个视图合并为同一个视图
@app.route('/login/',methods=['GET','POST'])
def login():
if request.method == 'POST' and request.form.get('username') and request.form.get('userpass'):
print(request.form)
return '数据提交过来'
return render_template('yuanshengform/form.html')
2、 flask-wtf 表单扩展库
安装：
sudo pip3 install flask-wtf
说明
是一个用于表单处理的扩展库 提供了csrf 和表单验证等功能
字段类型
| 字段名称 | 字段说明 |
|---|---|
| StringField | 普通文本字段 |
| SubmitField | 提交字段 |
| PasswordField | 密码字段 |
| HiddenField | 隐藏域 |
| TextAreaField | 多行文本域字段 |
| DateField | 日期字段 |
| DateTimeField | 日期时间字段 |
| IntegerField | 整形字段 |
| FloatField | 浮点形字段 |
| BooleanField | bool字段 |
| RadioFIeld | 单选 |
| SelectField | 下拉字段 |
| FileField | 文件上传 |
验证器
| 验证器 | 验证器说明 |
|---|---|
| DataRequired | 必填 |
| Length | 长度 min max |
| IPAddress | ip地址 |
| URL | url地址验证 |
| NumberRange | 值的范围 |
| EqualTo | 验证俩个字段值的是否相同 |
| Regexp | 正则匹配 |
| 验证邮箱 |
实例
manage.py
from flask import Flask,render_template,request
from flask_script import Manager
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired,Length
app = Flask(__name__)
app.config['SECRET_KEY'] = 'abcd' #csrf_token的生成需要使用
bootstrap = Bootstrap(app)
manager = Manager(app)
#创建表单类
class Login(FlaskForm):
#参数1 为label中的内容显示
username = StringField('用户名',validators=[DataRequired(message='用户名不能为空'),Length(min=6,max=12,message='用户名在6-12位之间...')])
userpass = PasswordField('密码',validators=[DataRequired(message='密码不能为空'),Length(min=6,max=10,message='密码长度为6-10位')])
submit = SubmitField('登录')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login/',methods=['GET','POST'])
def login():
form = Login() #实例化登录的表单类
# if request.method=='POST':
if form.validate_on_submit(): #当前表单的csrf验证通过 和数据正确 则为真
# print(request.form) #使用request获取数据
print(form.username.data) #使用表单对象获取数据
print(form.userpass.data)
return '表单提交'
return render_template('flask-wtf-form/form2.html',form=form)
if __name__ == '__main__':
manager.run()form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wtf-form</title>
</head>
<body>
<form action="" method="post">
{{ form.csrf_token }}
{{ form.username.label() }}
{{ form.username(placeholder='请输入用户名...',style='color:red;') }}
{# {{ form.username.errors }}#}
{% if form.username.errors %}
<span style="color: red;">{{ form.username.errors.0 }}</span>
{% endif %}
<br>
{{ form.userpass.label() }}
{{ form.userpass() }}
{# {{ form.userpass.errors }}#}
{% if form.userpass.errors %}
<span style="color: red;">{{ form.userpass.errors.0 }}</span>
{% endif %}
<br>
{{ form.submit() }}
</form>
</body>
</html>调用封装成宏的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
list-style: none;
}
</style>
</head>
<body>
{% from 'common/wtf-macro.html' import formField %}
<form action="" method="post">
<table>
{{ formField(form.username) }}
{{ formField(form.userpass) }}
</table>
{{ form.submit() }}
</form>
</body>
</html>宏的代码
{% macro formField(field) %}
<tr>
<td>{{ field.label() }}</td>
<td>{{ field() }}</td> {# form.username() 在这个位置实现 能添加 placeholder属性 style class #}
<td>
{% if field.errors %}
<ul class="error">
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</td>
</tr>
{% endmacro %}
{#{{ formField(form.username)) }}#}
使用bootstrap渲染表单
{% extends 'common/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block page_content %}
<div class="row">
<div class="col-md-8"><img src="{{ url_for('static',filename='img/meinv.jpg') }}" alt=""></div>
<div class="col-md-4">{{ wtf.quick_form(form) }}</div>
</div>
{% endblock %}
注意：
-
request.form 获取不到表单get传递过来的数据
-
使用request.args 获取get传递过来的数据
-
表单都使用post提交