python-flask-bootstrap

最新推荐文章于 2023-10-03 18:25:30 发布

hzyuhz

最新推荐文章于 2023-10-03 18:25:30 发布

阅读量322

点赞数

分类专栏： python web

本文链接：https://blog.csdn.net/hzyuhz/article/details/88345079

版权

这篇博客详细介绍了如何利用Python的Flask框架结合Bootstrap，实现用户注册、登录、注销和信息查看等功能。首先解释了Bootstrap框架的作用，然后逐步讲解了导入静态文件、链接、消息闪现和session管理等步骤。接着，博主展示了如何在app.py中定义路由和视图函数，并通过继承base.html模板来设置页面导航和样式。最后，提到了index、register、login及list等关键页面的实现。

摘要由CSDN通过智能技术生成

什么是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

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

# 2. Flask中如何集成Bootstrap?
    使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。
    from flask.ext.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 %}

导入静态文件

两种方法：

    <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 对象存储特定用户会话所需的属性及配置信息。

	当用户在应用程序的 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 wo