Flask-02 Jinja2模板

模板

要了解jinja2，那么需要先理解模板的概念。模板是一个web开发必备的模块。因为我们在渲染一个网页的时候，并不是只渲染一个纯文本字符串，而是需要渲染一个有富文本标签的页面。这时候我们就需要使用模板了。在Flask中，配套的模板是Jinja2，Jinja2的作者也是Flask的作者。这个模板非常的强大，并且执行效率高。在Python的web开发中广泛使用，它能够有效的将业务逻辑和页面逻辑分开，使代码可读性增强、并且更加容易理解和维护。

模板简单来说就是一个其中包涵占位变量表示动态的部分的文件，模板文件在经过动态赋值后，返回给用户。 --> 可以理解为渲染

python中自带一个简单的模板，就是string提供的。

>>> import string
>>> a = string.Template('$who is $role')
>>> a.substitute(who='daxin',role='Linux')
'daxin is Linux'
>>> a.substitute(who='daxin',role='cat')
'daxin is cat'

Python自带的模板功能极其有限，如果我们想要在模板中使用控制语句，和表达式，以及继承等功能的话，就无法实现了。

目前主流的模板系统，最常用的就是jinja2和mako

安装jinja2

由于jinja2属于第三方模块，首先需要对其进行安装

pip3 install jinja2

jinja2语法

作为一个模板系统，它还提供了特殊的语法，我们按照它支持的语法进行编写之后，就能使用jinja2模块进行渲染。

基本语法

在jinja2中，存在三种语法：

1. 变量取值 {{ }}

2. 控制结构 {% %}

3. 注释 {# #}

jinja2变量

jinja2模板中使用 {{ }} 语法表示一个变量，它是一种特殊的占位符。当利用jinja2进行渲染的时候，它会把这些特殊的占位符进行填充/替换，jinja2支持python中所有的Python数据类型比如列表、字段、对象等。

<p>this is a dicectory:{{ mydict['key'] }} </p>
<p>this is a list:{{ mylist[3] }} </p>
<p>this is a object:{{ myobject.something() }} </p>

Jinja2模版过滤器

变量可以通过“过滤器”进行修改，过滤器可以理解为是jinja2里面的内置函数和字符串处理函数。过滤器是通过管道符号（|）进行使用的，例如：{{ name|length }}，将返回name的长度。过滤器相当于是一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面中。Jinja2中内置了许多过滤器，在这里可以看到所有的过滤器

abs(value)	返回一个数值的绝对值
default(value,default_value,boolean=false)	如果当前变量没有值，则会使用参数中的值来代替。name|default(‘juran’)——如果name不存在，则会使用juran来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。
escape(value)或e	转义字符，会将<、>等符号转义成HTML中的符号。例如：content|escape或content|e
first(value)	返回一个序列的第一个元素。names|first
format(value,*arags,**kwargs)	格式化字符串
last(value)	返回一个序列的最后一个元素
length(value)	返回一个序列或者字典的长度
join(value,d="u’’)	将一个序列用d这个参数的值拼接成字符串
safe(value)	如果开启了全局转义，那么safe过滤器会将变量关掉转义
int(value)	将值转换为int类型
float(value)	将值转换为float类型
lower(value)	将字符串转换为小写
upper(value)	将字符串转换为小写
replace(value,old,new)	替换将old替换为new的字符串
truncate(value,length=255,killwords=False)	截取length长度的字符串
striptags(value)	删除字符串中所有的HTML标签，如果出现多个空格，将替换成一个空格
trim	截取字符串前面和后面的空白字符
string(value)	将变量转换成字符串
wordcount(s)	计算一个长字符串中单词的个数

    {{ "%s" - "%s"|format('Hello?',"Foo!") }}将输出：Helloo? - Foo!

控制语句

所有的控制语句都是放在{% … %}中，并且有一个语句{% endxxx %}来进行结束，Jinja中常用的控制语句有if/for…in…

if：if语句和python中的类似，可以使用>，<，<=，>=，==，!=来进行判断，也可以通过and，or，not，()来进行逻辑合并操作

{% if score>=80 %}
优秀
{% elif score>=60 %}
及格
{% else %}
不及格
{% endif %}

for…in…：for循环可以遍历任何一个序列包括列表、字典、元组。并且可以进行反向遍历

• 普通的遍历

<ul>
    {% for user in users %}
        <li>{{ user }}</li>
    {% endfor %}
</ul>

• 遍历字典

<dl>
    {% for key, value in my_dict.items() %}
        <dt>{{ key }}</dt>
        <dd>{{ value }}</dd>
    {% endfor %}
</dl>

• 如果序列中没有值的时候，进入else

<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% else %}
        <li><em>no users found</em></li>
    {% endfor %}
</ul>

并且Jinja中的for循环还包含以下变量，可以用来获取当前的遍历状态

变量	描述
loop.index	当前迭代的索引（从1开始）
loop.index0	当前迭代的索引（从0开始）
loop.first	是否是第一次迭代，返回True或False
loop.last	是否是最后一次迭代，返回True或False
loop.length	序列的长度

另外，不可以使用continue和break表达式来控制循环的执行。

宏

模板中的宏跟python中的函数类似，可以传递参数，但是不能有返回值，可以将一些经常用到的代码片段放到宏中，然后把一些不固定的值抽取出来当成一个变量

macro.html:

{% macro input(name, value='', type='text') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

以上例子可以抽取出了一个input标签，指定了一些默认参数。那么我们以后创建input标签的时候，可以通过他快速的创建：

<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>

导入宏的例子

假如我们创建宏和使用宏不在同一个文件，那么我们需要将宏导入到当前文件下。

1.import…as…形式

{% import 'macro.html' as macro  %}
<tr>
    <td>用户名：</td>
    <td>{{ macro.input('username') }}</td>
</tr>

2.from…import…as…/from…import…形式

{% from "macro.html" import input %}
<tr>
    <td>密码：</td>
    <td>{{ input("password",type="password") }}</td>
</tr>

另外需要注意的是，导入模板并不会把当前上下文中的变量添加到被导入的模板中，如果你想要导入一个需要访问当前上下文变量的宏，有两种可能的方法

• 显式地传入请求或请求对象的属性作为宏的参数
• 与上下文一起（with context）导入宏

与上下文中一起（with context）导入的方式

{% import 'macro.html' as macro with context %}

import

在真实的开发中，会将一些常用的宏单独放在一个文件中，在需要使用的时候，再从这个文件中进行导入。import语句的用法跟python中的import类似，可以直接import…as…，也可以from…import…或者from…import…as…，假设现在有一个文件，叫做forms.html，里面有两个宏分别为input和textarea

forms.html：

{% macro input(name, value='', type='text') %}
    <input type="{{ type }}" value="{{ value|e }}" name="{{ name }}">
{% endmacro %}

{% macro textarea(name, value='', rows=10, cols=40) %}
    <textarea name="{{ name }}" rows="{{ rows }}" cols="{{ cols
    }}">{{ value|e }}</textarea>
{% endmacro %}

include

include语句可以把一个模板引入到另外一个模板中，类似于把一个模板的代码copy到另外一个模板的指定位置

header.html:
<p>header</p>

footer.html:
<p>footer</p>

test.html:
{% include 'header.html' %}
        主体内容
{% include 'footer.html' %}

test.html文件内容等同于下面

<p>header</p>
主体内容
<p>footer</p>

赋值（set）语句

有时候我们想在在模板中添加变量，这时候赋值语句（set）就派上用场了

{% set name='juran' %}

那么以后就可以使用name来代替juran这个值了，同时，也可以给他赋值为列表和元组：

{% set navigation = [('index.html', 'Index'), ('about.html', 'About')] %}

局部作用域(with)

赋值语句创建的变量在其之后都是有效的，如果不想让一个变量污染全局环境，可以使用with语句来创建一个内部的作用域，将set语句放在其中，这样创建的变量只在with代码块中才有效

{% with %}
    {% set foo = 42 %}
    {{ foo }}           foo is 42 here
{% endwith %}

也可以在with的后面直接添加变量，比如以上的写法可以修改成这样：

{% with foo = 42 %}
    {{ foo }}
{% endwith %}

这两种方式都是等价的，一旦超出with代码块，就不能再使用foo这个变量了。

模板继承

Flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父模板中，并且父模板通过定义block给子模板开一个口，子模板根据需要，再实现这个block，假设现在有一个base.html这个父模板

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="base.css" />
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div id="body">{% block body %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>
        {% endblock %}
    </div>
</body>
</html>

以上父模板中，抽取了所有模板都需要用到的元素html、body等，并且对于一些所有模板都要用到的样式文件style.css也进行了抽取，同时对于一些子模板需要重写的地方，比如title、head、body都定义成了block，然后子模板可以根据自己的需要，再具体的实现。

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .detail{
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    <h1>这里是首页</h1>
    <p class="detail">
      首页的内容
    </p>
{% endblock %}

首先第一行就定义了子模板继承的父模板，并且可以看到子模板实现了title这个block，并填充了自己的内容，再看head这个block，里面调用了super()这个函数，这个函数的目的是执行父模板中的代码，把父模板中的内容添加到子模板中，如果没有这一句，则父模板中处在head这个block中的代码将会被子模板中的代码给覆盖掉。

另外，模板中不能出现重名的block，如果一个地方需要用到另外一个block中的内容，可以使用self.blockname的方式进行引用

<title>
    {% block title %}
        这是标题
    {% endblock %}
</title>
<h1>{{ self.title() }}</h1>

以上示例中h1标签重用了title这个block中的内容，子模板实现了title这个block，h1标签也能拥有这个值。

需要特别注意的是：与面向对象中的继承不同，在子模板中，所有的文本标签和代码都要添加到从父模板中继承的block中。否则，这些文本和标签将不会被渲染。即子模板不能做父模板规定以外的事。

静态文件的配置

Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。在Jinja中加载静态文件非常简单，只需要通过url_for全局函数就可以实现

<link href="{{ url_for('static',filename='about.css') }}">

url_for函数默认会在项目根目录下的static文件夹中寻找about.css文件，如果找到了，会生成一个相对于项目根目录下的/static/about.css路径。当然我们也可以把静态文件不放在static文件夹中，此时就需要具体指定了

app = Flask(__name__,static_folder='C:\static')

那么访问静态文件的时候，将会到/static这个文件夹下寻找。

Flask渲染Jinja模板

比如，当前项目中templates文件夹下的about.html是一个jinja2模板，要渲染它，通过render_template（翻译：渲染模板）方法即可

from flask import Flask,render_template
app = Flask(__name__)

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

当访问/about/的时候，about()函数会默认在当前目录下的templates文件夹下寻找about.html模板文件。如果想更改模板文件地址，应该在创建app的时候，给Flask传递一个关键字参数template_folder，指定具体的路径

from flask import Flask,render_template
app = Flask(__name__,template_folder=r'C:\templates')

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

以上例子将会在C盘的templates文件夹中寻找模板文件。还有最后一点是，如果模板文件中有参数需要传递，应该怎么传呢

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/about/')
def about():
    # return render_template('about.html',user='luoji')
    return render_template('about.html',**{'user':'zhiliao'})

以上例子介绍了两种传递参数的方式，因为render_template需要传递的是一个关键字参数，所以第一种方式是顺其自然的。但是当你的模板中要传递的参数过多的时候，把所有参数放在一个函数中显然不是一个好的选择，因此我们使用字典进行包装，并且加两个*号，来转换成关键字参数。