python学习笔记(flask-bootstrap前端框架、flask-wtf)

最新推荐文章于 2024-02-28 18:50:46 发布

mkgdjing

最新推荐文章于 2024-02-28 18:50:46 发布

阅读量1.4k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/mkgdjing/article/details/88313812

版权

本文介绍了如何在Python的Flask框架中集成Bootstrap前端框架和Flask-WTF库，包括Bootstrap的基本概念、Flask项目导入静态文件、消息闪现、session管理、用户登录验证装饰器以及Flask-WTF的表单处理和邮件发送的实战案例。

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

Bootstrap

什么是Bootstrap框架

Bootstrap是美国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

flask项目静态文件导入

需要先将下载好的bootstrap压缩包内的js、css、font目录移动到static目录下
除了导入下载好的本地静态文件，还可以根据官方中文文档导入url地址

两种方法: 任选一种
    - <link href="/static/css/bootstrap.css" rel="stylesheet">
    - <link href="{
  { url_for('static', filename="css/bootstrap.css") }}"
        rel="stylesheet">

flask链接的导入

两种方法:
    - <a href="/register/">注册</a>
    - <a href="{
  { url_for('login') }}">登录</a>
    # 根据视图函数动态的去查找路径;
    - <a href="{
  { url_for('delete', username="root") }}">删除</a>  === /delete/root/

消息闪现

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

flash(“闪现的消息”)

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

flask中集成bootstrap

flask中如何集成bootstrap

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

    from flask.ext.bootstrap import Bootstrap
    bootstrap = Bootstrap(app)

在业务逻辑app.py中实例化Bootstrap对象，用于继承

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

自定义base.html
继承自集成bootstrap对象中的基模板

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

{% block styles %}
    {#  先继承父类的css样式导入   #}
    {
  { super() }}
    <link rel="stylesheet" href="{
  { url_for('static', filename='css/main.css') }}">
{% 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="#">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 %}
{% endblock %}

用户session信息保存

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

session的作用是什么?

Session 对象存储特定用户会话所需的属性及配置信息。
这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。
当用户请求来自应用程序的Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。
当会话过期或被放弃后，服务器将终止该会话。
Session 对象最常见的一个用法就是存储用户的首选项。

判断用户是否登录成功的装饰器

def is_login(f):
    """用来判断用户是否登录成功"""

    @wraps(f)
    def wrapper(*args, **kwargs):
        # 判断session对象中是否有seesion['user'],
        # 如果包含信息， 则登录成功， 可以访问主页；
        # 如果不包含信息， 则未登录成功， 跳转到登录界面;；
        if session.get('user', None):
            return f(*args, **kwargs)
        else:

最低0.47元/天解锁文章

mkgdjing

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
python学习笔记(flask-bootstrap前端框架、flask-wtf)

Bootstrap什么是Bootstrap框架Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。学习网站:- 官方中文文档: https:...
复制链接

扫一扫