Flask Jinja2模板引擎-蒲公英云

简介

Jinja2是Python下一个被广泛应用的模版引擎，他的设计思想来源于Django的模板引擎，并扩展了其语法和一系列强大的功能。其中最显著的一个是增加了沙箱执行功能和可选的自动转义功能，这对大多应用的安全性来说是非常重要的(来源百度百科)。

Jinja2模板

Flask是一款开发Web服务端的框架，所以肯定是离不开页面的。上一章，我们使用路由返回数据时，返回内容中包含的有少量的HTML代码，如果需要的HTML代码多了，就很繁琐了，这时我们就可以使用Jinja2模板引擎。

Flask提供的 render_template 函数封装了Jinja2模板引擎；
render_template 函数的第一个参数是模板的文件名，后面的参数都是键值对，表示向模板中传递的参数值。

基本使用

创建一个视图函数渲染模板以及设置模板参数。

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

render_template函数第一个参数对应的是模板的文件名，后面的参数为向模板中传递的参数值。
Flask在程序文件夹中的templates子文件夹中根据模板文件名来寻找对应的模板。
所以需要在templates子文件夹下定义一个hello.html文件。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {# name为视图函数传递过来的参数 #}
    <h1>Hello, {
   { name }}！</h1>
</body>
</html>

其中用 { {}} 来表示变量名，用于接收视图函数传递的参数，其变量名与视图函数传递的键名需要一致；
{# #} 表示注释，注释的内容不会在html中被渲染出来。运行效果如下：

在这里插入图片描述
上面使用模板接收了简单的变量，除此之外还可以接收字典，列表，对象和获取session中的内容等。下面来看一下使用模板接收一些复杂的类型数据。
修改后的视图函数代码：

@app.route("/hello/<name>")
def hello(name):
    mydict = {
        "name": '李四',
        'age': 18
    }
    mylist = ['aaa', 'bbb', 'ccc']
    session['name'] = "abc"
    return render_template("hello.html", name=name, mydict=mydict, mylist=mylist);

模板页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello, {
   { name }}！</h1>
    <h1>获取字典数据：{
   { mydict['name'] }} --- {
   { mydict['age'] }}</h1>
    <h1>获取列表数据：{
   { mylist[1] }}</h1>
    <h1>通过过滤器修改变量(把值转换为大写形式)：{
   { mylist[0] | upper }}</h1>
    <h1>获取session中的内容：{
   { session.get("name") }}</h1>
    <h1>请求头信息：{
   { request.headers }}</h1>
</body>
</html>

运行效果如下：
在这里插入图片描述

除了上面用到的upper过滤器，Jinja2还提供了很多过滤器，如下是Jinja2常用的过滤器。

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

控制结构

Jinja2中提供了很多种控制结构，可以用来改变模块的渲染流程，如if、for等。
在Jinja2中使用if控制结构，语法格式和python的语法格式一样，但必须写在{% %}中，不同python的是有开始标签就必须要有结束标签。

{% if comment %}
    <p>{
   { comment }}</p>
{% else %}
    <p>comment字典为空</p>
{% endif %}

for循环的使用，遍历一个字典中的所有数据。

{% for user in users %}
    <p>姓名：{
   { user['name'] }}， 年龄：{
   { user['age'] }}</p>
{% endfor %}

上述的变量都是在视图函数返回时传递的，视图函数代码如下：

@app.route('/contro')
def contro():
    users = [
        {"name": "张三", "age":20},
        {"name": "李四", "age":25},
        {"name": "王五", "age":16},
        {"name": "小华", "age":22}
    ]
    comment = []
    return render_template("contro.html", comment=comment, users=users)

页面完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% if users %}
        {% for user in users %}
            <p>姓名：{
   { user['name'] }}， 年龄：{
   { user['age'] }}</p>
        {% endfor %}
    {% else %}
        <p>没有学生信息！</p>
    {% endif %}
    {% if comment %}
        <p>{
   { comment }}</p>
    {% else %}
        <p>comment字典为空</p>
    {% endif %}
</body>
</html>

运行效果如下
在这里插入图片描述

模板继承

在实际开发中有时候会有很多重复使用的模块代码片段，这时我们可以把这些模块代码写入一个单独的文件，需要用时，直接继承使用，以避免重复编写。
创建一个名为base.html的基模板，用于编写公共部分模块。代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
            {# 其他页面可以重写标题 #}
        {% endblock %}
    </title>
    {% block css %}
        {# 其他页面可以自定义加载样式文件 #}
    {% endblock %}
</head>
<body>
{% block content %}
    {# 其他页面内容 #}
{% endblock %}
</body>
</html>

block标签定义的元素可在继承模块中修改。上述定义了title、css、content三个模块，其他文件继承后可以重写这些模块中的内容。
新建一个模板文件继承base.html模板

{# 继承base.htm模块 #}
{% extends 'base.html' %}
{% block title %}
    重写base.html中title模块的内容
{% endblock %}
{% block content %}
    {# 重写base.html中content模块内容 #}
    {% if users %}
        {% for user in users %}
            <p>姓名：{
   { user['name'] }}， 年龄：{
   { user['age'] }}</p>
        {% endfor %}
    {% else %}
        <p>没有学生信息！</p>
    {% endif %}
    {% if comment %}
        <p>{
   { comment }}</p>
    {% else %}
        <p>comment字典为空</p>
    {% endif %}
{% endblock %}