集成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邮箱是否收到邮件。