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 use
    app.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, redirect

app = 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 = name
        self.age = age

    def __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 Message

this is a message

THIS IS A MESSAGE

This Is A Message

this 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, session

users = [
    {
        '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 wrapper


def 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'] = username
                return 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"><span
                aria-hidden="true">&times;</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 os

from flask import Flask, render_template, request, redirect, url_for, flash, session
from functools import wraps

users = [
    {
        '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 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')


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"><span
                    aria-hidden="true">&times;</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, 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 %}

6)集成邮件发送
发送邮件的时候需要设置什么?
发件人账户
密码
收件人
邮件标题
邮件正文
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>

实现发送邮件的页面，发送邮件（为方便观察实验结果，发送邮件给自己即可）：

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"><span
                aria-hidden="true">&times;</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>