淘先锋技术网

首页 1 2 3 4 5 6 7

python--Flask中集成Bootstrap

1. 什么是Bootstrap?

Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,
它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容
所有现代 Web 浏览器。

2. Flask中如何集成Bootstrap?

使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

3. Flask-Bootstrap实现了什么?

利用 Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中
就有用来引入 Bootstrap 的元素。

 { % extends "bootstrap/base_other.html" % }

基模板中定义了可在衍生模板中重定义的块。

 块名                    说 明
    doc                     整个 HTML 文档
    html_attribs            <html> 标签的属性
    html <html>             标签中的内容
    head <head>             标签中的内容
    title <title>           标签中的内容
    metas                   一组 <meta> 标签
    styles                  层叠样式表定义
    body_attribs            <body> 标签的属性
    body                    <body> 标签中的内容
    navbar                  用户定义的导航条
    content                 用户定义的页面内容
    scripts                 文档底部的 JavaScript 声明

程序需要向已经有内容的块中添加新内容,必须使用 Jinja2 提供的 super() 函数。

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

用户session信息的保存

cookie: 客户端浏览器的缓存;
session: 服务端缓存;

1). session的作用是什么?

Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，
存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的
Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后，
服务器将终止该会话。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). 如何删除?

@app.route('/delete/')
def delete():
    print(session.get('name'))
    session.pop('name')
    print(session.get('name'))
    return  'delete'

学习网站：

官方中文文档: https://v3.bootcss.com/
菜鸟教程案例: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

应用

用Bootstrap框架写HTML之前，先了解几个知识点：
导入静态文件

两种方法：

<link href="/static/css/bootstrap.css" target="_blank" rel="external nofollow"  rel=“stylesheet”>
<link href="{{ url_for(‘static’, filename=“css/bootstrap.css”) }}" target="_blank" rel="external nofollow"  rel=“stylesheet”>

导入链接

两种方法：

直接查找路由
<a href="/register/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注册</a>

根据视图函数动态的去查找路径
<a href="{{ url_for(‘login’) }}" target="_blank" rel="external nofollow" >登录</a>
<a href="{{ url_for(‘delete’, username=“root”) }}" target="_blank" rel="external nofollow" >删除</a> == /delete/root/

消息闪现

如何实现闪现?

  • flash 闪现消息这种功能，是Flask的核心特性。用于在下一个响应中显示一个消息，让用户知道状态发生了变化。可以确认消息，警告或者错误提醒。

工作原理

  • 闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据。

使用方法

  • flash(“闪现的消息”)

html代码中如何调用闪现内容?

  • 仅调用flash()函数并不能把消息显示出来，程序使用的模板要渲染这些消息；Flask把get_flashed_messages()函数开放给模板，用来获取并渲染消息

{% for item in get_flashed_messages() %}

× {{ item }}
{% endfor
%}

创建Flask框架

在 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 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'] = '976131979'
app.config['MAIL_PASSWORD'] = "zqzjbjvkjzvpbcgd"


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='[email protected]',
                      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()

在 templates 目录下创建 xxx.html 文件实现页面：
将页面导航栏、页面样式和闪现信息写在继承模板 base.html 中：

{% extends 'bootstrap/base.html' %}

{% block styles %}
    {#  先继承父类的css样式导入   #}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" target="_blank" rel="external nofollow" >
{% 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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >主页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="{{ url_for('list') }}" target="_blank" rel="external nofollow" >用户信息</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >监控</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >新闻</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >音乐</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >电影</a></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">
                    {#       分类讨论:
                            1. 如果没有登录， 显示登录和注册按钮；
                            2. 如果登录成功， 显示用户名称和注销按钮

            #}
                    {% if not session.user %}
                        <li><a href="{{ url_for('login') }}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >登录</a></li>
                        <li><a href="{{ url_for('register') }}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注册</a></li>
                    {% else %}
                        <li class="dropdown">
                            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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') }}" target="_blank" rel="external nofollow" >注销</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 %}

主页页面 index.html ：

{% extends 'base.html' %}


{% block title %} 主页 {% endblock %}



{% block content %}

<h1>这是主页</h1>

{% 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/" target="_blank" rel="external nofollow" >登录</a>#}
                <a href="{{ url_for('login') }}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >登录</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 %}

登录页面 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/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注册</a>#}
                    <a href="{{ url_for('register') }}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注册</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 %}

用户信息显示页面 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 }}/" target="_blank" rel="external nofollow"  class="btn btn-default btn-danger " role="button">删除</a>#}
                            <a href="{{ url_for('delete', username=user.username) }}" target="_blank" rel="external nofollow" 
                               class="btn btn-default btn-danger " role="button">删除</a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}