在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模版继承

一.模版引擎

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() }}"来保留父模板内容
相关推荐
XINGTECODE1 小时前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
程序猿进阶1 小时前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
FIN技术铺1 小时前
Spring Boot框架Starter组件整理
java·spring boot·后端
凡人的AI工具箱1 小时前
15分钟学 Go 第 60 天 :综合项目展示 - 构建微服务电商平台(完整示例25000字)
开发语言·后端·微服务·架构·golang
先天牛马圣体1 小时前
如何提升大型AI模型的智能水平
后端
java亮小白19971 小时前
Spring循环依赖如何解决的?
java·后端·spring
2301_811274312 小时前
大数据基于Spring Boot的化妆品推荐系统的设计与实现
大数据·spring boot·后端
草莓base2 小时前
【手写一个spring】spring源码的简单实现--容器启动
java·后端·spring
Ljw...3 小时前
表的增删改查(MySQL)
数据库·后端·mysql·表的增删查改
编程重生之路3 小时前
Springboot启动异常 错误: 找不到或无法加载主类 xxx.Application异常
java·spring boot·后端