2 Flask mega-tutorial第2章模板 templates

梦里梦外; 2022-05-18 10:43 180阅读 0赞

如需转载请注明出处。  
win10 64位、Python 3.6.3、Notepad++、Chrome 67.0.3396.99（正式版本）（64 位）  
注：作者编写时间2017-12-13，linux、python 3.5.2

以下内容均是加入自己的理解与增删，以记录学习过程。不限于翻译，部分不完全照搬作者Miguel Grinberg的博客，版权属于作者，感谢他提供免费学习的资料。

<table> 
 <tbody> 
  <tr> 
   <th colspan="4"><b><font>传送门</font></b></th> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81332147" rel="nofollow">00 开篇</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81354752" rel="nofollow">01 Hello world</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81364734" rel="nofollow">02 模板</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81389112" rel="nofollow">03 Web表单</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81485554" rel="nofollow">04 数据库</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81536333" rel="nofollow">05 用户登录</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81565017" rel="nofollow">06 个人资料和头像</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81590339" rel="nofollow">07 错误处理</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81634851" rel="nofollow">08 关注</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81672110" rel="nofollow">09 分页</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81746739" rel="nofollow">10 支持QQ邮箱</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81779883" rel="nofollow">11 美化页面</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81951594" rel="nofollow">12 时间和日期</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81982032" rel="nofollow">13 I18n和L10n 翻译成中文 zh-CN</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/81989457" rel="nofollow">14 Ajax(百度翻译API</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82055120" rel="nofollow">15 更好的App结构(蓝图)</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82119331" rel="nofollow">16 全文搜索</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185100" rel="nofollow">17 部署到腾讯云Ubuntu</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185153" rel="nofollow">18 部署到Heroku</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82185229" rel="nofollow">19 部署到Docker容器</a></b></td> 
  </tr> 
  <tr> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82776565" rel="nofollow">20 JavaScript魔法</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778415" rel="nofollow">21 用户通知</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778449" rel="nofollow">22 后台工作(Redis)</a></b></td> 
   <td><b><a href="https://blog.csdn.net/weixin_38256474/article/details/82778519" rel="nofollow">23 应用程序编程接口(API)</a></b></td> 
  </tr> 
 </tbody> 
</table>

本章学习到：如何生成具有一定复杂结构、动态的Web页面（其实还是挺基础的，哈哈！）。

# 模板定义 #

如有一个预期：html主页有一个 欢迎用户的标题。目前这个应用程序还没用户的概念，也没用户系统。但可用一个 *模拟用户*，用Python字典实现：

user = {'username':'Miguel'}

**创建模拟对象** 是一种有用的技术，使我们可专注于应用程序已有的部分，而不必担心尚不存在的部分。  
**app/routes.py**：从视图函数中返回完整的HTML页面

from app import app
    
    @app.route('/')
    @app.route('/index')
    def index():
    	user = {'username':'Miguel'}
    	return '''
    <html>
    	<head>
    		<title>Home Page - Microblog</title>
    	<head>
    	<body>
    		<h1>Hello,''' + user['username']+ '''!</h1>
    	<body>
    </html>
    '''

在cmd中运行程序。更新视图功能，并查看应用程序在浏览器中的显示效果。

C:\Users\Administrator>d:
    
    D:\microblog>cd D:\microblog\venv\Scripts
    
    D:\microblog\venv\Scripts>activate
    (venv) D:\microblog\venv\Scripts>cd D:\microblog
    
    (venv) D:\microblog>set FLASK_APP=microblog.py
    
    (venv) D:\microblog>flask run
     * Serving Flask app "microblog.py"
     * Environment: production
       WARNING: Do not use the development server in a production environment.
       Use a production WSGI server instead.
     * Debug mode: off
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    127.0.0.1 - - [02/Aug/2018 18:11:46] "GET / HTTP/1.1" 200 -

![这里写图片描述][70]  
很明显，HTML代码 和.py代码混在一起了，很不利于今后的维护、理解。就得将**网络布局（呈现）**与**应用程序的逻辑处理代码** 分开/分离。**模板**在此闪亮登场！将助实现表示、业务逻辑的分离。

在**Flask**中，**模板**是作为单独的文件编写的，存放在应用程序 *包内的* ***templates***文件夹（约定俗成命名为 templates）下。

即在app目录下创建templates文件夹：

(venv) D:\microblog>cd D:\microblog\app
    
    (venv) D:\microblog\app>mkdir templates

在此目录下创建一个HTML文件`index.html`，它将和上方`index()`这个视图函数一样的视图功能。  
**app/templates/index.html**：主页面模板

<html>
    	<head>
    		<title>{
       { title }} - Microblog</title>
    	</head>
    	<body>
    		<h1>Hello,{
       { user.username }}!</h1>
    	</body>
    </html>

这是一个标准的、简单的HTML页面。但有一点跟我们写HTML代码不同是`title`标签、`h1`标签中的 `{ { … }}`两对花括号，在此它是个 **占位符**，作用是将表达式（如文字、数学式子、比较运算符等，其实在Python中是一个Python语句）打印到模板进行输出。具体参考[Jinja2官网文档][Jinja2]。  
这些**占位符**表示HTML页面中可变的部分，并且只在运行时才知道。

现在HTML页面的呈现已在HTML模板中了，这样接着就可简化一下视图函数`index()`了。修改routes.py文件  
**app/routes.py**：使用`render_template()`函数

from app import app
    from flask import render_template#从flask包中导入render_template函数
    
    @app.route('/')
    @app.route('/index')
    def index():
        user = {'username':'Miguel'}
        return render_template('index.html', title='Home', user=user)

将模板（index.html）转换为完整HTML页面的操作称之为 *呈现*（render，译作 递交、表达、给予，在此译作 “渲染”）。为了渲染模板，由从flask包中导入的`render_template()`完成，此函数“携带”模板文件名（index.html）、模板参数的变量列表，并返回相同的模板，不过其中所有占位符都替换为实际值。

`render_template()函数`调用与Flask框架捆绑在一起的Jinja2模板引擎。Jinja2会用相应的值替换`{ { ... }}块`，这个相应的值由`render_template()`调用时**提供的参数**给出。  
参考：[flask.render\_template()][flask.render_template]  
将达到同样的效果：  
![这里写图片描述][70 1]

# 控制结构----if条件、for循环、继承 #

上述过程只是理解了：Jinja2模板引擎 如何在渲染过程中用实际值 替换 （模板中的）占位符。  
接下来将认识到更多 Jinja2在模板文件中支持的更多强大操作：if条件、for循环、继承等。  
源自[官网][Jinja2]的这句话：

There are a few kinds of delimiters. The default Jinja delimiters are configured as follows:
    
    {% ... %} for Statements
    {
       { ... }} for Expressions to print to the template output
    {# ... #} for Comments not included in the template output
    #  ... ## for Line Statements

`if、for、继承`均在`{% ... %}块`中写控制语句。

## if条件 ##

形如：

{% if title %}
    			...语句块
    		{% else %}
    			...语句块
    		{% endif %}

**app/templates/index.html**：模板中添加条件语句

上述代码中if语句块的功能是：若`视图函数index()`没有传递title占位符变量的值，则`index.html模板`将会提供默认值（else语句块中），而不是显示空标题。  
尝试将routes.py中`render_template()`中的`title='Home',`删除。效果：  
![这里写图片描述][70 2]

## for循环 ##

在模板中形如：

{% for post in posts %}
    	...语句块
    {% endfor %}

需求：登录用户可在主页中查看最新的帖子。  
实现：  
首先，用虚拟对象的方法来创建一些用户、帖子，以供显示。  
**app/routes.py**：视图函数中的假帖子

from app import app
    from flask import render_template#从flask包中导入render_template函数
    
    @app.route('/')
    @app.route('/index')
    def index():
        user = {'username':'Miguel'}#用户
    	posts = [#创建一个列表：帖子。里面元素是两个字典，每个字典里元素还是字典，分别作者、帖子内容。
    		{
    			'author': {'username':'John'},
    			'body':'Beautiful day in Portland!'
    		}，
    		{
    			'author': {'username':'Susan'},
    			'body':'The Avengers movie was so cool!'
    		}
    	]
        return render_template('index.html', title='Home', user=user, posts=posts)

帖子列表 可包含任意数量的元素，由`视图函数index()`决定将在页面中显示的帖子数量。而`模板index.html`不能假设这有多少个帖子，因此它需要准备好以通用方式呈现视图发送来的尽可能多的帖子。在`模板index.html`中，用`for`循环遍历所有的帖子并呈现。  
**app/templates/index.html**：在模板中的for循环

<html>
        <head>
    		{% if title %}
    			<title>{
       { title }} - Microblog</title>
    		{% else %}
    			<title>Welcome to Microblog!</title>
    		{% endif %}
        </head>
        <body>
            <h1>Hello,{
       { user.username }}!</h1>
    		{% for post in posts %}
    			<div><p>{
       { post.author.username }} says: <b>{
       { post.body }}</b></p></div>
    		{% endfor %}
        </body>
    </html>

运行程序，效果：  
![这里写图片描述][70 3]

## 模板继承 ##

形如：

{% extends "base.html" %}
    
    {% block content %}
    	...
    {% endblock %}

现在，大部分Web应用程序在页面顶部有一个**导航栏**，它常包含一些常用链接：如登录、退出、编辑个人资料等。可以很轻松地将导航栏添加到`index.html模板`，甚至更多的HTML页面中。但随着应用程序的增长（页面数量的增多），这些页面都将使用相同的导航栏，不可能每一个页面都增加一份相同的导航栏代码。

Jinja2具有**模板`继承`**功能，完美解决上述问题。在实际操作中，将所有**模板**`共有的页面布局部分`移至**基础模板**中，其他模板则继承自它。

实例：实现一个简单的导航栏，其他模板继承它。  
在**app/templates**目录下创建一个**基础模板**文件 base.html。  
**app/templates/base.html**：带导航栏的基础模板

<html>
    	<head>
    		{% if title %}
    			<title>{
       { title }} - Microblog</title>
    		{% else %}
    			<title>Welcome to Microblog</title>
    		{% endif %}
    	</head>
    	<body>
    		<div>Microblog:<a href="/index">Home</a></div>
    		<hr>
    		{% block content %}
    		{% endblock %}
    	</body>
    </html>

在上述**基础模板**中，`块block` 控制语句用于定义**派生模板**可自行插入的位置。`块block` 被赋予唯一的名字 `content`，**派生模板**在提供其内容时可引用这个名称。

修改index.html这个模板，让其继承base.html模板。  
**app/templates/index.html**：从基础模板继承

{% extends "base.html" %}
    
    {% block content %}
    	<h1>Hello,{
       { user.username }}!</h1>
    	{% for post in posts %}
    		<div><p>{
       { post.author.username }} says: <b>{
       { post.body }}</b></p></div>
    	{% endfor %}
    {% endblock %}

**base.html基础模板** 实现处理常规页面的结构，则**派生模板index.html**简化大部分内容。  
`extends语句` 建立了两个模板之间的继承关系，因此，Jinja2就会知道：当它被要求渲染`index.html`时，需要将其嵌入`base.html`中。这俩模板具有匹配的`block语句` 名称`content`，这就是Jinja2如何将两个模板合并为一个模板的方法。  
![这里写图片描述][70 4]  
运行程序，效果：  
![这里写图片描述][70 5]  
今后，当再需要为应用程序创建其他页面时，就可省去编写相同代码的麻烦，并让应用程序的所有页面`共享相同的外观`，而只需一个步骤：**创建继承自base.html模板的派生模板**。

目前为止，项目结构：

microblog/
    	venv/
    	app/
    		templates/
    			base.html
    			index.html
    		__init__.py
    		routes.py
    	microblog.py

参考：  
[作者博客][Link 1]

如需转载请注明出处。

[70]: /images/20220518/250760b014e948bfa84881d1ce46b757.png
[Jinja2]: http://jinja.pocoo.org/docs/2.10/templates/
[flask.render_template]: http://flask.pocoo.org/docs/1.0/api/?highlight=render_template#flask.render_template
[70 1]: /images/20220518/8c4d377daccd4d578de143e2d95434f8.png
[70 2]: /images/20220518/a0664fcf629340c48ca93b142da6936d.png
[70 3]: /images/20220518/fead0d4882b64e7190f92ee7a21a8d1d.png
[70 4]: /images/20220518/0a67ae0adcf945ad84edf1fb0417bcb7.png
[70 5]: /images/20220518/ea27b481d6824e748783581f2b4e6100.png
[Link 1]: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates