本文主要是介绍python16(Flask-bootstrap)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.Flask
1.了解Flask
1)web应用框架
- Flask是python编写的， Web应用框架；微内核的web框架; —小型网站
- Django:全能型框架; — 大型网站（ERP）
- Tornado
2)什么是Flask
- Flask是一个使用Python编写的轻量级 Web 应用框架。其WSGI工具箱采用Werkzeug，模板引擎则使用Jinja2 。
- Flask也被称为“microframework”，因为它使用简单的核心，用extension增加其他功能。
- Flask没有默认使用的数据库、窗体验证工具。
3)flask框架的创建
-
在pycharm中创建项目project，选择flask，创建成功后程序目录中会自动生成相应的文件和目录
flask框架里面包含有三种文件或目录； -
static目录：里面存储的是静态文件css样式、js样式，字体格式等
-
templates目录：里面存储的是html文件
-
app.py文件：用于编写业务逻辑（定义视图函数
4)需要掌握
- 如何实现简单的web服务网站?
- 什么是路由?
- 什么是视图函数?
# 1. 导入Flask类
from flask import Flask
app = Flask(__name__)# 实现主页
@app.route('/')
def index():return "这是网站的主页"# 基本路由 /login/---访问路径
# 视图函数 告诉app当用户访问/login/这个路径时， 执行login函数的内容， 最终将return的内容返回给客户端;
@app.route('/login/')
def login():return '<h1 style="color:red">login......</h1>'if __name__ == '__main__':# 运行Flask应用# 127.0.0.1----回环地址IP， 每台主机都有====localhost# 如何设置， 使得服务奇特主机的浏览器可以访问? '0.0.0.0'开放所有的IP， 使得可以访问# 如何修改端口? # 可能会报错:Address already in useapp.run(host='0.0.0.0', port=8080)
2.路由与变量规则
1)常用动态路由的规则
url 路由的一部分可以标记为变量 ----> <变量名>
flask 中路由变量可以指定的类型：int、string、float、uuid
实现URL访问：
http://127.0.0.1:5000/123/comments/
http://127.0.0.1:5000/welcome/mangoknight/
# request叫做请求上下文
from flask import Flask
app = Flask(__name__)# 常用动态路由的规则:
# 1). url路由的一部分可以标记为变量, <变量名>;
# 2):. flask中路由变量可以指定的类型: int, string, float, uuid# int类型
@app.route("/<int:id>/comments/")
def comments(id):return "这是一个%s评论页面" %(id)# 字符串类型
@app.route("/welcome/<string:username>/")
def welcome(username):return "<h1>欢迎用户%s登陆网站</h1>" %(username)if __name__ == '__main__':app.run()
2)request
Flask 从客户端收到请求时，要让视图函数能访问一些对象，这样才能处理请求。
请求对象就是一个很好的例子，它封装了客户端发送的 HTTP 请求。即request
解决问题：
访问特殊的URL地址： http://127.0.0.1:5000/query?id=123&name=mangoknight
from flask import Flask, request
app = Flask(__name__)@app.route('/query')
def query():# 获取客户端的用户代理user_agent = request.user_agent# 获取客户端的IP地址req_addr = request.remote_addr# 获取用户请求url地址里面key值对应的value值id = request.args.get('id')name = request.args.get('name')# 查看客户端的HTTP请求方式reqMethod = request.method# 将字符串信息返回给客户端浏览器/其他, 默认以html方式显示， 如果需要换行， 加html的标签<br/>;return """请求的用户代理: %s <br/>请求的客户端Ip： %s <br/>请求的id号: %s <br/>用户名: %s <br/>请求方式: %s""" %(user_agent, req_addr, id, name, reqMethod)if __name__ == '__main__':app.run()
3.登录验证之http请求方法
1)get方法
1.获取页面信息
1）一般情况， 不会直接把html文件内容直接返回，而是将html文件保存到当前的templates目录中：
2）通过render_template方法调用；
默认情况下，Flask 在程序文件夹中的 templates 子文件夹中寻找模板。
2.可以提交数据信息，但是数据不安全
eg：http://127.0.0.1:5000/login/?username=root&password=redhat
from flask import Flask, render_template, request, redirectapp = Flask(__name__)
@app.route('/')
def index():return "<h1>主页</h1>"@app.route('/login/')
def login():# 一般情况， 不会直接把html文件内容直接返回；# 而是将html文件保存到当前的templates目录中；# 1). 通过render_template方法调用;# 2). 默认情况下,Flask 在程序文件夹中的 templates 子文件夹中寻找模板。return render_template('login.html')@app.route('/login2/')
def login2():# 获取用户输入的用户名username = request.args.get('username', None)password = request.args.get('password', None)# 逻辑处理， 用来判断用户和密码是否正确;if username == 'root' and password == 'redhat':# 重定向到指定路由；return redirect('/')# return "登录成功"else:return "登录失败"if __name__ == '__main__':app.run()from flask import Flask, request, render_template, redirect
app = Flask(__name__)@app.route('/')
def index():return "这是主页"# 默认路由只支持get方法， 如何指定接受post方法?
@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':# 难点: post请求提交的数据如何获取?print(request.form)username = request.form.get('username', None)password = request.form.get('password', None)# 如果用户名和密码正确， 跳转到主页;if username == 'root' and password == 'redhat':return redirect('/')# 如果登录不正确， 则警告红色信息;还是在登录页面;else:# 可以给html传递变量return render_template('login_post.html',errMessages="用户名或者密码错误")else:return render_template('login_post.html')@app.errorhandler(404)
def page_not_found(e):return render_template("404.html"), 404@app.errorhandler(500)
def internal_server_error(e):return render_template("500.html"), 500
if __name__ == '__main__':app.run()在templates目录中创建 login.html 文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1><!--将form表单提交的数据传输给/login2/这个路由-->
<form action="/login/"><!--相当于key值， 输入的数据相当于value值;-->用户： <input type="text" placeholder="用户名" name="username"><br/>密码: <input type="password" placeholder="密码" name="password"><br/><input type="submit" value="登录"></form>
</body>
</html>
登录成功后则不显示用户名和密码，保证了数据的安全
2)post方法并自定义错误页面
提交服务端需要的请求信息，有利于数据的安全性
from flask import Flask, request, render_template, redirect
app = Flask(__name__)@app.route('/')
def index():return "这是主页"# 默认路由只支持get方法， 如何指定接受post方法?
@app.route('/login/', methods=['GET', 'POST'])
def login():if request.method == 'POST':# 难点: post请求提交的数据如何获取?print(request.form)username = request.form.get('username', None)password = request.form.get('password', None)# 如果用户名和密码正确， 跳转到主页;if username == 'root' and password == 'redhat':return redirect('/')# 如果登录不正确， 则警告红色信息;还是在登录页面;else:# 可以给html传递变量return render_template('login_post.html',errMessages="用户名或者密码错误")else:return render_template('login_post.html')@app.errorhandler(404)
def page_not_found(e):return render_template("404.html"), 404@app.errorhandler(500)
def internal_server_error(e):return render_template("500.html"), 500
if __name__ == '__main__':app.run()
在templates目录中创建 login_post.html 文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1><!--将form表单提交的数据传输给/login2/这个路由-->
<form action="/login/" method="post"><!--相当于key值， 输入的数据相当于value值;-->用户： <input type="text" placeholder="用户名" name="username"><br/>密码: <input type="password" placeholder="密码" name="password"><br/><input type="submit" value="登录"><span style="color: red">{{ errMessages }}</span></form>
</body>
</html>
登录成功，则返回主页；登录失败，则警告红色信息：
#自定义错误页面
1.为什么要自定义错误页面?
如果你在浏览器的地址栏中输入了不可用的路由，那么会显示一个状态码为 404 的错误页面。现在这个错误页面太简陋、平庸，所以你可以根据自己的喜好自定义错误页面。
2.如何自定义错误页面?
像常规路由一样，Flask 允许程序使用基于模板的自定义错误页面。
最常见的错误代码有两个：
404：客户端请求未知页面或路由时显示；
500：有未处理的异常时显示。
3.自定义错误页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: red">404</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 style="color: green"> 服务器正忙， 请稍后再试</h1>
</body>
</html>
2.模板引擎Jinja2
1. 什么是Jinja2模板引擎?
1.python的Web开发中， 业务逻辑(实质就是视图函数的内容)和页面逻辑(html文件)分开的， 使得代码的可读性增强， 代码容易理解和维护；
2.模板渲染: 在html文件中，通过动态赋值 ，将重新翻译好的html文件(模板引擎生效) 返回给用户的过程。
3.其他的模板引擎: Mako, Template, Jinja2
2. 语法
1) Jinja2变量显示语法: {{ 变量名 }}
完整的过滤器查看位置: http://jinja.pocoo.org/docs/templates/#builtin-filters
Jinja2变量内置过滤器:
-
safe： 渲染值时不转义，即将html格式的字符串转换成html文件
-
capitalize： 把值的首字母转换成大写,其他字母转换成小写
-
lower： 把值转换成小写形式
-
upper： 把值转换成大写形式
-
title： 把值中每个单词的首字母都转换成大写
-
trim： 把值的首尾空格去掉
-
striptags： 渲染之前把值中所有的 HTML 标签都删掉
自定义过滤器： -
定义一个函数，用来处理传入html的数据
-
将该函数添加到默认过滤器中，第一个参数时定义好的函数名，第二个参数为用于html文件中的过滤器别名
app.add_template_filter(参数1, 参数2)
如何自定义过滤器?
from flask import Flask, render_template
app = Flask(__name__)class User(object):def __init__(self, name, age):self.name = nameself.age = agedef __str__(self):return "<User: %s>" %(self.name)@app.route('/')
def index():message = " this is a Message "li = ['fentiao', 'fensi', 'fendai']info = {'name': 'fentiao','age':10}fentiao = User(name="粉条", age=5)tags = "<h1>hello world</h1>"return render_template('06_index.html',message=message,names = li,info=info,fentiao=fentiao,tags = tags)@app.route('/users/')
def users():usersinfo = [('user%s' %(i), "password%s" %(i)) for i in range(100)]return render_template('06_users.html',usersinfo = usersinfo)@app.route("/macro/")
def macro():return render_template('06_macro.html')@app.route('/extends/')
def extends():return render_template('06_use_block.html')
# **********************自定义过滤器******************************
# 定义一个函数
def format_data(s):return "这是一个过滤器：" + s
# 将该函数添加到默认过滤器中;
app.add_template_filter(format_data, 'fmt')if __name__ == '__main__':app.run()
在index.html中写过滤器：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p>{{ message | fmt}}</p>
<p>{{ message | lower}}</p>
<p>{{ message | upper}}</p>
<p>{{ message | title}}</p>
<p>{{ message | capitalize}}</p>
<p>{{ names }}</p>
<p>{{ info }}</p>
<p>{{ fentiao }}</p>
<p>{{ tags | striptags }}</p>
{{ tags | safe }}</body>
</html>这是一个过滤器： this is a Messagethis is a messageTHIS IS A MESSAGEThis Is A Messagethis is a message['fentiao', 'fensi', 'fendai']{'name': 'fentiao', 'age': 10}<User: 粉条>hello world
hello world
2)for循环:
{% for i in li%}{% endfor %}
3)if语句
{% if user == 'westos'%}{% elif user == 'hello' %}{% else %}{% endif%}
*4)宏的操作====相当于函数*
- 如何定义宏?
<!--相当于python里面的定义函数, 后面使用的场景: 分页显示-->
{% macro render(id) %}<h1>hello world {{ id }}</h1>
{% endmacro %}
- 如何调用宏?
<!--调用定义好的宏(类似于python中的函数)-->
{{ render(1) }}
{{ render(2) }}
{{ render(3) }}
5)include包含操作
如何使用:
{% include "06_inclued.html"%}
6)模板的继承
一般网站的导航栏和底部不会变化， 为了避免重复编写导航栏信息;
-
如何定义模板?
block所占的位置的内容是可以改变的，当继承该模板时，可通过block填写内容{% block title %}
{% endblock %}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>{% block title %} {% endblock %}</title></head><body><div style="width: 100px; height: 200px" > 这是导航栏</div>{% block body %}hello{% endblock %}<div style="width: 100px; height: 200px" >这是底部</div></body></html>
- 如何继承基模板?
{% extends '06_base.html'%}{% block title %}继承案例
{% endblock %}{% block body %}
<span style="color: green">这是最新填的block内容</span>{% endblock %}3.Bootstrap前端框架
1.什么是Bootstrap框架?
Bootstrap是美国Twitter公司推出的一个用于前端开发的开源工具包。它由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
2.flask项目静态文件的导入
用Bootstrap框架写HTML之前，先了解几个知识点：
导入静态文件
两种方法：
# 通过路径导入
<link href="/static/css/bootstrap.css" rel=“stylesheet”>
# 通过url_for函数导入
<link href="{{ url_for(‘static’, filename=“css/bootstrap.css”) }}" rel=“stylesheet”>
3.flask链接的导入
两种方法：
# 直接查找路由
<a href="/register/">注册</a># 根据视图函数动态的去查找路径
<a href="{{ url_for(‘login’) }}">登录</a>
<a href="{{ url_for(‘delete’, username=“root”) }}">删除</a> == /delete/root/
4.消息闪现
1)如何实现闪现?
flash 闪现消息这种功能，是Flask的核心特性。用于在下一个响应中显示一个消息，让用户知道状态发生了变化。可以确认消息，警告或者错误提醒。
2)工作原理
闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据。
3)使用方法
flash(“闪现的消息”)
4)html代码中如何调用闪现内容?
仅调用flash()函数并不能把消息显示出来，程序使用的模板要渲染这些消息；Flask把get_flashed_messages()函数开放给模板，用来获取并渲染消息
5.用户session信息的保存
cookie：客户端浏览器的缓存
session：服务端缓存
1)session的作用
Session 对象存储特定用户会话所需的属性及配置信息。
1.当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。
2.当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。
3.当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。
from flask import Flask, session
import random
app = Flask(__name__)
app.config['SECRET_KEY'] = random._urandom(24)
# 设置是24位的字符， 每次运行服务器的secret_key都是不同的，
# 服务器重启后会清除上一次存储的session信息值;
2)设置session值
@app.route('/')
def index():# 如何设置session的key-value值session['name'] = 'westos'return "hello world"
3)获取session
@app.route('/get/')
def get():return session.get('name')
4)删除session
@app.route('/delete/')
def delete():print(session.get('name'))session.pop('name')print(session.get('name'))return 'delete'
6.应用 —— 实现用户注册， 用户登录， 用户注销， 用户查看
1)首先创建一个Flask项目
File ----> New Project ----> Flask
2.在 app.py 中写需要实现基本路由和视图函数
代码：
from functools import wraps
from flask import Flask, render_template, request, redirect, flash, url_for, sessionusers = [{'username': 'root','password': 'root'}
]app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'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 wrapperdef is_admin(f):"""用来判断用户是否为管理员"""@wraps(f)def wrapper(*args, **kwargs):# 如果是管理员，则可以访问；# 如果不是管理员，则跳转到登录界面登录管理员账号；if session.get('user', None) == 'root':return f(*args, **kwargs)else:flash('只有管理员root才能访问%s' % (f.__name__))return redirect(url_for('login'))return wrapper@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))# 出现一个闪现信息flash('用户%s已经注册成功，请登录......' % (username))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'] = usernamereturn redirect(url_for('index'))else:flash('用户名或密码错误,请重新登录......')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))# 删除成功， 跳转到/list/路由中return redirect(url_for('list'))@app.route('/list/')
@is_login
@is_admin
def list():return render_template('list.html', users=users)if __name__ == '__main__':app.run()
3)在 templates目录下创建 xxx.html 文件实现页面
将页面导航栏、页面样式和闪现信息写在继承模板 base.html 中：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--导入本地的Bootstrap样式, 也可以倒入网络上的；--><title>西部开源-{% block title %} {% endblock %}</title><link href="/static/css/bootstrap.css" rel="stylesheet"><style>.navbar {font-size: 130%;background: whitesmoke;margin-top: 10px;padding-top: 5px;box-shadow: 2px 2px 2px 2px lightgray;height: 60px;}</style></head>
<body><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"><spanaria-hidden="true">×</span></button>{{ item }}</div>
{% endfor %} {% block content %}{% endblock %}<!--导入外部的js样式;-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body>
</html>
4)主页页面 index.html
{% extends 'base.html' %}{% block title %} 主页 {% endblock %}{% block content %}<h1>这是主页</h1>{% endblock %}
5)注册页面 register.html
{% extends 'base.html' %}{% block title %} 注册页面 {% endblock %}{% block content %}<!--实现注册界面-->
<div class="container"><div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px"><h1>注册<small>已有帐号<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="请输入用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"></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>
</div>{% endblock %}
**6)登录页面 login.html **
{% extends 'base.html' %}{% block title %} 登录页面 {% endblock %}{% block content %}<!--实现登录界面-->
<div class="container"><div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px"><h1>登录<small>没有帐号？<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="请输入用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"></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>
</div>{% endblock %}
7)用户信息显示页面 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="{{ url_for('delete',username=user.username) }}"class="btn btn-default btn-danger" role="button">删除</a></td></tr>{% endfor %}</table></div></div>{% endblock %}
1.注册帐号
2.登陆帐号
登录成功后，显示主页:
想要查看用户信息时，点击导航栏的用户信息
由于用户信息包含用户的账号和密码，一般只有管理员才有权限查看，所以需要登录管理员账号
登录root用户
删除hello用户
import osfrom flask import Flask, render_template, request, redirect, url_for, flash, session
from functools import wrapsusers = [{'username': 'root','password': 'root'},{'username': 'hello','password': 'root'},]# 实现用户注册， 用户登录， 用户注销， 用户查看;
app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'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 wrapperdef 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'] = usernamereturn 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')if __name__ == '__main__':app.run()4.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实现了什么
1.利用 Jinja2 的模板继承机制，让程序扩展一个具有基本页面结构的基模板，其中就有用来引入 Bootstrap 的元素。
# 在页面逻辑的基模板base.html中
{ % extends “bootstrap/base_other.html” % }
2.基模板中定义了可再衍生模板中重定义的块。
块名 说 明doc 整个 HTML 文档html_attribs <html> 标签的属性html <html> 标签中的内容head <head> 标签中的内容title <title> 标签中的内容metas 一组 <meta> 标签styles 层叠样式表定义body_attribs <body> 标签的属性body <body> 标签中的内容navbar 用户定义的导航条content 用户定义的页面内容scripts 文档底部的 JavaScript 声明
3.程序需要向已经有内容的块中添加新内容，必须使用 Jinja2 提供的 super() 函数。
{% block scripts %}
{{ super() }}
<script type=“text/javascript” src=“my-script.js”>
{% endblock %}
4.实现用户注册， 用户登录， 用户注销， 用户查看
用集成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"><spanaria-hidden="true">×</span></button>{{ item }}</div>{% endfor %}{% endblock %}
4.集成的web表单处理
flask-wtf
避免重复操作，表单操作很多；
防止表单遭遇跨站请求伪造(csrf ==== cross-site request forgery)；
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就对应， SubmitField就对应等等。 - 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 可选多个值的下拉列表
4)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) }}
5)wtf实现注册页面
在 forms.py 文件中定义一个关于表单的类：
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectField, SelectMultipleField
from wtforms.validators import DataRequired, Length, EqualTo, Email, Regexpclass 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也可以实现单选按钮，但是不美观，推荐用 SelectFieldgender = 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 RegisterFormusers = [{'username': 'root','password': 'root'}
]app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():# 实例化表单，将来传递到前端，进行生成对应的htmlform = 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 %}
6)集成邮件发送
发送邮件的时候需要设置什么?
发件人账户
密码
收件人
邮件标题
邮件正文
QQ邮件服务器的域名或者IP
发送邮件过程（给qq邮箱发送邮件）：
在 forms.py 文件中定义一个关于表单的类：
from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectField, TextAreaField
from wtforms.validators import DataRequiredclass 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, Messagefrom forms import MailFormapp = 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.datatry: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>
实现发送邮件的页面，发送邮件（为方便观察实验结果，发送邮件给自己即可）：
7)flask-登录注册时发送邮件
业务逻辑：
定义发送邮件函数：
def send_mail(send_to,filename,**kwargs):mail=Mail(app)with app.app_context():msg=Message(subject='测试',recipients=send_to,sender='1602923758@qq.com',html=render_template(filename+'.html',info=kwargs))mail.send(msg)注册：
@app.route('/register/',methods=['GET','POST'])
def register():if request.method=='POST':username = request.form.get('username')password=request.form.get('password')for user in users:if user['username'] == username:flash('用户已存在，请重试！')return redirect(url_for('register'))else:users.append({'username':username,'password':password})send_mail(send_to=['1602923758@qq.com'], filename='reg_msg', user=username)flash('注册成功，请登录！')return redirect(url_for('login'))else:return render_template('register.html')
登录：
@app.route('/login/',methods=['GET','POST'])
def login():if request.method=='POST':username=request.form.get('username')password=request.form.get('password')for user in users:if user['username']==username and user['password']==password:session['user']=username# 获取客户端的主机名hostname=request.host# 获取客户端的ip地址user_addr = request.remote_addr# 获取当前时间login_time = datetime.strftime(datetime.now(),'%Y-%m-%d,%H:%M:%S')send_mail(send_to=['1602923758@qq.com'],filename='log_msg',user=username,addr=user_addr,log_time=login_time,host=hostname)flash('用户登录成功')return redirect(url_for('index'))else:flash('用户或密码错误，登录失败，请重试！')return redirect(url_for('login'))else:return render_template('login.html')
页面逻辑：
基模板：
{% extends 'bootstrap/base.html' %}{% block style %}
{{ super() }}<link href="{{ url_for('static',filename='css/main.css') }}" rel="stylesheet">{% 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="#">Brand</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="{{ url_for('index') }}">主页 <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></ul></div><!-- /.navbar-collapse --><ul class="nav navbar-nav navbar-right">{% if session.get('user',None) %}<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('upload') }}">上传头像</a></li><li><a href="{{ url_for('logout') }}">注销</a></li></ul></li>{% else %}<li><a href="{{ url_for('login') }}">登录</a></li><li><a href="{{ url_for('register') }}">注册</a></li>{% endif %}</ul></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"><spanaria-hidden="true">×</span></button>{{ item }}</div>
{% endfor %}
{% endblock %}注册页面：
{% extends 'base.html' %}
{% block title %}注册{% endblock %}{% block content %}<div class="container"><div class="col-lg-8 col-lg-offset-2"><h1>注册<small>已有帐号<a href="{{ url_for('login') }}">登录</a></small></h1></div></div><form action="{{ url_for('register') }}" method="post"><div class="form-group"><label for="exampleInputEmail1">用户名</label><input name="username" type="text" class="form-control" id="exampleInputEmail1"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="form-control" id="exampleInputPassword1"></div><button type="submit" class="btn btn-default">注册</button></form>
{% endblock %}
登录页面：
{% extends 'base.html' %}{% block title %}
登录页面
{% endblock %}{% block content %}
<div class="container">
<div class="col-lg-8 col-lg-offset-2"><h1>登录<small>没有帐号?<a href="{{ url_for('register') }}">注册</a></small></h1></div>
</div><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" ></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input name="password" type="password" class="form-control" id="exampleInputPassword1" ></div><div class="checkbox"><label><input type="checkbox"> 记住密码</label></div><button type="submit" class="btn btn-default">登录</button>
</form>{% endblock %}邮件页面：
注册:
<h1>{{ info.user }}注册成功</h1>
登录:
<h1>主机名:{{ info.host }},IP:{{ info.addr }}在{{ info.log_time }}时间登录{{ info.user }}用户</h1>
这篇关于python16(Flask-bootstrap)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
