python学习笔记(flask-bootstrap前端框架、flask-wtf)
鲁单弓
Bootstrap
什么是Bootstrap框架
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、
CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
学习网站:
- 官方中文文档: https://v3.bootcss.com/
- 菜鸟教程案例: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
flask项目静态文件导入
需要先将下载好的bootstrap压缩包内的js、css、font目录移动到static目录下
除了导入下载好的本地静态文件，还可以根据官方中文文档导入url地址
两种方法: 任选一种
- <link href="/static/css/bootstrap.css" rel="stylesheet">
- <link href="{{ url_for('static', filename="css/bootstrap.css") }}"
rel="stylesheet">
flask链接的导入
两种方法:
- <a href="/register/">注册</a>
- <a href="{{ url_for('login') }}">登录</a>
# 根据视图函数动态的去查找路径;
- <a href="{{ url_for('delete', username="root") }}">删除</a> === /delete/root/
消息闪现
-
如何实现闪现?
1). flash消息这种功能，是Flask的核心特性。用于在下一个响应中显示一个消息，让用户知道状态发生了变化。
可以使确认消息，警告或者错误提醒。flash(“闪现的消息”)
2). 工作原理:
闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据。 -
html代码中如何调用闪现内容?
仅调用flash()函数并不能把消息显示出来，程序使用的模板要渲染这些消息。
Flask把get_flashed_messages()函数开放给模板，用来获取并渲染消息
{#让每个页面都可以获取闪现信息闪现#}
{% 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 %}
flask中集成bootstrap
flask中如何集成bootstrap
使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。
from flask.ext.bootstrap import Bootstrap
bootstrap = Bootstrap(app)
在业务逻辑app.py中实例化Bootstrap对象，用于继承
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"></script>
{% endblock %}
自定义base.html
继承自集成bootstrap对象中的基模板
{% extends 'bootstrap/base.html' %}
{% block styles %}
{# 先继承父类的css样式导入 #}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<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="#">Todo</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="{{ url_for('list') }}">用户信息</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">
{# 分类讨论:
1. 如果没有登录， 显示登录和注册按钮；
2. 如果登录成功， 显示用户名称和注销按钮
#}
{% if not session.user %}
<li><a href="{{ url_for('login') }}">登录</a></li>
<li><a href="{{ url_for('register') }}">注册</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 %}
用户session信息保存
cookie: 客户端浏览器的缓存
session: 服务端缓存
session的作用是什么?
Session 对象存储特定用户会话所需的属性及配置信息。
这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。
当用户请求来自应用程序的Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。
当会话过期或被放弃后，服务器将终止该会话。
Session 对象最常见的一个用法就是存储用户的首选项。
判断用户是否登录成功的装饰器
def is_login(f):
"""用来判断用户是否登录成功"""
@wraps(f)
def wrapper(*args, **kwargs):
# 判断session对象中是否有seesion['user'],
# 如果包含信息， 则登录成功， 可以访问主页；
# 如果不包含信息， 则未登录成功， 跳转到登录界面;；
if session.get('user', None):
return f(*args, **kwargs)
else:
flash("用户必须登录才能访问%s" % (f.__name__))
return redirect(url_for('login'))
return wrapper
判断登录用户是否为管理员的装饰器
def is_admin(f):
"""用来判断用户是否登录成功"""
@wraps(f)
def wrapper(*args, **kwargs):
# 判断session对象中是否有seesion['user']等于root,
# 如果包含信息， 则登录成功， 可以访问主页；
# 如果不包含信息， 则未登录成功， 跳转到登录界面;；
if session.get('user', None) == 'root':
return f(*args, **kwargs)
else:
flash("只有管理员root才能访问%s" % (f.__name__))
return redirect(url_for('login'))
return wrapper
flask中集成的web表单处理
需要安装flask-wtf模块，用来创建表单类
flask-wtf的特点：
- 通过代码创建表单
- 避免重复操作， 表单操作很多
- 防止表单遭遇跨站请求伪造(csrf===cross-site request forgery)
为什么使用Flask-WTF？
request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。
尽管Flask的request对象提供的支持足以处理web表单，但依然有许多任务会变得单调且重复。
表单的HTML代码生成和验证提交的表单数据就是两个很好的例子。
优势：
Flask-WTF扩展使得处理web表单能获得更愉快的体验。该扩展是一个封装了与框架无关的WTForms包的Flask集成。
什么是表单处理?
在网页中，为了和用户进行信息交互总是不得不出现一些表单。
flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据。
WTForm中最重要的几个概念如下：
1). Form类，开发者自定义的表单必须继承自Form类或者其子类。
Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。
2). 各种Field类，即字段。一般而言每个Field类都对应一个input的HTML标签。
比如WTForm自带的一些Field类比如BooleanField就对应，
SubmitField就对应等等。
3). Validator类。这个类用于验证用户输入的数据的合法性。
比如Length验证器可以用于验证输入数据的长度，
FileAllowed验证上传文件的类型等等。
另外，flask为了防范csfr(cross-site request forgery)攻击，
默认在使用flask-wtf之前要求app一定要设置过secret_key。
最简单地可以通过app.config[‘SECRET_KEY’] = 'xxxx’来配置。
常见的Field类
PasswordField 密码字段，自动将输入转化为小黑点
DateField 文本字段，格式要求为datetime.date一样
IntergerField 文本字段，格式要求是整数
DecimalField 文本字段，格式要求和decimal.Decimal一样
FloatField 文本字段，值是浮点数
BooleanField 复选框，值为True或者False
RadioField 一组单选框
SelectField 下拉列表，需要注意一下的是choices参数确定了下拉选项，
但是和HTML中的<select> 标签一样，其是一个tuple组成的列表，
可以认为每个tuple的第一项是选项的真正的值，而第二项是alias。
MultipleSelectField 可选多个值的下拉列表
Validator类
- Validator是验证函数:
Validator是验证函数，把一个字段绑定某个验证函数之后，flask会在接收表单中的数据之前对数据做一个验证，
如果验证成功才会接收数据。验证函数Validator如下，具体的validator可能需要的参数不太一样，这里只给出
一些常用的，更多详细的用法可以参见wtforms/validators.py文件的源码，参看每一个validator类需要哪些参数：
*基本上每一个validator都有message参数，指出当输入数据不符合validator要求时显示什么信息。
Email
验证电子邮件地址的合法性，要求正则模式是^.+@([^.@][^@]+)$
EqualTo
比较两个字段的值，通常用于输入两次密码等场景，可写参数fieldname，
不过注意其是一个字符串变量，指向同表单中的另一个字段的字段名
IPAddress
验证IPv4地址，参数默认ipv4=True,ipv6=False。如果想要验证ipv6可以
设置这两个参数反过来。
Length
验证输入的字符串的长度，可以有min,max两个参数指出要设置的长度下限和上限,
注意参数类型是字符串，不是INT!!
NumberRange
验证输入数字是否在范围内，可以有min和max两个参数指出数字上限下限，注意参数
类型是字符串，不是I数里可以设置%(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的使用流程
1). 编写forms.py文件， 定义一个关于表单的类;(***注意： 一定要有提交的按钮);
2). 业务逻辑文件app.py中，
- 实例化表单类; form = RegisterForm()
- 验证表单内容是否提交成功? form.validate_on_submit():
- 获取表单里面的内容(两种方法):
- 通过request对象获取: request.form[‘key值’]；
- 通过form对象获取: form.key值.data
3). 表现逻辑文件wtf.html中:
- 导入wtf模块: {% import “bootstrap/wtf.html” as wtf %}
- 自动生成表单对应的html： {{ wtf.quick_form(form) }}
测试表单应用案例
form表单
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, \
RadioField, SelectField, SelectMultipleField, TextAreaField
from wtforms.validators import DataRequired, EqualTo, Length, Email, Regexp
class RegisterForm(FlaskForm):
# StringField <input type='text' name='name' required>
# PasswordField <input type='password' name='password' required>
name = StringField(
label="用户名",
# 验证: 用户名不能为空的
validators=[DataRequired(), ]
)
password = PasswordField(
label="密码",
validators=[
DataRequired(),
# 验证密码长度是否为6～8之间， 如果不是， 则报错;
Length(6, 16, message="密码格式不正确"),
]
)
repassword = PasswordField(
"确认密码",
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="电话号码格式错误!")
]
)
# 可以实现单选按钮， 但是不美观，
# gender = RadioField(
# label="性别",
# coerce=int,
# choices=[(1, "男"), (2, "女")]
#
# )
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="注册")
"""
# 单选框
<form>
男: <input type="radio" name="gender" value="1">
女: <input type="radio" name="gender" value="2">
</form>
"""
业务逻辑
@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():
from forms import RegisterForm
# 1. 实例化表单， 将来传递到前端， 进行生成对应的html;
form = RegisterForm()
# 2. 判断HTTP请求方式， 返回不同的内容
# 第一个判断: 是否为post请求? 判断提交的数据是否符合form表单定义的验证?
# if request.method == 'POST':
# print(request.form['name'])
# return 'post'
if form.validate_on_submit():
username = request.form['name']
password = request.form['password']
gender = request.form['gender']
tech = request.form['tech']
# 当所有的信息遍历结束， 都没有发现注册的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
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))
# return redirect('/login/')
# 出现一个闪现信息;
flash("用户%s已经注册成功， 请登录....." % (username))
return redirect(url_for('login'))
return render_template("wtf.html",
form=form)
页面逻辑
{% extends 'base.html' %}
{#导入模块， 并重命名为wtf#}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %} wtf测试页面{% endblock %}
{% block content %}
<div class="container" style="margin-top: 50px">
<div class="col-lg-8 col-lg-offset-2">
<h1>注册-wtf测试</h1>
{# 根据后台传递过来的form对象生成对应的html代码; #}
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
案例：flask中邮件发送——qq邮箱
需要安装flask-mail模块
发送邮件需要设置什么
- 发件人账户
- 密码
- 收件人
- 邮件标题
- 邮件正文
- QQ邮件服务器的域名或者IP
form表单
创建发送邮件的表单类，提供给用户操作
class MailForm(FlaskForm):
# 接收邮件的地址
toEmails = TextAreaField(
label="接收的邮箱地址",
validators=[DataRequired()],
# 表单的详细描述， 一般不写
description="每个邮箱地址之间用逗号分隔"
)
toFilename = SelectField(
label="邮件内容的类型",
# "company", 是传递给后台的， "公司简介"是在前端显示的;
choices =[("company", "公司简介"), ("course", "课程简介")]
)
submit = SubmitField(
label="发送"
)
业务逻辑
配置发送邮件相关信息
# 配置发送邮件的相关信息;
# 指定邮件服务器的域名或者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'] = '1185289412'
app.config['MAIL_PASSWORD'] = "xxxxxxxxxx"
定义发送邮件的函数
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='1185289412@qq.com',
recipients=to,
# 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)
页面逻辑
{% 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 %}
简单制作的网站的总体效果
业务逻辑(app.py)
import os
from flask import Flask, render_template, request, redirect, url_for, flash, session
from functools import wraps
from flask_bootstrap import Bootstrap
from flask_mail import Message, Mail
from day35_User.forms import RegisterForm, MailForm
users = [
{
'username': 'root',
'password': 'root'
},
{
'username': 'hello',
'password': 'root'
},
]
# 实现用户注册， 用户登录， 用户注销， 用户查看;
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'] = '1185289412'
app.config['MAIL_PASSWORD'] = "xxxxxxxxx"
def is_login(f):
"""用来判断用户是否登录成功"""
@wraps(f)
def wrapper(*args, **kwargs):
# 判断session对象中是否有seesion['user'],
# 如果包含信息， 则登录成功， 可以访问主页；
# 如果不包含信息， 则未登录成功， 跳转到登录界面;；
if session.get('user', None):
return f(*args, **kwargs)
else:
flash("用户必须登录才能访问%s" % (f.__name__))
return redirect(url_for('login'))
return wrapper
def is_admin(f):
"""用来判断用户是否登录成功"""
@wraps(f)
def wrapper(*args, **kwargs):
# 判断session对象中是否有seesion['user']等于root,
# 如果包含信息， 则登录成功， 可以访问主页；
# 如果不包含信息， 则未登录成功， 跳转到登录界面;；
if session.get('user', None) == 'root':
return f(*args, **kwargs)
else:
flash("只有管理员root才能访问%s" % (f.__name__))
return redirect(url_for('login'))
return wrapper
# 面试常问： 复习： 1. 装饰器的工作原理； 2. 如果有多个装饰器， 运行流程是怎样的?
@app.route('/')
@is_login
def index():
return render_template('index.html')
@app.route('/register/', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form.get("username", None)
password = request.form.get('password', None)
# 当所有的信息遍历结束， 都没有发现注册的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
for user in users:
if user['username'] == username:
return render_template('register.html', message="用户%s已经存在" % (username))
else:
users.append(dict(username=username, password=password))
# return redirect('/login/')
# 出现一个闪现信息;
flash("用户%s已经注册成功， 请登录....." % (username), category='info')
return redirect(url_for('login'))
return render_template('register.html')
@app.route('/login/', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form.get("username", None)
password = request.form.get('password', None)
# 当所有的信息遍历结束， 都没有发的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
for user in users:
if user['username'] == username and user['password'] == password:
# 将用户登录的信息存储到session中;
session['user'] = username
return redirect(url_for('index'))
else:
# 出现一个闪现信息;
flash("用户%s密码错误， 请重新登录....." % (username))
return redirect(url_for('login'))
return render_template('login.html')
@app.route('/logout/')
def logout():
# 将用户存储到session中的信息删除;
session.pop('user')
flash("注销成功........")
return redirect(url_for('login'))
@app.route('/delete/<string:username>/')
def delete(username):
for user in users:
# 用户存在， 则删除;
if username == user['username']:
users.remove(user)
flash("删除用户%s成功" % (username))
# else:
# flash("用户%s不存在" % (username))
# 删除成功， 跳转到/list/路由中.....
return redirect(url_for('list'))
@app.route('/list/')
@is_login
@is_admin
def list():
return render_template('list.html',
users=users)
@app.route('/upload/', methods=['POST', 'GET'])
def upload():
if request.method == 'POST':
# 获取用户上传的文件对象
f = request.files['faceImg']
# 获取上传文件的文件名
# print(f.filename)
# 获取当前项目的目录位置;
basepath = os.path.dirname(__file__)
# print(__file__) # /root/PycharmProjects/day34/app.py
# print(basepath) # /root/PycharmProjects/day34
# /root/PycharmProjects/day34/static/img/face/xxx.png
# 拼接路径， 保存到本地的位置;
filepath = os.path.join(basepath, 'static', 'img', 'face', f.filename)
# 保存文件
f.save(filepath)
flash("上传文件%s成功" % (f.filename))
return redirect(url_for('upload'))
else:
return render_template('upload.html')
# 测试表单的应用案例
@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():
from forms import RegisterForm
# 1. 实例化表单， 将来传递到前端， 进行生成对应的html;
form = RegisterForm()
# 2. 判断HTTP请求方式， 返回不同的内容
# 第一个判断: 是否为post请求? 判断提交的数据是否符合form表单定义的验证?
# if request.method == 'POST':
# print(request.form['name'])
# return 'post'
if form.validate_on_submit():
username = request.form['name']
password = request.form['password']
gender = request.form['gender']
tech = request.form['tech']
# 当所有的信息遍历结束， 都没有发现注册的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
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))
# return redirect('/login/')
# 出现一个闪现信息;
flash("用户%s已经注册成功， 请登录....." % (username))
return redirect(url_for('login'))
return render_template("wtf.html",
form=form)
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='1185289412@qq.com',
recipients=to,
# 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()
创建表单（form）
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, \
RadioField, SelectField, SelectMultipleField, TextAreaField
from wtforms.validators import DataRequired, EqualTo, Length, Email, Regexp
class RegisterForm(FlaskForm):
# StringField <input type='text' name='name' required>
# PasswordField <input type='password' name='password' required>
name = StringField(
label="用户名",
# 验证: 用户名不能为空的
validators=[DataRequired(), ]
)
password = PasswordField(
label="密码",
validators=[
DataRequired(),
# 验证密码长度是否为6～8之间， 如果不是， 则报错;
Length(6, 16, message="密码格式不正确"),
]
)
repassword = PasswordField(
"确认密码",
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="电话号码格式错误!")
]
)
# 可以实现单选按钮， 但是不美观，
# gender = RadioField(
# label="性别",
# coerce=int,
# choices=[(1, "男"), (2, "女")]
#
# )
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="注册")
"""
# 单选框
<form>
男: <input type="radio" name="gender" value="1">
女: <input type="radio" name="gender" value="2">
</form>
"""
class MailForm(FlaskForm):
# 接收邮件的地址
toEmails = TextAreaField(
label="接收的邮箱地址",
validators=[DataRequired()],
# 表单的详细描述， 一般不写
description="每个邮箱地址之间用逗号分隔"
)
toFilename = SelectField(
label="邮件内容的类型",
# "company", 是传递给后台的， "公司简介"是在前端显示的;
choices =[("company", "公司简介"), ("course", "课程简介")]
)
submit = SubmitField(
label="发送"
)
页面逻辑
base.html
{% extends 'bootstrap/base.html' %}
{% block styles %}
{# 先继承父类的css样式导入 #}
{# {{ super() }}#}
<link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('index') }}">Todos</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02"
aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('index') }}">主页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('list') }}">用户信息</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">监控</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻</a>
</li>
</ul>
<ul class="navbar-nav media-right">
{% if not session.user %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('login') }}">登录</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('register') }}">注册</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logout') }}">注销</a>
</li>
{% endif %}
</ul>
</div>
</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 %}
index.html
{% extends 'base.html' %}
{% block title %} 主页 {% endblock %}
{% block content %}
<h1>这是主页</h1>
{% endblock %}
list.html
{% extends 'base.html' %}
{% block title %} 用户显示{% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>用户信息显示</h1>
<br/>
<hr/>
<br/>
<table class="table table-hover">
<tr>
<td>用户名</td>
<td>密码</td>
<td>删除</td>
</tr>
{% for user in users %}
<tr>
{# user是一个字典， 获取字典的key值， user.keyname #}
<td>{{ user.username }}</td>
<td>{{ user.password }}</td>
{# 寻找删除的按钮 #}
<td>
{# <a href="/delete/{{ user.username }}/" class="btn btn-default btn-danger " role="button">删除</a>#}
<a href="{{ url_for('delete', username=user.username) }}"
class="btn btn-default btn-danger " role="button">删除</a>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %}
login.html
{% extends 'base.html' %}
{% block title %} 登录页面{% endblock %}
{% block content %}
<!--<button type="button" class="btn btn-danger">失败</button>-->
<!--实现登录界面-->
<div class="container">
<div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">
<h1>
登录
<small>
没有账号？
{# <a href="/register/">注册</a>#}
<a href="{{ url_for('register') }}">注册</a>
</small>
</h1>
<form action="{{ url_for('login') }}" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input name='username' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input name='password' type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-success btn-block">登录</button>
</form>
</div>
{% endblock %}
register.html
{% extends 'base.html' %}
{% block title %} 注册页面{% endblock %}
{% block content %}
<!--<button type="button" class="btn btn-danger">失败</button>-->
<!--实现登录界面-->
<div class="container">
<div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">
<h1>
注册
<small>
已有帐号
{# <a href="/login/">登录</a>#}
<a href="{{ url_for('login') }}">登录</a>
</small>
</h1>
{# action : 将表单填写的数据提交到那个URL里面进行处理, #}
{# url_for('register') : 根据视图函数寻找对应的url地址,/register/ #}
{# method =['post', 'get'] , 这种是错误的， 提交数据只能选择一种HTTP请求方法; #}
<form action="{{ url_for('register') }}" method="post">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
{# name="username" ====> 将name里面的值username作为key值， 表单里面填写的内容作为value值， 提交到request.form #}
{# type="text" : 要求填写的是一个字符串; #}
<input name="username" type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input name="password" type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-success btn-block">注册</button>
</form>
{% if message %}
<h5 style="color: red">{{ message }}</h5>
{% endif %}
</div>
{% endblock %}
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 %}
upload.html
{% extends 'base.html' %}
{% block title %} 上传文件 {% endblock %}
{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>上传头像</h1>
<hr/>
{# enctype="multipart/form-data"用于接收特殊的数据， 包括视频， 图片， 音乐.....，
默认只能接收text/plain #}
<form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
<input name="faceImg" type="file"><br/>
<input type="submit" value="上传">
</form>
</div>
</div>
{% endblock %}
wtf.html
{% extends 'base.html' %}
{#导入模块， 并重命名为wtf#}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %} wtf测试页面{% endblock %}
{% block content %}
<div class="container" style="margin-top: 50px">
<div class="col-lg-8 col-lg-offset-2">
<h1>注册-wtf测试</h1>
{# 根据后台传递过来的form对象生成对应的html代码; #}
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}
类似资料：