Flask_Bootstrap前端框架

Bootstrap前端框架

什么是Bootstrap框架?

  • Bootstrap是美国Twitter公司推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
  • Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

学习网站:

应用

用Bootstrap框架写HTML之前,先了解几个知识点:

导入静态文件

两种方法:

  • <link href="/static/css/bootstrap.css" rel=“stylesheet”>
  • <link href="{{ url_for(‘static’, filename=“css/bootstrap.css”) }}" rel=“stylesheet”>
导入链接

两种方法:

  • 直接查找路由
    <a href="/register/">注册</a>

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

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

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

  • 使用方法
    flash(“闪现的消息”)

  • html代码中如何调用闪现内容?
    仅调用flash()函数并不能把消息显示出来,程序使用的模板要渲染这些消息;Flask把get_flashed_messages()函数开放给模板,用来获取并渲染消息

{% for item in get_flashed_messages() %}    
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        {{ item }}
    </div>
{% endfor %}
用户session信息的保存

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

  • 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信息值;
  • 设置session值

@app.route('/')
def index():
     # 如何设置session的key-value值
     session['name'] = 'westos'
     return "hello world"
  • 获取session

@app.route('/get/')
def get():
    return  session.get('name')
  • 删除session

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

应用 —— 实现用户注册, 用户登录, 用户注销, 用户查看

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>

主页页面 index.html :

{% extends 'base.html' %}

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

{% block content %}

    <h1>这是主页</h1>

{% endblock %}

注册页面 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 %}

登录页面 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 %}

用户信息显示页面 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 %}

首先注册一个账号:
在这里插入图片描述
登录注册的账号:
在这里插入图片描述
注意,导航栏下面有一行闪现信息

登录成功后,显示主页(主页比较简陋):
在这里插入图片描述

想要查看用户信息时,点击导航栏的用户信息
在这里插入图片描述
由于用户信息包含用户的账号和密码,一般只有管理员才有权限查看,所以需要登录管理员账号

登录root用户,删除hello用户

在这里插入图片描述
点击删除按钮,立即删除hello用户,并闪现一条消息
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值