2020-08-24T00:00:00Z

zcj

Flask框架初步 Flask模板

原创后端框架技术 2685 浏览

介绍Jinja2 的模板引擎

Flask 把请求分发到处理注册请求的视图函数。这个视图函数需要访问数据库，在其中添加、更新、删除或查询数据，然后生成响应回送浏览器。这两个过程分别称为业务逻辑和表现逻辑。

把业务逻辑和表现逻辑混在一起会导致代码难以理解和维护。一个构建的HTML 页面，其中由数据库中读取的数据以及必要的HTML 字符串连接在一起。把表现逻辑移到模板中能够提升程序的可维护性。

模板是一个包含响应文本的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中才能知道。使用真实值替换变量，再返回最终得到的响应字符串，这一过程称为渲染。为了渲染模板，Flask 使用了一个名为Jinja2 的强大模板引擎。

一、Jinja2模板引擎

Jinja2 模板就是一个包含响应文本的文件，清单1 是一个 Jinja2 模板。

清单1 templates/index.html:Jinja2 模板

<h1>Hello, {{ name }}!</h1>

模板表示的响应文本中中包含一个变量放入双花括号内{{ name }}表示的动态部分，它的实际值通过渲染模板来替换。

1. 渲染模板

默认情况下，Flask 在程序文件夹中的 templates 子文件夹中寻找模板。把前面定义的模板保存在 templates 文件夹中，并命名为 index.html。

新建一个myapp.py模块文件，程序中的视图函数需要修改一下，以便渲染相应的模板。修改方法参见清单2。

清单2 myapp.py:渲染模板

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = "World"   
    return render_template('index.html', name=name)

@app.route('/user/<name>')
def user(name):
    return render_template('index.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

Flask 提供的 render_template 函数把 Jinja2 模板引擎集成到了程序中。render_template 函数的第一个参数是模板的文件名。随后的参数都是键值对，表示模板中变量对应的实际值。在这段代码中，模板收到一个名为 name 的变量。

清单2中的 name=name 是关键字参数，这类关键字参数很常见，若不熟悉它们的话，可能会觉得迷惑且难以理解。左边的“name”表示参数名，就是模板中使用的占位符；右边的“name”是当前作用域中的变量，表示同名参数的值。

2. 变量

清单1 在模板中使用的{{ name }}结构表示位于双花括号中的表达式的结果{{ 表达式 }}打印到模版输出，它是一种特殊的占位符，告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。

Jinja2 能识别所有类型的变量，甚至是一些复杂的类型，例如列表、字典和对象。在模板中使用变量的一些示例如下:

<p>字典中的值: {{ mydict['key'] }}。</p>
<p>列表中的值: {{ mylist[3] }}。</p>
<p>列表中的值，带有可变索引: {{ mylist[index] }}。</p>
<p>来自对象方法的值: {{ myobj.method() }}。</p>

可以使用过滤器修改变量，过滤器名添加在变量名之后，中间使用竖线分隔。以下模板以首字母大写形式显示变量 name 的值:

Hello, {{ name|capitalize }}

部分常用Jinja2变量过滤器：

safe ：渲染值时不转义；
capitalize ：把值的首字母转换成大写，其他字母转换成小写；
lower ：把值转换成小写形式；
upper ：把值转换成大写形式；
title ：把值中每个单词的首字母都转换成大写；
trim ：把值的首尾空格去掉；
striptags ：渲染之前把值中所有的 HTML 标签都删掉。

3. 控制结构

Jinja2 提供了多种控制结构，可用来改变模板的渲染流程。控制结构使用花括号和百分号组成的起始分隔符{%与终止分隔符%}表示一种逻辑语句的结构{% ... %}。

① 条件语句结构：

展示了如何在模板中使用条件控制语句，创建了一个由条件语句控制的结构。 {％....％}是占位符，所有条件都从这些占位符开始执行:

{% if name %}
    您好, {{ name }}!
{% else %}
    您好, 朋友!
{% endif %}

使用{% if ... %}用于条件开始，使用{% else %}用于‘否则’，使用{% endif %}结束条件语句逻辑。

② 循环语句结构：

在模板中渲染一组元素，使用 for 循环实现这一需求。使用for循环遍历comments并使用此占位符{{ comment }}打印输出到模板 :

<ul>
    {% for comment in comments %}   {# 注意comments为集合对象 #}   
        <li>{{ comment }}</li> 
    {% endfor %}
</ul>

这里使用的{# ... #}结构用于未包含在模板中的注释。循环开始语句使用{% for .. in .. %}，循环结束语句使用{% endfor %}。

③ 宏语句结构：

支持宏。宏类似于 Python 代码中的函数。宏开始语句使用{% macro 宏名 %}，宏结束语句使用{% endmacro %}。

{% macro render_comment(comment) %} 
    <li>{{ comment }}</li>
{% endmacro %}
<ul>
    {% for comment in comments %}
        {{ render_comment(comment) }} 
    {% endfor %}
</ul>

为了重复使用宏，可以将其保存在单独的文件中，然后在需要使用的模板中导入:

{% import 'macros.html' as macros %} 
<ul>
    {% for comment in comments %}
        {{ macros.render_comment(comment) }}
    {% endfor %}
</ul>

④ 包含语句结构：

需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有模板中，以避免重复，包含语句使用{% include ... %}:

{% include 'common.html' %}

⑤ 继承语句结构：

模板继承类似于 Python 代码中的类继承。Jinja 2支持模板继承，这是任何模板引擎中最强大，最有用的功能之一。这意味着一个模板可以从另一个模板继承。

如今，网站对不同页面需要相同的布局。几乎每个网站的页面上都有一个导航栏。为了不重复代码，使用继承功能，因为它可以节省大量时间并减少工作量。

基模板包含所有其他模板共有的基本布局，从基模板可扩展或导出其他页面的布局。首先，在清单3中创建一个名为 base.html 的基模板:

清单3 基模板base.html

<html>
    <head>
      {% block head %}
        <title>{% block title %}{% endblock %} - 爱校码</title>
      {% endblock %}
    </head>
    <body>
      {% block body %}
      {% endblock %}
    </body>
</html>

模板继承使用{％block ...％}与{% endblock %}语句来告诉模板引擎通过子模板覆盖站点的公共元素。 base.html是父模板，它是基本布局，可以使用子模板在其上进行修改，该子模板用于用包含内容的块block({％block ...％} 内容 {% endblock %})来填充父模板的空的块block({％block ...％} {% endblock %})，当然也可以覆盖父模板非空的块block。子模板要想对父模板的非空的块block继承，并添加特有的内容时，在子模板的块内的开始部分加入{{ super() }}即可。

block语句定义的元素块可在衍生模板中修改。在清单3中，定义了名为 head、title 和body 的块block。注意，title 包含在 head 中。清单4是基模板的衍生模板：

清单4 衍生模板index.html

 <!-- “子模板” -->
{% extends "base.html" %}
{% block title %}首页{% endblock %} 
{% block head %}
     {{ super() }}
     <style>
     </style>
{% endblock %}
{% block body %}
    <h1>Hello, {{ name }}!</h1> 
{% endblock %}

extends 语句指令声明该模板继承自 base.html。在 extends 指令之后，基模板中的 3 个块被重新定义，模板引擎会将其插入适当的位置。注意新定义的 head 块，在基模板中其内容不是空的，所以使用 super() 获取原来的内容。

{％extends ...％}必须是子模板中的第一行语句。它告诉模板引擎此模板从父模板（base.html）扩展。 {％extends％}表示Jinja 2的继承特性。因此，{% extends "base.html" %}意味着首先搜索提到的模板，然后子模板index.html用其他数据覆盖它。

二、使用Flask-Bootstrap集成的Bootstrap模板

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

Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap 层叠样式表(CSS)和 JavaScript 文件的HTML 响应，并在 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。

使用一个名为 Flask-Bootstrap的模块库，它是Flask 的扩展，简化了Bootstrap模板的使用。flask-bootstrap的安装如下：

(venv) $ pip install flask-bootstrap -i https://mirrors.aliyun.com/pypi/simple/

实例并初始化flask-bootstrap模块中的Bootstrap类：

from flask import Flask
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

把程序实例app传入构造方法Bootstrap进行初始化，初始化 Flask-Bootstrap 之后，就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。清单5 为其内容：

清单 5 bootstrap/base.html

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
  <head>
    {%- block head %}
      <title>{% block title %}{{title|default}}{% endblock title %}</title>

      {%- block metas %}
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      {%- endblock metas %}

      {%- block styles %}
        <!-- Bootstrap -->
        <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
      {%- endblock styles %}
    {%- endblock head %}
  </head>
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}
      {% block navbar %}
      {%- endblock navbar %}
      {% block content -%}
      {%- endblock content %}

      {% block scripts %}
        <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
        <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
      {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}

利用 Jinja2 的模板继承机制，衍生一个具有基本页面结构的模板，引入 Bootstrap 的元素。清单6为衍生基模板后的版本。

清单 6 templates/index.html:使用 Flask-Bootstrap 的模板

{% extends "bootstrap/base.html" %}
{% block title %} 爱校码 {% 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">切换导航</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="/">爱校码</a>
         </div>
         <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
                 <li><a href="/">首页</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 指令定义的块中的内容可添加到基模板中。上面这个 index.html模板定义了 3 个块，分别名为 title、navbar 和 content。这些块都是基模板提供的，可在衍生模板中重新定义。title 块的作用很明显，其中的内容会出现在渲染后的 HTML 文档头部，放在 <title> 标签中。navbar 和 content 这两个块分别表示页面中的导航条和主体内容。

Flask-Bootstrap 的 base.html 模板所有可用的块(block)：

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 src="my-script.js"></script> 
{% endblock %}

三、自定义错误页面

为了显示一个状态码为 404或500的错误页面，使得样式和 Bootstrap 的页面保持一致。Flask 允许程序使用基于模板的自定义错误页面，在此定义处理404和500状态的视图函数：

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404

@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500

和视图函数一样，错误处理程序也会返回响应。它们还返回与该错误对应的数字状态码。错误处理程序中引用的模板也需要编写。这些模板应该和常规页面使用相同的布局，因此要有一个导航条和显示错误消息的页面头部。

为了避免重复，利用Jinja2 的模板继承机制，可以定义一个具有更完整页面布局的基模板，其中包含导航条，而页面内容则可留到衍生模板中定义。清单7展示了 templates/base.html 的内容，这是一个继承自 bootstrap/base.html 的新模板，其中定义了导航条。这个模板本身也可作为其他模板的基模板。

清单 7 templates/base.html:包含导航条的基模板

{% extends "bootstrap/base.html" %}
{% block title %}爱校码{% 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">切换导航</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="/">爱校码</a>
         </div>
         <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
                 <li><a href="/">首页</a></li>
             </ul>
         </div>
     </div>
</div>
{% endblock %}

{% block content %} 
<div class="container">
    {% block page_content %}{% endblock %} 
</div>
{% endblock %}

这个模板的 content 块(block)中只有一个 <div> 容器，其中包含了一个名为 page_content 的新的空块(block)，块中的内容由衍生模板定义。

通过继承 templates/base.html模板编写自定义的 404 错误页面，如清单8所示：

清单 8 templates/404.html:使用模板继承机制自定义 404 错误页面

{% extends "base.html" %}
{% block title %}{{ super() }} - 找不到页面{% endblock %}
{% block page_content %} 
<div class="page-header">
     <h1>找不到页面</h1>
</div>
{% endblock %}

templates/index.html 现在可以通过继承 templates/base.html基模板来简化内容，如清单 9 所示。

清单 9 templates/index.html : 使用模板继承机制简化页面模板

{% extends "base.html" %}
{% block title %}{{ super() }} - 首页{% endblock %}
{% block page_content %} 
 <div class="page-header">
     <h1>Hello, {{ name }}!</h1>
 </div>
{% endblock %}

四、链接

任何具有多个路由的程序都需要可以连接不同页面的链接，导航条就是典型的链接应用。

Flask 提供了 url_for() 辅助函数，它可以使用程序 URL 映射中保存的信息生成 URL，实现可变部分的动态路由。

url_for() 函数最简单的用法是以视图函数名作为参数，返回对应的 URL。在当前版本的 myapp.py 程序中调用 url_ for('index')得到的结果是/。

使用 url_for() 生成动态地址时，将动态部分作为关键字参数传入。例如，url_for ('user', name='zhangsan', _external=True) 的返回结果是 http://localhost:5000/user/zhangsan。其中的_external=True参数意味着返回的则是绝对路径。

传入 url_for() 的关键字参数不仅限于动态路由中的参数。函数能将任何额外参数添加到查询字符串中。例如，url_for('index', page=2) 的返回结果是 /?page=2。

举例：

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li><a href="{{ url_for('index') }}">首页</a></li>
     </ul>
</div>

五、静态文件

Web 应用不是仅由代码和模板组成。大多数Web服务还会使用静态文件，例如 HTML文档中引用的图片、JavaScript源码文件和CSS样式文件。

对静态文件的引用被当成一个特殊的路由，即 /static/<filename>。例如，调用 url_for('static', filename='css/styles.css', _external=True) 得到的结果是 http:// localhost:5000/static/css/styles.css。

默认设置下，Flask 在程序根目录中名为 static 的子目录中寻找静态文件。如果需要，可在 static 文件夹中使用子文件夹存放文件。服务器收到前面那个URL后，会生成一个响应，包含文件系统中 static/css/styles.css 文件的内容。

举例：定义收藏夹图标

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}"
    type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}"
    type="image/x-icon"> 
{% endblock %}

博文最后更新时间： 2020-08-24T22:04:08Z

爱校码

Flask框架初步 Flask模板

一、Jinja2模板引擎

二、使用Flask-Bootstrap集成的Bootstrap模板

三、自定义错误页面

四、链接

五、静态文件

信息统计