第四章 Jinja2模版

模板简介：

在之前的章节中，视图函数只是直接返回文本，而在实际生产环境中的页面大多是带有样式和复杂逻辑的HTML代码，这可以让浏览器渲染出非常漂亮的页面。目前市面上有非常多的模板系统，其中最知名好用的就是]inja2和Mako，
这两个模板的特点和不同：
1.Jinja2：]inja是日本寺庙的意思，并且寺庙的英文是temple和模板的英文template的发音类似。Jinja2是默认的仿Django模板的一个模板引擎，由F1ask的作者开发。它速度快，被广泛使用，并且提供了可选的沙箱模板来保证执行环境的安全，它有以下优点：

让前端开发者和后端开发者工作分离。
减少F1ask项目代码的耦合性，页面逻辑放在模板中，业务逻辑放在视图函数中，将页面逻辑和业务逻辑解耦有利于代码的维护。
提供了控制语句、继承等高级功能，减少开发的复杂度。

2.Marko:Marko是另一个知名的模板。他从Django、Jinja2等模板借鉴了很多语法和APl，他有以下优点：

性能和]inja2相近
有成功的案例有，大型网站在使用，Reddit和豆瓣都在使用。
有知名的web框架支持。Pylons和Pyramid 这两个web框架内置模板就是Mako
支持在模板中写几乎原生的Python语法的代码，对Python工程师比较友好，开发效率高。
自带完整的缓存系统。当然也提供了非常好的扩展借口，很容易切换成其他的缓存系统。

Flask渲染Jinja模板：

要渲染一个模板，通过 render_template方法即可，以下将用一个简单的例子进行请解：

在使用`render_template`渲染模版的时候，使用关键字参数传参。在模版中{{}}引用关键字参数。
当你的参数过多，将所有的参数放到一个字典中，传这个字典参数的时候，需使用两个星号，将字典打散成关键参数。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从模版中渲染数据</title>
</head>
<body>
    这是从模版中渲染的数据
    <p>{{ username }}</p>
    <p>{{ age }}</p>
    <p>{{ country }}</p>
    <p>{{ childrens.name }}</p>
    <p>{{ childrens['name'] }}</p>
</body>
</html>

python代码：

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def hello_world():

    context = {
        'username':'wqbin',
        'age': 25,
        'country': 'china',
        'childrens': {
            'name':'没有',
            'height': None
        }
    }
    return render_template('index.html',**context)


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

结果：

url_for在html的使用

模版中的`url_for`跟我们后台视图函数中的`url_for`使用起来是一样的。传递视图函数的名字，也可以传递参数。
使用的时候，需要在`url_for`左右两边加上一个`{{ url_for('func') }}`

index.html

{# {{ 用来存放变量 }}#}
{# {% 用来执行函数或者逻辑代码 %}#}

这个#快捷键没听到，一会补充上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习url_for</title>
</head>
<body>
    这是从模版中渲染的

<!--     <p><a href="/accounts/login/">登录</a></p>-->

    <p><a href="{{ url_for('login2',ref='/',id='1') }}">登录</a></p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    这是登录页面
</body>
</html>

python：

from flask import Flask,render_template,url_for

app = Flask(__name__)

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


@app.route('/accounts/login/<id>/')
def login2(id):
    print(id)
    return render_template('login.html')


@app.route('/accounts/login/')
def login1():
    return render_template('login.html')


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

其他问题：

jinja2模板过滤器

过滤器是通过管道符号( | )进行使用的，例如：{{name|length}}，将返回name的长度。过滤器相当于是一个函数，把|当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面中。

jinja2中内置了许多过滤器，在这里可以看到所有的过滤器，下面是一些常用的过滤器：

·abs(value)：返回一个数值的绝对值。例如：-1|abs。
·default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。name|default（"不存在"）--如果name不存在，则会使用"不存在"来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。
·escape（value）或e：转义字符，会将(、)等符号转义成HTML中的符号。例如：content|escape或content|e。
·first（value）：返回一个序列的第一个元素。names|first。
·format（value，*args，**kwargs）：格式化字符串。

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

·last（value）：返回一个序列的最后一个元素。示例：names|last。
·length(value):返回一个序列或者字典的长度。示例：names|length。
·join(value.d=u""))将一个序列用d这个参数的值拼接成字符串。
·safe(value))如果开启了全局转义,那么safe过滤器会将变量关掉转义。示例:content_html|safe。
·int(value))将值转换为int类型。
·float(value))将值转换为float类型。
·lower(value))将字符串转换为小写。
·upper(value))将字符串转换为小写。
·replace(value,old,new))替换将o1d替换为new的字符串。
·truncate(value,1ength=255,killwords=False))截取1ength长度的字符串。
·striptags(value))除字符串中所有的HTML标签,如果出现多个空格,将替换成一个空格。
·trim截取字符串前面和后面的空白字符。
·string(value))将变量转换成字符串。
·wordcount(s))计算一个长字符串中单词的个数。

1.对defaul过滤器的案例讲解：

使用方式`{{ value|default('默认值') }}`。如果value这个`key`不存在，那么就会使用`default`过滤器提供的默认值。

如果你想使用类似于`python`中判断一个值是否为False（例如：None、空字符串、空列表、空字典等），那么就必须要传递另外一个参数`{{ value|default('默认值',boolean=True) }}`。

可以使用`or`来替代`default('默认值',boolean=True)`

2.对过滤器的转移详解

###### 自动转义过滤器：
1. `safe`过滤器：可以关闭一个字符串的自动转义。
2. `escape` 或者 e 过滤器：对某一个字符串进行转义。
3. `autoescape`-`endautoescape`标签，可以对他里面的代码块关闭或开启自动转义。 
　　　　　jinja: {% autoescape off/on %} 
　　　　　　　　　　...代码块 
　　　　　　　　　{% endautoescape %}

代码如下：

'signature': '<script>alert("hello")</script>'

0.flask有自动转义功能：

1.`safe`过滤器：可以关闭一个字符串的自动转义

2.`escape` 或者 e 过滤器：对某一个字符串进行转义。

3.autoescape---我去。。没成功

3.其他过滤器

truncate和striptags的应用场景

4. 自定义模版过滤器：

1.过滤器本质上就是一个函数。如果在模版中调用这个过滤器，那么就会将这个变量的值作为第一个参数传给过滤器这个函数，然后函数的返回值会作为这个过滤器的返回值。需要使用到一个装饰器：`@app.template_filter('cut')`

```python
@app.template_filter('cut')
def cut(value):
    value = value.replace("hello",'')
    return value
```
```html
<p>{{ article|cut }}</p>
```

其他疑问：不设app.config['TEMPLATES_AUTO_RELOAD'] = True 也可以模板重加载

2.案例2：自定义时间过滤器

类似：

@app.template_filter('handle_time')
def handle_time(time):
    """
    time距离现在的时间间隔
    1. 如果时间间隔小于1分钟以内，那么就显示“刚刚”
    2. 如果是大于1分钟小于1小时，那么就显示“xx分钟前”
    3. 如果是大于1小时小于24小时，那么就显示“xx小时前”
    4. 如果是大于24小时小于30天以内，那么就显示“xx天前”
    5. 否则就是显示具体的时间 2017/10/20 16:15
    """
    if isinstance(time,datetime):
        now = datetime.now()
        timestamp = (now - time).total_seconds()
        if timestamp < 60:
            return "刚刚"
        elif timestamp>=60 and timestamp < 60*60:
            minutes = timestamp / 60
            return "%s分钟前" % int(minutes)
        elif timestamp >= 60*60 and timestamp < 60*60*24:
            hours = timestamp / (60*60)
            return '%s小时前' % int(hours)
        elif timestamp >= 60*60*24 and timestamp < 60*60*24*30:
            days = timestamp / (60*60*24)
            return "%s天前" % int(days)
        else:
            return time.strftime('%Y/%m/%d %H:%M')
    else:
        return time

jinja2模板循环语句

1.for循环语句

1在`jinja2`中的`for`循环，也是`for...in...`的形式,并且也可以遍历所有的序列以及迭代器。
2但是不同的是，`jinja2`中的`for`循环没有`break`和`continue`语句,else 语句也挺奇怪。

@app.route('/')
def index():
    context = {
        'users':['wqbin','wangyang','K'],
        'person': {
            'username': 'wqbin',
            'age': 25,
            'country': 'china'
        },
        'books':[
            {
                'name': '三国演义',
                'author':'罗贯中',
                'price': 30
            },{
                'name': '西游记',
                'author':'吴承恩',
                'price': 25
            },{
                'name': '红楼梦',
                'author':'曹雪芹',
                'price': 20
            },{
                'name': '水浒传',
                'author':'施耐庵',
                'price': 19
            }
        ]
    }
    return render_template('index.html',**context)

2.if语句

if条件判断语句：

`if`条件判断语句必须放在`{% if statement %}`中间，并且还必须有结束的标签`{% endif %}`。
可以使用`>，<，<=，>=，==，!=`来进行判断，也可以通过`and，or，not，()`来进行逻辑合并操作。

@app.route('/')
def index():
    context = {
        'username': 'wqbin',
        'age': 17
    }
    return render_template('index.html',**context)

jinja2模板之宏

模板中的宏跟python中的函数类似，可以传递参数，但是不能有返回值，可以将一些经常用到的代码片段放到宏中，然后把一些不固定的值抽取出来当成一个变量。
使用宏的时候，参数可以为默认值。相关示例代码如下：

1. 定义宏：

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

2，导入宏

1. `import "宏文件的路径" as xxx`。
2. `from '宏文件的路径' import 宏的名字 [as xxx]`。
3. 宏文件路径，不要以相对路径去寻找，都要以`templates`作为绝对路径去找。
4. 如果想要在导入宏的时候，就把当前模版的一些参数传给宏所在的模版，那么就应该在导入的时候使用`with context`。

置顶
```html
{#{% from "macros/macros.html" import input as input_field %}#}
{% import "macros/macros.html" as macros with context %} 
```

3. 使用宏：

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

macros/macros.html

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

index/index.html

{#{% from "macros.html" import input as input_field %}#}
{% import "macros/macros.html" as macros with context %}
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>what is 宏</title>
</head>
<body>
    <h1>XX网站登录</h1>
    <table>
        <tbody>
            <tr>
                <td>用户名：</td>
                <td>{{ macros.input(name) }}</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>{{ macros.input("1234",type=type) }}</td>
            </tr>
            <tr>
                <td>请提交</td>
                <td>{{ macros.input(value="OK",type="submit") }}</td>
            </tr>
        </tbody>
    </table>
    <p>{{ name }}</p>
</body>

</html>

View Code

python

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

include语句

这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置。
`include`标签：如果想要使用父模版中的变量，直接引用不需要使用`with context`。
`include`的路径：直接从`templates`根目录下去找，不要以相对路径去找。

{% include "common/header.html" %}

案例代码：

common/footer.html

<style>
    .nav ul{
        overflow: hidden;
    }
    .nav ul li{
        float: left;
        margin: 0 20px;
    }
</style>
<nav class="nav">
    <ul>
        <li>首页</li>
        <li>flask源码</li>
        <li>案例教程</li>
        <li>{{ username }}</li>

    </ul>
</nav>
<p>******以上是顶部【common/footer.html】*****</p>

View Code

common/footer.html

<footer>
    ********这是底部的【common/footer.html】********
</footer>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>include学习</title>
</head>
<body>
    {% include "common/header.html" %}
    <div class="content">
        这是中间的 【index.html】
    </div>
    {% include "common/footer.html" %}
</body>
</html>

View Code

course_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% include "common/header.html" %}
    <div class="content">
        include详情【course_detail.html】
    </div>
    {% include "common/footer.html" %}
</body>
</html>

View Code

python：

from flask import Flask,render_template

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True

@app.route('/')
def hello_world():
    return render_template('index.html',username='wqbin')

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


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

View Code

set与with··endwith语句

set语句：
可以使用`set`语句来定义变量,一旦定义了这个变量，那么在后面的代码中，都可以使用这个变量。
示例如下：

```html
{% set username='wqbin' %}
<p>用户名：{{ username }}</p>
```

`with`语句：

`with`语句定义的变量，只能在`with`语句块中使用，超过了这个代码块，就不能再使用。
`with`语句可以定义一个空的`with`语句，在`with`块中通过`set`定义的变量的就只能在这个`with`块中使用。

示例代码如下：

```html
{% with major = 'IT' %}
<p>专业：{{ major }}</p>
{% endwith %}
```

```html
{% with %}
{% set major = 'IT' %}
<p>班级：{{ major }}</p>
{% endwith %}
```

加载静态文件

加载静态文件使用的是`url_for`函数。

第一个参数需要为`static`，

第二个参数需要为一个关键字参数`filename='路径'，路径查找时要以当前项目的`static`目录作为根目录。

 ```html
  {{ url_for("static",filename='xxx') }}
 ```

html:

templatesindex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>static静态加载</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>

</head>
<body>
<img src="{{ url_for('static',filename='imgs/300.jpg') }}" alt="">

</body>
</html>

static/css/index.css

body{
    background: pink;
}

模版继承

模版继承可以把一些公用的代码单独抽取出来放到一个父模板中，子模板直接继承就可使用，解耦后的代码可复用。

1.模版继承语法：
使用`extends`语句，来指明继承的父模板。父模板的路径，也是相对于`templates`文件夹下的绝对路径。
示例代码如下：

{% extends "common/father.html" %}

继承之后所有的子模板都具备父模板的所有格式。。。如果你要子模板有个性，那需要对父的使用block语句进行模板块分割。

2.覆盖父模板block语法：

父模版就应该有能力实现一些公用的功能并提供一个接口，但是子模板可能要根据具体的需求实现不同的代码，这时候从而实现具体业务需求的功能。

那这样只需在继承的父的模板块中重写模板块即可。

在父模板中：
```html
{% block block的名字 %}
{% endblock %}
```
在子模板中：（下面这样就覆盖上面父模板）
```html
{% block block的名字 %}
子模板中的代码
{% endblock %}
```

3.调用父模版代码block中的代码：

默认情况下，子模板如果实现了父模版定义的block。那么子模板block中的代码就会覆盖掉父模板中的代码。如果想要在子模板中仍然保持父模板中的代码，那么可以使用`{{ super() }}`来实现。

示例如下：

父模板：
```html
{% block body_block %}
        <p style="background: red;">这是父模板中的代码</p>
    {% endblock %}
```
子模板：
```html
{% block body_block %}
    {{ super() }}
    <p style="background: green;">我是子模板中的代码</p>
{% endblock %}
```

4.调用另外一个block中的代码

如果想要在另外一个模版中使用其他模版中的代码，则可以通过`{{ self.其他block名字() }}`实现。

父模板：
```html
{% block title %}
    这是父类的title
{% endblock %}
```
子模板：
```html
{% block body_block %}
    {{ self.title() }}
    <p style="background: green;">这是子模板中的代码</p>
{% endblock %}
```

5.其他注意事项：

子模板中的代码，第一行，应该是`extends`。
子模板中，如果要实现自己的代码，应该放到父类有的block中。如果放到其他地方，那么就不会被渲染。
再强调一遍子模板内容必须写在父模板定义的接口中，写在接口外面的内容不会被渲染。

案例讲解：

common/father.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}【father.html的title】{% endblock %}</title>
    <style>.nav ul{overflow: hidden;}
           .nav ul li{float: left;margin: 0 20px;}
    </style>
</head>
<body>
    <nav class="nav">
        <ul>
            <li style="background: pink;">首页【father.html】</li>
            <li style="background: pink;">flask学习文档【father.html】</li>
            <li style="background: pink;">flask学习教程【father.html】</li>
            <li style="background: pink;">{{ username }}</li>
        </ul>
    </nav>
    {% block body_block %}
        <p style="background: red;">这是父模板中的代码1【father.html】</p>
    {% endblock %}
    {% block body_block2 %}
        <p style="background: red;">这又是父模板中的代码2【father.html】</p>
    {% endblock %}
        {% block body_block3 %}
        <p style="background: red;">这又是父模板中的代码3【father.html】</p>
    {% endblock %}
    {% block footer %}
        <footer>
        <p style="background: pink;">这是底部【father.html】</p>
        </footer>

    {% endblock %}
</body>
</html>

View Code

index2.html

{% extends 'common/father.html' %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wqbin</title>
</head>
<body>
<p>子模板中，如果要实现自己的代码，应该放到block中。
    如果放到其他地方，那么就不会被渲染
</p>
{% block body_block %}
    <p >子模板中的代码【index2.html】
        父类有body_block   所以会被覆盖
    </p>
{% endblock %}
{% block index2_block %}
    <p >子模板中的代码【index2.html】
        父类没有index2_block 所以也不会被渲染
     </p>
{% endblock %}

{% block body_block2 %}
    {{ super() }}
    <p >子模板中的代码【index2.html】:
        父类有body_block2,重新用super调用，再添加子模板自己功能
     </p>
{% endblock %}

{% block body_block3 %}

    <p >子模板中的代码【index2.html】：父类有body_block3
        使用self.title调用 父类的title {{ self.title() }}</p>
{% endblock %}
</body>
</html>

View Code