flask从入门到精通之flask-bootstrap的使用

木易森林      2022-02-10     477

关键词:

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

  要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展,简化集成的过程。Flask-Bootstrap 使用pip安装:

pip install flask_bootstrap

  Flask 扩展一般都在创建程序实例时初始化,下面是Flask_Bootstrap的初始化方法

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

  初始化Flask-Bootstrap 之后,就可以在程序中使用一个包含所有Bootstrap 文件的基模板。这个模板利用Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入Bootstrap 的元素。

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

{%block title %}Flask{% endblock %}

{%block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            data-toggle="collapse" data-target=".navbar-collapse">
                <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="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
</div>
{% endblock %}

  Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html, 从而实现模板继承。Flask-Bootstrap 中的基模板提供了一个网页框架,引入了Bootstrap 中的所有CSS 和JavaScript 文件。基模板中定义了可在衍生模板中重定义的块。block 和endblock 指令定义的块中的内容可添加到基模板中。上面这个user.html 模板定义了3 个块,分别名为title、navbar 和content。这些块都是基模板提供的,可在衍生模板中重新定义。title 块的作用很明显,其中的内容会出现在渲染后的HTML 文档头部,放在<title> 标签中。navbar 和content 这两个块分别表示页面中的导航条和主体内容。在这个模板中,navbar 块使用Bootstrap 组件定义了一个简单的导航条。content 块中有个<div> 容器,其中包含一个页面头部。之前版本的模板中的欢迎信息,现在就放在这个页面头部。运行结果如下图:    

Flask-Bootstrap 的base.html 模板还定义了很多其他块,都可在衍生模板中使用,下表列出了所有可用的块:

 

块名   说明
doc 整个html文档
html_attribs html标签属性
html   html标签中的内容
head head标签中的内容
title title标签中的内容
metas 一组meta标签
styles 层叠样式表定义
body_attribs body标签的属性
body body标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的JavaScript 声明

  上表中的很多块都是Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供的super() 函数。例如,如果要在衍生模板中添加新的JavaScript 文件,需要这么定义scripts 块:

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

 

flask从入门到精通之模型定义

  模型这个术语表示程序使用的持久化实体。在ORM中,模型一般是一个Python类,类中的属性对应数据库表中的列。  Flask-SQLAlchemy创建的数据库实例为模型提供了一个基类以及一系列辅助类和辅助函数,可用于定义模型的结... 查看详情

flask从入门到精通之静态文件

  Web程序不是仅由Python代码和模板组成。大多数程序还会使用静态文件,例如HTML代码中引用的图片、JavaScript源码文件和CSS。  在前面的章节中,我们曾检查hello.py程序的URL映射时,其中有一个static路由。这是因为对静态文... 查看详情

flask从入门到精通之链接的使用

  在Web开发中,任何具有多个路由的程序都需要可以连接不同页面的链接,例如导航条。  在模板中直接编写简单路由的URL链接不难,但对于包含可变部分的动态路由,在模板中构建正确的URL就很困难。而且,直接编写URL会... 查看详情

flask从入门到精通之大型程序的结构一

  尽管在单一脚本中编写小型Web程序很方便,但这种方法并不能广泛使用。程序变复杂后,使用单个大型源码文件会导致很多问题。不同于大多数其他的Web框架,Flask并不强制要求大型项目使用特定的组织方式,程序结构的组... 查看详情

flask从入门到精通之自定义错误界面

  如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404的错误页面。现在这个错误页面太简陋、平庸,而且样式和使用了Bootstrap的页面不一致。  像常规路由一样,Flask允许程序使用基于模板的自定... 查看详情

flask框架从入门到精通之扩展脚本(十五)(代码片段)

一、概况通过使用Flask-Script扩展,我们可以在Flask服务器启动的时候,通过命令行的方式传入参数。而不仅仅通过app.run()方法中传参,比如我们可以通过pythonscript_flask.pyrunserver--hostip地址,告诉服务器在哪个网络接... 查看详情

flask框架从入门到精通之异常处理(代码片段)

知识点:1、abort()函数2、自定义状态码一、概况我们在写视图函数时,会对前端传递过来的参数进行校验,如果校验不过,会给前端返回一些特定的异常信息。在Flask中,abort()函数可以立即终止视图函数的执... 查看详情

flask框架从入门到精通之session(代码片段)

知识点:1、Session一、概况上一篇,我们说到cookie,除了cookie外还有一个叫session的机制。session也是可以存储一些信息的。对于一些敏感、重要的信息,我们可以存储到session中。谁也不希望自己的余额、银行卡密... 查看详情

flask框架从入门到精通之模型查询(十三)(代码片段)

知识点:1、模型查询一、查询其实我们对模型的主要操作就是查询,在Flask-SQLAlchemy中,支持了很多的查询方法。查询操作是通过query对象操作数据。最基本的查询是返回表中所有数据,可以通过过滤器进行更精确... 查看详情

flask框架从入门到精通之蓝图(二十四)(代码片段)

知识点:1、蓝图一、概况从前面的知识点能看出来,我们所有的视图函数都写在了一个文件当中,当我们的业务越来复杂的时候。视图函数也会变得越来越多,导致阅读不方便,维护起来困难等难题。比如下... 查看详情

flask从入门到精通之flask-moment本地化日期和时间

  Moment.js是一个简单易用的轻量级JavaScript日期处理类库,提供了日期格式化、日期解析等功能。它支持在浏览器和NodeJS两种环境中运行。此类库能够将给定的任意日期转换成多种不同的格式,具有强大的日期计算功能,同时... 查看详情

flask从入门到精通之大型程序的结构二

一.程序包  程序包用来保存程序的所有代码、模板和静态文件。我们可以把这个包直接称为app(应用),如果有需求,也可使用一个程序专用名字。templates和static文件夹是程序包的一部分,因此这两个文件夹被移到了app中。... 查看详情

flask框架从入门到精通之模型迁移操作(十六)(代码片段)

知识点:1、模型迁移一、概况在Django框架开发过程中,我们对数据库字段添加或删除,直接修改模型类,然后进行迁移可以了,非常方便。我们也想让Flask框架支持这样的操作,就需要使用Flask-Migrate扩展&#... 查看详情

flask框架从入门到精通之模板表单(二十)(代码片段)

知识点:1、WTF使用一、概况当前端使用form表单进行参数传递时候,前端一般都会用js来校验用户输入的参数是否合法。作为后端,不能依赖前端的校验。要在前端校验的基础上在进行一遍校验,防止程序出现异常... 查看详情

flask框架从入门到精通之模型创建与添加(代码片段)

知识点:1、模型类创建2、模型类关系3、模型数据添加一、概况在Flask-SQLAlchemy中,插入、修改、删除操作,均由数据库会话管理。会话用db.session表示。在准备把数据写入数据库前,要先将数据添加到会话中然后... 查看详情

flask框架从入门到精通之模型关系(十七)(代码片段)

知识点:1、模型关系参照一、概况在数据库中,我们知道数据关系大概有如下几种:一对一、一对多、多对多、自关联等。我们模型已经描述过了一对多,那么下面我们在用模型把其它关系也写出来。关系一对一... 查看详情

flask框架从入门到精通之模型关系(十七)(代码片段)

知识点:1、模型关系参照一、概况在数据库中,我们知道数据关系大概有如下几种:一对一、一对多、多对多、自关联等。我们模型已经描述过了一对多,那么下面我们在用模型把其它关系也写出来。关系一对一... 查看详情

flask从入门到精通之使用flask-migrate实现数据库迁移

  在开发程序的过程中,你会发现有时需要修改数据库模型,而且修改之后还需要更新数据库。仅当数据库表不存在时,Flask-SQLAlchemy才会根据模型进行创建。因此,更新表的唯一方式就是先删除旧表,不过这样做会丢失数据... 查看详情