在Flask中使用Jinjia2

一.模版引擎

Flask 使用Jinja2引擎来渲染模版

1.1什么是模板

简单来说，在web应用开发中，为了实现前后端的解耦 ，分离前后端逻辑，就可以将表现逻辑分离出来交由模板通过模板引擎来实现。

其实模板就是包含静态与动态内容的网页内容。

1.2什么是Jinja2

Jinja2 是一种现代的、对设计人员友好的Python模板语言 。具有快速、广泛使用 和安全的特性。

1.3什么是模板渲染

所谓渲染，其实就是向网页中加载静态内容 及动态内容值的过程。

二.Jinja2语法

2.1传递一个参数

app.py：

python 复制代码

@app.route('/')
def hello_world():
    content = "首页内容"
    return render_template('index.html', content=content)

index.html：

html 复制代码

<body>
    <h1>{{ content }}</h1>
</body>

通过**{{ var }}使用传来的参数值**

2.2传递列表型参数

app.py：

python 复制代码

@app.route('/')
def hello_world():
    content = ["1","2","3","4","5"]
    return render_template('index.html', content=content)

index.html：

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    {{% for item in content %}}
        <p>{{item}}</p>
    {{% endfor %}}
</body>

2.3传递所有参数

python 复制代码

@app.route('/')
def hello_world():
    title = "首页"
    content = "首页内容"
    return render_template('index.html', **locals())

使用****locals()将所有参数** 传递给了模板，然后选择性使用

2.4分隔符

{{ var }} 是不同于html原生语法的东西

{{}} 叫分隔符 ，Jinja2 中的分隔符有好几个：

**{% ..... %}**用于声明

**{{ .... }}**用于打印表达式，使用变量等

**{ # .... # }**用于模版注释

**# .... ##**对语法的简化

2.5if

模板语法：

html 复制代码

{% if condition %}
    do something
{% elif condition %}
    do something
{% else %}
    do something
{% endif %}

2.6for

模板语法：

html 复制代码

{% for item in iteratable %}
    do something
{% endfor %}

2.7set

set 用于在模版中设置变量 ，直接在set 中定义代码的变量，如果不用with修饰，默认是全局变量。

html 复制代码

{% set name = '鞠婧祎' %}
<span>{{name}}</span>

2.8with

with 用于创建一个局部作用域 ，在这个局部作用域使用set 定义的变量仅在with 中有效，不会污染全局

html 复制代码

{% with %}
    {% set name = '鞠婧祎' %}
    <span>{{name}}</span>
{% endwith %}

上面的set 也可以直接写进with中，格式如下：

html 复制代码

{% with name = '鞠婧祎' %}
    <span>{{name}}</span>
{% endwith %}

三.模版插入与模版继承

3.1include模版插入

include 用于向某个HTML指定位置中插入一个模板

PS："include只能插入，不能修改插入的内容！！"

模板语法：

{% include template_name%}

例如：

header.html：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

footer.html：

html 复制代码

    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

index.html：

html 复制代码

{% include 'header.html' %}
<main>
    <p>This is the content of the homepage.</p>
</main>
{% include 'footer.html' %}

可以看到，include 只能插入一个模板，并不能对模板进行选择性的修改 ，因此局限性较大

3.2extends模版继承

extends 用于实现模板继承 ，子模板可以继承父模板的内容，并且可以修改。

在使用extends 时，可以使用block指令 来圈选子模板可以修改的范围。

base.html (父模板)：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

home.html (子模板)：

html 复制代码

{% extends 'base.html' %}

{% block title %}Homepage - My Website{% endblock %}

{% block content %}
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>This is the content of the homepage.</p>
    </main>
{% endblock %}

如果我们想修改父模板的内容 ，且想保留父模板的内容 ，可以使用："{{ super() }}"来保留父模板内容

在Flask中使用Jinjia2

目录

一.模版引擎

1.1什么是模板

1.2什么是Jinja2

1.3什么是模板渲染

二.Jinja2语法

2.1传递一个参数

2.2传递列表型参数

2.3传递所有参数

2.4分隔符

2.5if

2.6for

2.7set

2.8with

三.模版插入与模版继承

3.1include模版插入

3.2extends模版继承