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">×</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">×</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用户，并闪现一条消息
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
