Flask框架深入解析-优快云博客

本文详细介绍了Flask框架的核心概念，包括业务逻辑与表现逻辑的分离、Jinja2模板引擎的使用、Flask-Bootstrap和Flask-Moment的集成，以及URL生成、错误页面定制和静态文件处理等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务逻辑 和 表现逻辑

业务逻辑：（视图函数）生成请求的响应。
表现逻辑：（模板）把表现逻辑移到模板中能够提升程序的可维护性。

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

Jinja2模板引擎

形式最简单的 Jinja2 模板就是一个包含响应文本的文件。

示例 1： templates/index.html：Jinja2 模板

<h1>Hello World!</h1>

示例 2： templates/user.html：Jinja2 模板

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

1、渲染模板

默认情况下，Flask 在程序文件夹中的 templates 子文件夹中寻找模板。

from flask import Flask, render_template

@app.route('/')
def index():
    return render_template('index.html')

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

Flask 提供的 render_template 函数把 Jinja2 模板引擎集成到了程序中。
render_template 函数的第一个参数是模板的文件名。随后的参数都是键值对，表示模板中变量对应的真实值。
在视图函数user中：左边的“name”表示参数名，就是模板中使用的占位符；右边的“name”是当前作用域中的变量，表示同名参数的值。

2、变量

示例 2 在模板中使用的 {{ name }} 结构表示一个变量，它是一种特殊的占位符，告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。

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

<p>A value from a dictionary: {{ mydict['key'] }}.</p>
<p>A value from a list: {{ mylist[3] }}.</p>
<p>A value from a list, with a variable index: {{ mylist[myintvar] }}.</p>
<p>A value from an object's method: {{ myobj.somemethod() }}.</p>

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

Hello, {{ name|capitalize }}

Jinja2 提供的部分常用过滤器：

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

safe 过滤器值得特别说明一下。
默认情况下，出于安全考虑，Jinja2 会转义所有变量。例如，如果一个变量的值为

'<h1>Hello</h1>'

Jinja2 会将其渲染成

'&lt;h1&gt;Hello&lt;/h1&gt;'

浏览器能显示这个 h1 元素，但不会进行解释。很多情况下需要显示变量中存储的 HTML 代码，这时就可使用 safe 过滤器。

注意：千万别在不可信的值上使用 safe 过滤器，例如用户在表单中输入的文本。

3、控制结构

Jinja2 提供了多种控制结构，可用来改变模板的渲染流程。本节使用简单的例子介绍其中
最有用的控制结构。
条件控制语句：

{% if user %}
    Hello, {{ user }}!
{% else %}
    Hello, Stranger!
{% endif %}

for 循环：

<ul>
 {% for comment in comments %}
     <li>{{ comment }}</li>
 {% endfor %}
</ul>

Jinja2 还支持宏。宏类似于 Python 代码中的函数。例如：

{% 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 'common.html' %}

另一种重复使用代码的强大方式是模板继承
它类似于 Python 代码中的类继承。首先，创建一个名为 base.html 的基模板：

<html>
<head>
 {% block head %}
 <title>{% block title %}{% endblock %} - My Application</title>
 {% endblock %}
</head>
<body>
 {% block body %}
 {% endblock %}
</body>
</html>

block 标签定义的元素可在衍生模板中修改。
在本例中，我们定义了名为 head、title 和 body 的块。
基模板的衍生模板：

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
 {{ super() }}
 <style>
 </style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

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

使用Flask-Bootstrap集成Twitter Bootstrap

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

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

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

(venv) $ pip install flask-bootstrap

Flask 扩展一般都在创建程序实例时初始化。
初始化 Flask-Bootstrap

from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

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

示例 templates/user.html：使用 Flask-Bootstrap 的模板

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% 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 %}

Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html，从而实现模板继承。
Flask-Bootstrap 中的基模板提供了一个网页框架，引入了 Bootstrap 中的所有 CSS 和JavaScript 文件。
上面这个 user.html 模板定义了 3 个块，分别名为 title、navbar 和 content。这些块都是基模板提供的，可在衍生模板中重新定义。

Flask-Bootstrap基模板中定义的块:

块　　名	说　　明
doc	整个 HTML 文档
html_attribs	标签的属性
html	标签中的内容
head	标签中的内容
title	标签中的内容
metas	一组标签
styles	层叠样式表定义
body_attribs	标签的属性
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 %}

自定义错误页面

示例 hello.py：自定义错误页面

@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

和视图函数一样，错误处理程序也会返回响应。它们还返回与该错误对应的数字状态码。

示例 templates/base.html：包含导航条的程序基模板：

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% 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">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

示例 templates/404.html：使用模板继承机制自定义 404 错误页面：

{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
<div class="page-header">
    <h1>Not Found</h1>
</div>
{% endblock %}

templates/user.html：使用模板继承机制简化页面模板，如下所示：

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

链接

任何具有多个路由的程序都需要可以连接不同页面的链接，例如导航条。
在模板中直接编写简单路由的 URL 链接不难，但对于包含可变部分的动态路由，在模板
中构建正确的 URL 就很困难。而且，直接编写 URL 会对代码中定义的路由产生不必要的
依赖关系。如果重新定义路由，模板中的链接可能会失效。

为了避免这些问题，Flask 提供了 url_for() 辅助函数，它可以使用程序 URL 映射中保存
的信息生成 URL。

url_for() 函数最简单的用法是以视图函数名（或者 app.add_url_route() 定义路由时使用
的端点名）作为参数，返回对应的 URL。
例如，在当前版本的 hello.py 程序中调用 url_for(‘index’) 得到的结果是 /。调用 url_for(‘index’, _external=True) 返回的则是绝对地址，在这个示例中是 http://localhost:5000/。

生成连接程序内不同路由的链接时，使用相对地址就足够了。如果要生成在浏览器之外使用的链接，则必须使用绝对地址，例如在电子邮件中发送的链接。

使用 url_for() 生成动态地址时，将动态部分作为关键字参数传入。
例如，url_for (‘user’, name=‘john’, _external=True) 的返回结果是 http://localhost:5000/user/john。

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

静态文件

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

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

默认设置下，Flask 在程序根目录中名为 static 的子目录中寻找静态文件。

示例 templates/base.html：定义收藏夹图标
【展示了如何在程序的基模板中放置 favicon.ico 图标。这个图标会显示在浏览器的地址栏中。】

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

图标的声明会插入 head 块的末尾。注意如何使用 super() 保留基模板中定义的块的原始内容。

使用Flask-Moment本地化日期和时间

如果 Web 程序的用户来自世界各地，那么处理日期和时间可不是一个简单的任务。
服务器需要统一时间单位，这和用户所在的地理位置无关，所以一般使用协调世界时
（Coordinated Universal Time，UTC）。不过用户看到 UTC 格式的时间会感到困惑，他们更希望看到当地时间，而且采用当地惯用的格式。

要想在服务器上只使用 UTC 时间，一个优雅的解决方案是，把时间单位发送给 Web 浏览器，转换成当地时间，然后渲染。Web 浏览器可以更好地完成这一任务，因为它能获取用户电脑中的时区和区域设置。

有一个使用 JavaScript 开发的优秀客户端开源代码库，名为 moment.js（http://momentjs.com/），它可以在浏览器中渲染日期和时间。Flask-Moment 是一个 Flask 程序扩展，能把moment.js 集成到 Jinja2 模板中。Flask-Moment 可以使用 pip 安装：

(venv) $ pip install flask-moment

这个扩展的初始化方法如下所示：

from flask.ext.moment import Moment
moment = Moment(app)

除了 moment.js，Flask-Moment 还依赖 jquery.js。要在 HTML 文档的某个地方引入这两个库，可以直接引入，这样可以选择使用哪个版本，也可使用扩展提供的辅助函数，从内容分发网络（Content Delivery Network，CDN）中引入通过测试的版本。Bootstrap 已经引入了 jquery.js，因此只需引入 moment.js 因此只需引入 moment.js 即可。

如下示例，展示了如何在基模板的 scripts 块中引入这个库。
示例 templates/base.html：引入 moment.js 库

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

为了处理时间戳，Flask-Moment 向模板开放了 moment 类。
如下示例中的代码把变量 current_time 传入模板进行渲染。
示例 hello.py：加入一个 datetime 变量

from datetime import datetime

@app.route('/')
def index():
    return render_template('index.html', current_time=datetime.utcnow())

如下示例展示了如何在模板中渲染 current_time。
代码 templates/index.html：使用 Flask-Moment 渲染时间戳

<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>

format(‘LLL’) 根据客户端电脑中的时区和区域设置渲染日期和时间。
参数决定了渲染的方式，‘L’ 到 ‘LLLL’ 分别对应不同的复杂度。format() 函数还可接受自定义的格式说明符。

第二行中的 fromNow() 渲染相对时间戳，而且会随着时间的推移自动刷新显示的时间。这个时间戳最开始显示为“a few seconds ago”，但指定 refresh 参数后，其内容会随着时间的推移而更新。如果一直待在这个页面，几分钟后，会看到显示的文本变成“a minute ago”“2 minutes ago”等。

Flask-Moment 实现了 moment.js 中的 format()、fromNow()、fromTime()、calendar()、valueOf() 和 unix() 方法。你可查阅文档（http://momentjs.com/docs/#/displaying/）学习 moment.js 提供的全部格式化选项。

Flask-Monet 假定服务器端程序处理的时间戳是“纯正的”datetime 对象，且使用 UTC 表示。关于纯正和细致的日期和时间对象 1 的说明，请阅读标准库中 datetime 包的文档（https://docs.python.org/2/library/datetime.html）。

Flask-Moment 渲染的时间戳可实现多种语言的本地化。语言可在模板中选择，把语言代码传给 lang() 函数即可：