Flask边学边做——2、添加jinja模板

作者: 麦口胡 | 来源:发表于2017-10-20 13:45 被阅读0次

Flask边学边做——2、添加jinja模板
templates（模板）
Templates 2018-08-28
Flask模板引擎：Jinja2常用语法整理
Flask jinja2模板
Flask框架学习之jinja2模板
Jinja2 变量过滤器测试器
Flask - 07 模板
Flask
Flask渲染Jinja2模板和传参

之前我们建立已经建立了最小环境的web网站，而且浏览器页面返回Hello Guest的文本。虽然在这个页面我们可以加上html标签，如<h3>Hello Gutst</h3>丰富页面。但如果把大量的html语言写到同一个文件里，势必让文档结构混乱不堪。所以我们就可以用到Flask内置的jinja模板。

1、渲染模板文件

Flask通过渲染模板，把数据输入模板变量中。我们为index.py增加以下内容，来渲染模板文件。

from flask import Flask,render_template       #从flask模块中导入Flask对象,导入render_template函数
app=Flask(__name__)             #把Flask对象付给app变量

@app.route('/')                  #添加路由/
def index():
    user='Michael Hu'           #设定user变量
    return render_template('index.html',user=user)    #使用render_template渲染index.html模板，传递user变量
if __name__=='__main__':
    app.run(debug=True)      #启动app调试模式

导入render_template函数，用于渲染模板文件。

给定一个传入模板的user变量

用render_template函数指定渲染模板文件，传递指定变量

2、定义模板文件

模板文件其实就是一个文本文件，通常后缀名定义成html文件，模板文件里的变量可以接收应用传递来的值，并呈现出来。

在当前目录下的新建templates目录，并在该文件下新建index.html，代码内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Default</title>
</head>
<body>
    <h3>{{user}}</h3>
</body>
</html>

如直接用浏览器打开这个文件，页面仅显示{{user}}，这个就是变量，接收来自应用的数据。

浏览器呈现效果如下：

浏览器返回传递数据

2.1 模板中的判断

模板中可以定义条件语句,修改index.html模板文件内容如下：

<h3>{{user}}</h3>
{%else%}
<h3>Hello Guest</h3>
{%endif%}

格式：{%if%} {%elif%} {%else%} {%endif%}

当user变量为空时候，模板文件显示Hello Guest

2.2 模板中的循环

2.2.1模板可以循环显示应用传递的列表变量

index.py里增加列表变量数据
ages=[23,45,33,54,65,32,12,56,76,76,76]
index.html模板文件增加循环显示

{%for age in ages|sort()%}
<li>{{age}}</li>
{%endfor%}
{{ages}}

格式 {%for * in *%} {{*}} {%endfor%}
sort()过滤器使传入的数据排序

参见以下效果图：

数据排序循环显示

2.2模板可以循环显示应用传递的字典

index.py文件里增加字典数据

scores=[{'name':'michael','age':99},{'name':'yanyan','age':98},{'name':'tim','age':100}]

index.html模板文件循环显示

            {%for score in scores%}
            <table border="1">
                <tr>
                <th>Index</th>
                <th>Name</th>
                <th>Age</th>
                </tr>
                <tr>
                <td>{{loop.index}}</td>
                <td>{{score.name}}</td>
                <td>{{score.age}}</td>
                </tr>
            </table>
            {%endfor%}

loop.index可以在循环内迭代当前的索引，从1开始算

参见以下效果图：

字段循环

3、模板复用

网页复用是网站设计非常重要的特性，比如页面头部的网站名称，用户登录信息。页面尾部的版权信息等。

3.1模板继承

新建一个父模板base.html,模板包含title内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>{{title}}</title>
    </head>
    <body>
        Here is Base.html<br>
        basevar:{{basevar}}
        <hr>
        {%block body%}{%endblock%}
    </body>
</html>

{%block body%} {%endblock%} 两个大括弧代表子模板从这里继承插入，其中body名字自定义。

新建一个子模板child.html

{%extends 'base.html'%}
{%block body%}
Here is child.html
<br>
contentvar:{{contentvar}}
{%endblock%}

子模板从哪个父模板继承通过extends标记
子模板的内容写在{%block body%} {%endblock%}两个大括弧内。

index.py新增以下内容，增加一个新的路由(路由内容放在下节详述)

@app.route('/child')
def child():
    title='Michael Index'
    basevar='base var'
    contentvar='content var'
    return render_template('child.html',title=title,basevar=basevar,contentvar=contentvar)

参见以下效果图：浏览器访问child页面，分割符上的内容继承自base.html