在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() }}"来保留父模板内容
相关推荐
码农派大星。8 分钟前
Spring Boot 配置文件
java·spring boot·后端
杜杜的man1 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*1 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
llllinuuu1 小时前
Go语言结构体、方法与接口
开发语言·后端·golang
cookies_s_s1 小时前
Golang--协程和管道
开发语言·后端·golang
为什么这亚子1 小时前
九、Go语言快速入门之map
运维·开发语言·后端·算法·云原生·golang·云计算
想进大厂的小王1 小时前
项目架构介绍以及Spring cloud、redis、mq 等组件的基本认识
redis·分布式·后端·spring cloud·微服务·架构
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
霍格沃兹测试开发学社测试人社区2 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
2402_857589362 小时前
SpringBoot框架:作业管理技术新解
java·spring boot·后端