集成Bootstrap
Flask中集成Bootstrap
1.什么是Bootstrap?
Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架；
它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器。
2.Flask中如何集成Bootstrap?
使用 pip 安装 Flask-Bootstrap 的 Flask 扩展，简化集成的过程。
导入模块并实例化一个对象：
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
3.Flask-Bootstrap实现了什么?
- 利用 Jinja2 的模板继承机制，让程序扩展一个具有基本页面结构的基模板，其中就有用来引入 Bootstrap 的元素。
{ % extends “bootstrap/base_other.html” % }
- 基模板中定义了可再衍生模板中重定义的块。
| 块名 | 说 明 |
|---|---|
| doc | 整个 HTML 文档 |
| html_attribs | <html> 标签的属性 |
| html <html> | 标签中的内容 |
| head <head> | 标签中的内容 |
| title <title> | 标签中的内容 |
| metas | 一组 <meta> 标签 |
| styles | 层叠样式表定义 |
| body_attribs | <body> 标签的属性 |
| body | <body> 标签中的内容 |
| navbar | 用户定义的导航条 |
| content | 用户定义的页面内容 |
| scripts | 文档底部的 JavaScript 声明 |
- 程序需要向已经有内容的块中添加新内容，必须使用 Jinja2 提供的 super() 函数。
{% block scripts %}
{{ super() }}
<script type=“text/javascript” src=“my-script.js”>
{% endblock %}
实现用户注册， 用户登录， 用户注销， 用户查看
在上一篇博客Flask_Bootstrap前端框架中用Bootstrap框架实现了这些要求，今天用集成Bootstrap 如何实现？
很简单，大部分代码都是完全一样的
在 app.py 文件中：
导入Bootstrap模块并实例化一个对象
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)
在 base.html 文件中：
{% extends 'bootstrap/base.html' %}
{% block styles %}
{# 先继承父类的css样式导入 #}
{{ super() }}
<link href="{{ url_for('static',filename='css/main.css') }}" rel="stylesheet">
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Todo</a>
</div>
<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>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">电影</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if not session.user %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% else %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">当前用户：{{ session.user }}<span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li><a href="{{ url_for('logout') }}">注销</a></li>
</ul>
</li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% for item 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>
{{ item }}
</div>
{% endfor %}
{% endblock %}
集成的web表单处理
flask-wtf
- 避免重复操作，表单操作很多；
- 防止表单遭遇跨站请求伪造(csrf ==== cross-site request forgery)；
csrf 跨站请求伪造流程图：
1.为什么使用Flask-WTF？
request 对象公开了所有客户端发送的请求信息。特别是 request.form 可以访问POST 请求提交的表单数据。尽管 Flask 的 request 对象提供的支持足以处理 web表单，但依然有许多任务会变得单调且重复。表单的 HTML 代码生成和验证提交的表单数据就是两个很好的例子。
优势： Flask-WTF 扩展使得处理 web 表单能获得更愉快的体验。该扩展是一个封装了与框架无关的 WTForms 包的 Flask 集成。
2.什么是表单处理?
在网页中，为了和用户进行信息交互总是不得不出现一些表单。flask 设计了WTForm 表单库来使flask可以更加简便地管理操作表单数据。
WTForm中最重要的几个概念如下：
-
Form类，开发者自定义的表单必须继承自Form类或者其子类。
Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。 -
各种Field类，即字段。
一般而言每个Field类都对应一个input的HTML标签。比如WTForm自带的一些Field类，比如BooleanField就对应<input type=“checkbox”>， SubmitField就对应<input type=“submit”>等等。 -
Validator类。
这个类用于验证用户输入的数据的合法性。比如Length验证器可以用于验证输入数据的长度，FileAllowed 验证上传文件的类型等等。
另外，flask为了防范csfr(cross-site request forgery)攻击， 默认在使用flask-wtf之前要求app一定要设置过secret_key。
最简单地可以通过 app.config[‘SECRET_KEY’] = ‘xxxx’ 来配置。
3.常见的Field类
| Field类 | 说明 |
|---|---|
| PasswordField | 密码字段，自动将输入转化为小黑点 |
| DateField | 文本字段，格式要求为 datetime.date 一样 |
| IntergerField | 文本字段，格式要求是整数 |
| DecimalField | 文本字段，格式要求和 decimal.Decimal 一样 |
| FloatField | 文本字段，值是浮点数 |
| BooleanField | 复选框，值为 True 或者 False |
| RadioField | 一组单选框 |
| SelectField | 下拉列表，需要注意一下的是 choices 参数确定了下拉选项，但是和 HTML 中的 <select> 标签一样，其是一个 tuple 组成的列表，可以认为每个 tuple 的第一项是选项的真正的值，而第二项是 alias |
| MultipleSelectField | 可选多个值的下拉列表 |
Validator：
Validator是验证函数，把一个字段绑定某个验证函数之后，flask会在接收表单中的数据之前对数据做一个验证，如果验证成功才会接收数据。
每一个validator类需要哪些参数：基本上每一个validator都有message参数，指出当输入数据不符合validator要求时显示什么信息。
验证函数Validator如下，具体的validator可能需要的参数不太一样，这里只给出一些常用的，更多详细的用法可以参见 wtforms / validators.py 文件的源码：
| 验证函数 | 说明 |
|---|---|
| 验证电子邮件地址的合法性，要求正则模式是^.+@([^.@][^@]+)$ | |
| EqualTo | 比较两个字段的值，通常用于输入两次密码等场景，可写参数fieldname，不过注意其是一个字符串变量，指向同表单中的另一个字段的字段名 |
| IPAddress | 验证IPv4地址，参数默认ipv4=True，ipv6=False。如果想要验证ipv6可以设置这两个参数反过来。 |
| Length | 验证输入的字符串的长度，可以有min、max两个参数指出要设置的长度下限和上限，注意参数类型是字符串，不是INT |
| NumberRange | 验证输入数字是否在范围内，可以有min和max两个参数指出数字上限下限，注意参数类型是字符串，不是INT。参数里可以设置%(min)s和%(max)s两个格式化部分，来告诉前端 =这个范围到底是多少。其他validator也有这种类似的小技巧，可以参看源码。 |
| Optional | 无输入值时跳过同字段的其他验证函数 |
| Required | 必填字段 |
| Regexp | 用正则表达式验证值，参数regex=‘正则模式’ |
| URL | 验证URL，要求正则模式是^[a-z]+://(?P<host>[^/:]+)(?P<port>:[0-9]+)?(?P<path>/.*)?$ |
| AnyOf | 确保值在可选值列表中。 |
| NoneOf | 确保值不在可选值列表中 |
flask-wtf的使用流程
-
编写 forms.py 文件， 定义一个关于表单的类；
注意： 一定要有提交的按钮 -
业务逻辑文件 app.py 中：
- 实例化表单类：form = RegisterForm()
- 验证表单内容是否提交成功：form.validate_on_submit()
- 获取表单里面的内容(两种方法)：
- 通过request对象获取：request.form[‘key值’]
- 通过form对象获取：form.key值.data
-
表现逻辑文件 wtf.html 中：
- 导入wtf模块：{% import “bootstrap/wtf.html” as wtf %}
- 自动生成表单对应的html： {{ wtf.quick_form(form) }}
wtf实现注册页面
在 forms.py 文件中定义一个关于表单的类：
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectField, SelectMultipleField
from wtforms.validators import DataRequired, Length, EqualTo, Email, Regexp
class RegisterForm(FlaskForm):
name = StringField(
label='用户名',
# 验证用户名：用户名不能为空
validators=[DataRequired()]
)
password = PasswordField(
label='密码',
validators=[
DataRequired(),
# 验证密码长度是否为6～8之间，如果不是，报错
Length(8, 16, message='密码格式错误!')
]
)
repassword = PasswordField(
label='确认密码',
validators=[
DataRequired(),
# 验证当前表单输入的内容和password这个表单输入的内容是否一致，如果不一致，报错
EqualTo('password', message='密码不一致!')
]
)
email = StringField(
label='邮箱',
validators=[
DataRequired(),
# 验证当前表单输入的内容是否为一个邮箱地址，如果不是，报错
Email(message='邮箱格式错误!')
]
)
phone = StringField(
label='手机号码',
validators=[
DataRequired(),
# 验证当前表单输入的电话号码是否符合首位为1，由11位数字组成的正则表达式，如果不是，报错
Regexp(r'1\d{10}', message='手机号码格式错误!')
]
)
# RadioField也可以实现单选按钮，但是不美观，推荐用 SelectField
gender = SelectField(
label='性别',
coerce=int,
choices=[(1, '男'), (2, '女')]
)
# 多选按钮
tech = SelectMultipleField(
label='擅长领域',
coerce=int,
choices=[(1, 'python'), (2, 'linux'), (3, 'java'), (4, 'php'), (5, 'ruby'), (6, 'c++')]
)
submit = SubmitField(label='注册')
在业务逻辑文件 app.py 中写视图函数：
from flask_bootstrap import Bootstrap
from flask import Flask, render_template, request, redirect, flash, url_for
from forms import RegisterForm
users = [
{
'username': 'root',
'password': 'root'
}
]
app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)
@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():
# 实例化表单，将来传递到前端，进行生成对应的html
form = RegisterForm()
# 判断提交的数据是否符合form表单定义的验证
# 如果通过验证，则将注册的用户添加到服务器，否则重新注册
if form.validate_on_submit():
username = request.form['name']
password = request.form['password']
gender = request.form['gender']
tech = request.form['tech']
# 打印表单信息
print(request.form)
print('********************************')
# 打印单选框数据信息
print(gender)
print('********************************')
# 打印多选框的数据信息
print(form.tech.data)
for user in users:
if user['username'] == username:
flash(message='用户%s已存在' % (username))
return redirect(url_for('wtf'))
else:
users.append(dict(username=username, password=password))
flash('用户%s注册成功，请登录......' % (username))
return redirect(url_for('login'))
return render_template('wtf.html', form=form)
if __name__ == '__main__':
app.run()
在templates下写表现逻辑文件 wtf.html：
{% extends 'base.html' %}
{# 导入模块，并重命名为wtf #}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %} wtf测试-注册页面 {% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-4 col-lg-offset-4">
<h1>wtf测试-注册页面</h1>
{# 根据后台传递过来的form对象生成对应的html代码 #}
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
实现页面：
打印结果：
集成邮件发送
邮件发送和接受过程：
发送邮件的时候需要设置什么?
- 发件人账户
- 密码
- 收件人
- 邮件标题
- 邮件正文
- QQ邮件服务器的域名或者IP
发送文件时的配置信息：
发送邮件过程（给qq邮箱发送邮件）：
在 forms.py 文件中定义一个关于表单的类：
from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectField, TextAreaField
from wtforms.validators import DataRequired
class MailForm(FlaskForm):
# 接收邮件的地址
toEmails = TextAreaField(
label='接收的邮箱地址',
validators=[DataRequired()],
# 表单的详细描述，一般不写
description='每个邮箱地址之间用逗号隔开'
)
toFilename = SelectField(
label='邮箱内容的类型',
# "company"是传递给后台的，"公司简介"是在前端显示的
choices=[('company', '公司简介'), ('course', '课程简介')]
)
submit = SubmitField(
label='发送'
)
在业务逻辑文件 app.py 中写视图函数：
在设置SMTP服务器的配置信息时，需要注意几点：
(1) 邮件服务器的域名（IP）、端口、启用协议如何获取？（以qq邮箱为例）
进入qq邮箱首页 ----> 设置 ----> 账户 ----> 如何设置
显示配置信息：
(2) 获取密码MAIL_PASSWORD
首先在账户中设置POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务，开启POP3/SMTP服务 和 IMAP/SMTP服务
当你开启服务时，需要你用手机验证，随后会显示一串密码，记住这个密码。开启两个服务，有两个密码
MAIL_PASSWORD 就是任意一个密码
from flask_bootstrap import Bootstrap
from flask import Flask, render_template,redirect, flash, url_for
from flask_mail import Mail, Message
from forms import MailForm
app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)
# 配置发送邮件的相关信息
# 指定邮件服务器的域名或者IP
app.config['MAIL_SERVER'] = 'smtp.qq.com'
# 指定端口，默认25，但qq邮箱默认端口号为465或587
app.config['MAIL_PORT'] = 465
app.config['MAIL_USE_SSL'] = True
# 接收邮件的账户和密码
app.config['MAIL_USERNAME'] = '2511137976'
app.config['MAIL_PASSWORD'] = 'nyfwgbvdndcodjcd'
def send_mail(to, subject, template, **kwargs):
mail = Mail(app)
# app.app_context(): 将之前Flask创建的app作为参数传入AppContext类中,用于存储当前app的相关信息
with app.app_context():
msg = Message(subject=subject,
sender='2511137976@qq.com',
recipients=to,
# 发送的邮件形式有两种：文本形式和HTML形式
# body=render_template(template + '.txt', **kwargs),
html=render_template(template + '.html', **kwargs)
)
mail.send(msg)
@app.route('/mail/', methods=['GET', 'POST'])
def mail():
# 实例化表单
form = MailForm()
if form.validate_on_submit():
# 获取用户提交的数据
toEmails = form.toEmails.data.split(',')
toFilename = form.toFilename.data
try:
send_mail(toEmails, '西部开源邮件测试', toFilename)
except Exception as e:
flash('邮件发送失败,失败原因:%s' % (e))
else:
flash('邮件发送成功!')
return redirect(url_for('mail'))
return render_template('send_mail.html',form=form)
if __name__ == '__main__':
app.run()
在templates下写表现逻辑文件 send_mail.html：
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %} 发送邮件 {% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>发送邮件设置</h1>
<hr/>
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
写一个简单的邮件（内容为html格式）：
公司简介：company.html
<h1 style="color: red">公司简介</h1>
课程简介：course.html
<h1 style="color: red">课程详情</h1>
实现发送邮件的页面，发送邮件（为方便观察实验结果，发送邮件给自己即可）：
邮件发送成功后，再查看qq邮箱是否收到邮件。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
