python-Flask（二）：Bootstrap框架

最新推荐文章于 2024-08-27 15:06:34 发布

宋夏寒

最新推荐文章于 2024-08-27 15:06:34 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/qq_43273590/article/details/88360960

版权

1. 什么是Bootstrap?

Bootstrap(http://getbootstrap.com/)是 Twitter开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。
是基于HTML、CSS、Javascript开发的简洁、直观、强悍的前端开发框架，使得Web开发更加敏捷。

内容包含

基本结构：Bootstrap提供了一个带有网络系统、链接样式、背景的基本结构。
CSS：Bootstrap自带以下特性：全局CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网络系统。
包含了十几种可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript插件：包含了十几个自定义的jQuery插件。
作为以一个后台开发者，如果想设计简单的前端页面可以去百度直接搜索Bootstrap官方教程或者菜鸟教程。

2.flask项目

静态文件的导入

两种方法: 任选一种

<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/

消息闪现

1.如何实现闪现?

1). flash消息这种功能，是Flask的核心特性。用于在下一个响应中显示一个消息，让用户知道状态发生了变化。
可以使确认消息，警告或者错误提醒。
flash(“闪现的消息”)
2). 工作原理:
闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据。

2.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 %}

3.Flask中集成bootstrap

1.Flask中如何集成Bootstrap?

使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。

pip install flask-bootstrap

2.Flask-Bootstrap实现了什么?

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

{ % extends “bootstrap/base_other.html” % }

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

块名	说明
doc	整个 HTML 文档
html_attribs	标签的属性
html	标签中的内容
head	标签中的内容
title	标签中的内容
metas	一组标签
styles	层叠样式表定义
body_attribs	标签的属性
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():
    # 如何获取session?
    return  session.get('name')

4). 如何删除?

@app.route('/delete/')
def delete():
    # 如何删除?
    print(session.get('name'))
    session.pop('name')
    print(session.get('name'))
    return  'delete'

案例：判断用户是否登录的装饰器

from _curses import flash
from functools import wraps
from flask import session, redirect, url_for

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

# 主页
@app.route('/')
@is_login
def index():
    return render_template('index.html')


# 登录时保存session信息
@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')