Flask本身是需要依靠Jinja2。其模板引擎也采用的是Jinja2。

本博文重点介绍一下Jinja2模板引擎的基本使用。


一:模板的基本使用

app.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
        return render_template("index.html")
if __name__=="__main__":
        app.run(debug=True,host='0.0.0.0')
templates/index.html
 <html>
        <head>index</head>
        <body>
                        <h1>Welcome to you</h1>
        </body>
</html>

    就这样一个简单的模板的使用就OK了。页面和逻辑就可以很好的进行分离,那么如何将数据传递给页面来显示呢。那么就需要使用模板引擎中的一些机制。通过在模板这种嵌入变量来实现数据的传递。

二:模板中嵌入变量

app.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
        username = "zhang"
        head = "Starting"
        return render_template("index.html",name=username,head=head)


if __name__=="__main__":
        app.run(debug=True,host='0.0.0.0')
templates/index.html
<html>
        <head>{{ head }}</head>
        <body>
                        <h1>Welcome to you</h1>
                        <h3>{{ name }}</h3>
        </body>
</html>

    上面的这个例子就是简单的使用{{ 变量名 }},来做占位符,使用render_template来传递变量值的形式来实现数据传递给html页面的。如果想使用循环结构和判断结构来在页面中实现一些简单的逻辑的话,jinja2也提供了相应的模板标签实现页面的简单逻辑。


三:模板中的控制结构

1.循环结构

app.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
        username = "zhang"
        head = "Starting"
        name=[{'username':'zhang','age':'18'},{'username':'wang','age':'19'}]
        return render_template("index.html",name=username,head=head,listdata=name)

if __name__=="__main__":
        app.run(debug=True,host='0.0.0.0')
templates/index.html
<html>
        <head>{{ head }}</head>
        <body>
                        <h1>Welcome to you</h1>
                        <h3>{{ name }}</h3>
                                <table>
                                <tr>
                                        <th>name</th>
                                        <th>age</th>
                                <tr>
                                {% for p in listdata %}
                                        <tr>
                                                <td>{{ p.username }}</td>
                                                <td>{{ p.age }}</td>
                                        </tr>
                                {% endfor %}
                                </table>
        </body>
</html>

2.判断结构

<html>
        <head>{{ head }}</head>
        <body>
                        <h1>Welcome to you</h1>
                        <h3>{{ name }}</h3>
                                <table>
                                <tr>
                                        <th>name</th>
                                        <th>age</th>
                                <tr>
                                {% for p in listdata %}
                                        <tr>
                                                <td>{{ p.username }}</td>
                                                {% if p.age <= 18 %}
                                                <td>未成年</td>
                                                {% else %}
                                                <td>`p`.`age`</td>
                                                {% endif %}
                                        </tr>
                                {% endfor %}
                                </table>
        </body>
</html>
判断年龄是否小于等于18岁,小于等于18岁的显示未成年。

使用这些简单的逻辑结构就可以轻松的实现一些简单的页面逻辑了。


四:模板中的宏和过滤器

1.模板中宏的实现

<html>
        <head>{{ head }}</head>
        <body>
                        <h1>Welcome to you</h1>
                        <h3>{{ name }}</h3>
                                <table>
                                <tr>
                                        <th>name</th>
                                        <th>age</th>
                                <tr>
{% macro print_table(var) %}

<td>{{ var }}</td>

{% endmacro %}
                                {% for p in listdata %}
                                        <tr>
                                                {{ print_table(p.username) }}
                                                {% if p.age <= 18 %}
                                                <td>未成年</td>
                                                {% else %}
                                                {{ print_table(p.age)}}
                                                {% endif %}
                                        </tr>
                                {% endfor %}
                                </table>
        </body>
</html>

2.过滤器

jinja2默认自带的过滤器
<html>
        <head>{{ head }}</head>
        <body>
                        <h1>Welcome to you</h1>
                        <h3>{{ name1|safe }}</h3>
                        <h3>{{ name2|capitalize }}</h3>
                        <h3>{{ name3|lower }}</h3>
                        <h3>{{ name4|upper }}</h3>
                        <h3>{{ name5|title }}</h3>
                        <h3>{{ name6|trim }}</h3>
                        <h3>{{ name7|striptags }}</h3>
        </body>
</html>
提供的数据
        name1 = "<h1>aaaa</h1>"
        name2 = "swqdjs"
        name3 = "JGHJGJH"
        name4 = "dsadsa"
        name5 = "sdad dsadsa dsa d"
        name6 = "   dasdsa   "
        name7 = "<h4>sdaweqwe</h4>"

结果如下:

wKiom1ORg43A6JYAAAB37W-R-ro879.jpg


五:自定义过滤器

除了模板引擎自带的过滤器的话用户也可以自定义过滤器。

#注册一个过滤器
#方式一
@app.template_filter('reverse')
def reverse_filter(s):
    return s[::-1]

方式二
def reverse_filter(s):
    return s[::-1]
app.jinja_env.filters['reverse'] = reverse_filter  
自定义完过滤器就可以在网页模板中使用了。


六:自定义全局变量/函数

#这个变量无需传递给模板,可以直接在所有模板中使用。
@app.context_processor
def inject_user():
    return dict(test="<h1>a tmp variable</h1>")
#下面的functest函数也是可以在所有的模板中使用的
#使用方式如下{{ functionname(参数) }}
@app.context_processor
def testfunc():
    def functest(name):
        return "<h1>%s</h1>" %name
    return dict(functest=functest)


七:模板中的继承和覆盖

layout.html
<html>
        <head>
        {{ block head}}
        {{ endblock }}
        </head>
        <body>
                {{ block body }}
                {{ endblock }}
        </body>
</html>

index.html
#继承layout.html,并可以覆盖其指定部分
{% extends "layout.html" %}
{block head %}
    <title>index</title>
{{ endblock }}
{{ block body }}
    <h3>welcome to you</h3>
{{ endblock}}