（十一）Flask模板引擎jinja2

模板引擎Jinja2

一、简介及基本使用：

Flask使用Jinja2作为默认的模板引擎。Jinja2是一个功能强大且易于使用的模板引擎，它允许我们在HTML中嵌入Python代码，并通过将模板和数据进行渲染来生成动态内容。

实战之在Flask中使用Jinja2模板引擎：

  1. 在Flask应用程序的根目录下创建一个名为templates的文件夹，用于存放模板文件。

  2. 创建一个名为index.html的模板文件，在其中可以使用Jinja2语法来插入动态内容，即使用双花括号{{ }}来插入Jinja2表达式，这些表达式将在渲染模板时被替换为实际的值。

    <!DOCTYPE html>
<html>
<head>
    <title>Flask Template Engine</title>
</head>
<body>
    <h1>Welcome to {{ title }}</h1>
    <p>{{ message }}</p>
</body>
</html>

  3. 在Flask应用程序中导入render_template函数，并在路由函数中调用该函数以渲染模板并返回响应。

    from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    title = 'Flask Template Engine'
    message = 'Hello, World!'
    return render_template('index.html', title=title, message=message)


if __name__ == '__main__':
    app.run()

    在视图函数中，定义了title和message两个变量，并将其传递给render_template()函数。

    render_template()函数接收模板名称作为第一个参数，以及可选的关键字参数用于传递给模板的数据。

    render_template()函数将根据模板文件中的Jinja2语法进行渲染，并返回渲染后的HTML内容作为响应发送给客户端。

通过使用Jinja2模板引擎，可以将静态HTML页面与动态生成的内容结合起来，实现更灵活、可维护和可重用的视图层逻辑。在模板中，可以使用条件语句、循环语句、过滤器等功能，对数据进行处理和展示，从而创建出更丰富的用户界面。

先简单将一讲Jinja2模板引擎的一些特性和用法【下面都会详细讲解~】：

  1. 模板语法：Jinja2使用{{ ... }}来标记表达式，表示将变量插入到模板中。例如，{{ name }}将会在模板中显示变量name的值。而使用{% ... %}来标记控制结构和语句，如条件语句、循环语句等。

  2. 变量：可以在模板中使用变量来动态地渲染内容。通过传递变量给模板进行渲染，例如：render_template('index.html', name=name)。在模板中，可以使用{{ variable_name }}语法来插入变量的值。

  3. 过滤器：Jinja2提供了许多内置的过滤器函数，用于对变量进行处理和格式化。例如，{{ name|capitalize }}会将变量name的首字母大写。还可以自定义过滤器函数，使用@app.template_filter()装饰器注册为模板过滤器。

  4. 控制结构：Jinja2支持各种控制结构，如if语句、循环语句和宏。通过使用{% if ... %}...{% endif %}来实现条件语句，使用{% for ... in ... %}...{% endfor %}来实现循环语句，以及使用{% macro ... %}...{% endmacro %}来定义宏。

  5. 继承：Jinja2允许模板之间进行继承，以提高代码的可重用性和可维护性。通过使用{% extends ... %}指令，一个模板可以继承另一个模板，并在其中使用{% block ... %}...{% endblock %}来替换或扩展基础模板中的内容。

  6. 模板包含：Jinja2支持模板包含，允许将一个模板嵌入到另一个模板中。通过使用{% include ... %}指令，可以在模板中引用其他模板文件，实现代码的复用。

  7. 自定义全局变量和函数：可以在Flask应用中注册自定义的全局变量和函数，使其在所有模板中可用。通过使用app.jinja_env.globals['variable_name'] = value来注册全局变量【需要注意，在注册模板全局变量时，建议将其放置在一个在应用启动时运行的函数（如before_first_request装饰的函数）中，以确保全局变量在所有请求中都可用】；使用@app.template_global()装饰器来注册全局函数。

二、支持的Python数据类型：

Flask的Jinja2模板引擎支持以下Python数据类型：

  1. 字符串（String）：用于表示文本数据。
  2. 整数（Integer）：用于表示整数值，如1、2、3等。
  3. 浮点数（Float）：用于表示带有小数部分的数值，如3.14、2.5等。
  4. 布尔值（Boolean）：用于表示真或假的值，True或False。
  5. 列表（List）：用于表示有序的集合，可以包含任意类型的元素。例如：[1, 2, 'a', True]。
  6. 元组（Tuple）：类似于列表，但是是不可变的，也就是说不能修改元素的值。例如：(1, 2, 'a', True)。
  7. 字典（Dictionary）：用于表示键值对的集合，其中每个元素由一个键和一个对应的值组成。例如：{'name': 'John', 'age': 25}。
  8. 集合（Set）：用于表示无序且唯一的元素集合，不允许重复的元素。例如：{'apple', 'banana', 'orange'}。

除了上述基本数据类型之外，Jinja2模板还支持使用过滤器对数据进行处理和格式化，以及使用控制结构如条件语句和循环语句来控制模板的渲染流程。

需要注意的是，Jinja2模板引擎并不限制使用上述数据类型，可以在模板中使用任何Python支持的数据类型。如果有自定义的类或对象，也可以将其传递给模板，并在模板中访问其属性或调用其方法。

（1）实战在模板中使用Python常见的基本数据类型：

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/index", methods=['GET', 'POST'])
def index():
    context = {
        'k1': 123,
        'k2': [11, 22, 33],
        'k3': {'name': 'oldboy', 'age': 84}
    }

    return render_template('index.html', **context)


if __name__ == '__main__':
    app.run()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{ k1 }}</h1>
    <h1>{{k2.0}}  {{k2[0]}}</h1>
    <h1>{{k3.name}}  {{k3['name']}}  {{k3.get('name', 888)}}</h1>
</body>
</html>

在这里插入图片描述

（2）实战在模板中使用匿名函数：

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/index", methods=['GET', 'POST'])
def index():
    context = {
        'k1': 123,
        'k2': [11, 22, 33],
        'k3': {'name': 'oldboy', 'age': 84},
        'k4': lambda x: x+1
    }

    return render_template('index.html', **context)


if __name__ == '__main__':
    app.run()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{ k1 }}</h1>
    <h1>{{k2.0}}  {{k2[0]}}</h1>
    <h1>{{k3.name}}  {{k3['name']}}  {{k3.get('name', 888)}}</h1>
    <h1>{{k4(66)}}</h1>
</body>
</html>

在这里插入图片描述

（3）实战在模板中使用普通函数：

from flask import Flask, render_template

app = Flask(__name__)


def gen_input(value):
    return "<input value='%s' />" %value


@app.route("/index", methods=['GET', 'POST'])
def index():
    context = {
        'k1': 123,
        'k2': [11, 22, 33],
        'k3': {'name': 'oldboy', 'age': 84},
        'k4': lambda x: x+1,
        'k5': gen_input
    }

    return render_template('index.html', **context)


if __name__ == '__main__':
    app.run()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{ k1 }}</h1>
    <h1>{{k2.0}}  {{k2[0]}}</h1>
    <h1>{{k3.name}}  {{k3['name']}}  {{k3.get('name', 888)}}</h1>
    <h1>{{k4(66)}}</h1>

    <h1>{{k5(99)}}</h1>
</body>
</html>

如果不加 | safe，就直接显示字符串而不是input标签。这是Flask防止xss攻击。默认用户输入都是不安全的。

在这里插入图片描述

两种解决方法：

  • 一种是前端加 | safe；
  • 一种是后端使用markup。
    <h1>{{k5(99) | safe}}</h1>

from flask import Flask, render_template, Markup

app = Flask(__name__)


def gen_input(value):
    # return "<input value='%s' />" %value
    return Markup("<input value='%s' />" %value)

三、template_global()装饰器：

问题引入：

当我们在每一个模板里都想自定义一些函数： 如果每一个视图里都手动加，是不是太麻烦了！

解决方法：

  • 这就引出了template_global()装饰器，使用它装饰的函数在每一个模板里都可以直接使用！！！

    template_global()装饰器用于将一个函数注册为全局模板变量。被该装饰器修饰的函数可以在所有的模板中使用，并且不需要在每个视图函数中都传递一遍。

@app.template_global()
def sb(a1, a2):
    return a1 + a2

<body>
	<h1>{{sb(1,2)}}</h1>
</body>

需要注意的是，在使用template_global装饰器时，函数名就是全局模板变量的名称。因此，在模板中调用全局模板变量时，直接使用函数名即可。

通过使用template_global装饰器，我们可以方便地注册全局模板变量，提高代码的重用性和可维护性，并简化视图函数与模板之间的数据传递过程。

四、template_filter装饰器：

  1. 常规用法：

    template_filter用于将一个函数注册为模板过滤器。被该装饰器修饰的函数可以在模板中通过过滤器的名称进行调用，并对数据进行处理和格式化。

    实战使用：

from flask import Flask, render_template

app = Flask(__name__)


@app.template_filter()
def reverse_string(string):
    return string[::-1]


@app.route('/')
def home():
    name = 'John Doe'
    return render_template('index.html', name=name)


if __name__ == '__main__':
    app.run()

在上述示例中，定义了一个名为reverse_string的函数，并使用template_filter()装饰器将其注册为模板过滤器。这个函数接受一个字符串参数，并返回反转后的字符串。

在home视图函数中，将用户的姓名传递给模板，并在模板中使用{{ name|reverse_string }}来调用模板过滤器。这样，在模板中会自动将用户的姓名进行反转处理。

在使用template_filter装饰器时，函数名就是模板过滤器的名称。因此，在模板中调用模板过滤器时，使用|管道符号将变量与过滤器名称分隔开。

在这里插入图片描述

  1. 技巧使用：
from flask import Flask, render_template

app = Flask(__name__)


@app.template_filter()
def add_all(a1, a2, a3):
    return a1 + a2 + a3


@app.route('/')
def home():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>{{ 1 | add_all(2,3) }}</h1>
</body>
</html>

在这里插入图片描述

五、Flask模板的继承：

Flask模板的继承是一种在多个模板中共享相同布局和结构的方式。通过使用模板的继承，我们可以定义一个基础模板，其中包含通用的 HTML 结构和样式，并在其他模板中继承这个基础模板，只需专注于特定内容的定义。

实战讲解：

base.html（基础模板）：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        {% block header %}
            <h1>Welcome to my website!</h1>
        {% endblock %}
    </header>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        {% block footer %}
            &copy; 2023 My Website - GuHanZhe. All rights reserved.
        {% endblock %}
    </footer>
</body>
</html>

home.html（继承自base.html）：

{% extends 'base.html' %}

{% block title %}
    Home Page
{% endblock %}

{% block content %}
    <h2>Welcome to the Home Page!</h2>
    <p>Content specific to the home page goes here.</p>
{% endblock %}

about.html（继承自base.html）：

{% extends 'base.html' %}

{% block title %}
    About Page
{% endblock %}

{% block content %}
    <h2>About Us</h2>
    <p>Content specific to the about page goes here.</p>
{% endblock %}

在上述示例中，base.html 是一个基础模板，定义了整个网页的结构和通用元素。其他模板（home.html 和 about.html）通过 {% extends 'base.html' %} 指令继承自 base.html，并可以使用 {% block %} 块来替换或扩展基础模板中的内容。

每个子模板都可以通过 {% block %} 块来定义自己特定的内容，这些块将在渲染时插入到相应的位置。例如，在 home.html 中的 {% block content %} 块中定义了特定于首页的内容。

通过使用模板继承，可以避免在每个模板中重复编写相同的 HTML 结构和样式，提高代码的可重用性和可维护性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/151532.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python | 机器学习之逻辑回归

Python | 机器学习之逻辑回归

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《人工智能奇遇记》&#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 目录结构 1. 机器学习之逻辑回归概念 1.1 机器学习 1.2 逻辑回归 2. 逻辑回归 2.1 实验目的…
阅读更多...
不可错过的10本架构师必读书籍，带你嗨翻架构师之路，三连评论送书！

不可错过的10本架构师必读书籍，带你嗨翻架构师之路，三连评论送书！

书籍目录 一&#xff1a;书前开胃菜 二&#xff1a;高并发架构实战 三&#xff1a;架构师的自我修炼 四&#xff1a;中台架构与实现 五&#xff1a;分布式系统架构 六&#xff1a;流程自动化实战 七&#xff1a;分布式系统架构与开发 八&#xff1a;服务端开发 九&am…
阅读更多...
代码随想录图论|130. 被围绕的区域 417太平洋大西洋水流问题

代码随想录图论|130. 被围绕的区域 417太平洋大西洋水流问题

130. 被围绕的区域 **题目&#xff1a;**给你一个 m x n 的矩阵 board &#xff0c;由若干字符 ‘X’ 和 ‘O’ &#xff0c;找到所有被 ‘X’ 围绕的区域&#xff0c;并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 题目链接&#xff1a;130. 被围绕的区域 解题思路&#xff1a…
阅读更多...
基于springboot实现“漫画之家”系统项目【项目源码+论文说明】

基于springboot实现“漫画之家”系统项目【项目源码+论文说明】

基于springboot实现“漫画之家”系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&am…
阅读更多...
FreeSWITCH案例跟踪之一，sip bye发不出去

FreeSWITCH案例跟踪之一，sip bye发不出去

报故障的说&#xff0c;网关呼叫fs&#xff0c;网关收不到fs的sip bye Wireshark看call-flow, 是这样的&#xff1a; INVITE里面的contact是<sip:172.23.4.109:5060;transporttcp> 于是Wireshark设置过滤条件为ip.addr 172.23.4.109 and tcp.port 5060 fs tcp连网关被…
阅读更多...
提高生存能力的7个关键技巧！

提高生存能力的7个关键技巧！

作为一款备受热议和玩家喜爱的多人在线射击游戏&#xff0c;《绝地求生》中生存能力的提高是取得胜利的关键。在这篇实用干货分享中&#xff0c;我们将详细说明7个关键技巧&#xff0c;帮助你在游戏中提高生存能力&#xff0c;获得更多胜利。 1.选择降落点&#xff1a;选择适合…
阅读更多...
make和makefile

make和makefile

一、认识make和Makefile 1、会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 2、一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的规则来指定&#xff0c;哪些文件需要先编译…
阅读更多...
java版直播商城平台规划及常见的营销模式 电商源码/小程序/三级分销+商城免费搭建

java版直播商城平台规划及常见的营销模式 电商源码/小程序/三级分销+商城免费搭建

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…
阅读更多...
Windows10关闭系统自动更新

Windows10关闭系统自动更新

1.背景 2.步骤 第一步: 第二步: 完美
阅读更多...
笔记本电脑没有声音？几招恢复声音流畅！

笔记本电脑没有声音？几招恢复声音流畅！

笔记本电脑已经成为我们日常生活和工作的重要工具&#xff0c;而其中的声音是其功能之一。然而&#xff0c;有时您可能会遇到笔记本电脑没有声音的问题&#xff0c;这可能是由多种原因引起的。在本文中&#xff0c;我们将深入探讨笔记本电脑没有声音的常见原因&#xff0c;并提…
阅读更多...
jbase实现通用码表

jbase实现通用码表

没有通用码表的体系是不完美的&#xff0c;当年我用C#能实现的通用码表&#xff0c;现在在java一样的实现了&#xff0c;通用码表对提高开发效率和降低开发成本的作用巨大&#xff0c;开发可以专注写业务&#xff0c;而不必被太多的维护界面束缚。进而体现在产品竞争力上面&…
阅读更多...
加密狗作用是什么？工作原理及使用方法

加密狗作用是什么？工作原理及使用方法

加密狗是一种用于软件保护的硬件设备&#xff0c;通常被用于防止软件被非法复制、篡改或者恶意使用。以下是加密狗的作用、工作原理及使用方法&#xff1a; 作用 加密狗的主要作用是提供软件保护&#xff0c;它能够通过加密算法对软件进行加密&#xff0c;以防止软件被非法复制…
阅读更多...
从0开始学习JavaScript--JavaScript 类和模块详解

从0开始学习JavaScript--JavaScript 类和模块详解

JavaScript的类和模块是现代Web开发中的重要组成部分&#xff0c;它们提供了一种更面向对象的编程方式和模块化的组织代码方式。本文将深入探讨JavaScript中类和模块的各个方面&#xff0c;并通过丰富的示例代码来帮助大家更好地理解和运用这些概念。 1. 类的基本概念与语法 …
阅读更多...
Linux编译器：gcc/g++的使用

Linux编译器：gcc/g++的使用

我们在学习编译器时&#xff0c;我们不仅要只会使用编译器&#xff0c;还要理解程序的编译过程。一个程序存在两个不同的环境。第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令&#xff1b;第2种是执行环境&#xff0c;它用于实际执行代码。本篇文章将…
阅读更多...
Linux C 进程间通信

Linux C 进程间通信

进程间通信 概述进程间通信方式管道概述管道函数无名管道 pipe有名管道 makefifo删除有名管道 rmove 有名管道实现 双人无序聊天 例子 信号信号概述信号处理过程信号函数传送信号给指定的进程 kill注册信号 signal查询或设置信号处理方式 sigaction设置信号传送闹钟 alarm 有名…
阅读更多...
【ONE·Linux || 网络基础（三）】

【ONE·Linux || 网络基础（三）】

总言 主要内容&#xff1a;HTTP和HTTPS工作方式简述。 文章目录 总言6、HTTP协议&#xff08;应用层二&#xff09;6.1、入门认识6.1.1、认识URL6.1.2、urlencode和urldecode 6.2、快速构建6.2.1、快速构建http请求和响应的报文格式6.2.2、http demo6.2.2.1、sock.hpp &&a…
阅读更多...
vite环境变量相关

vite环境变量相关

环境变量&#xff1a;根据环境的不同&#xff0c;灵活的自动读取相应的变量。避免了手动修改。 import path from path import postCssPxToRem from postcss-pxtorem import { defineConfig, loadEnv } from vite import createVitePlugins from ./vite/plugins import copy f…
阅读更多...
【LeetCode刷题笔记】二叉树（三）

【LeetCode刷题笔记】二叉树（三）

701. 二叉搜索树中的插入操作 解题思路： 1. 模拟 ，如果 根节点为空 ，就用 插入值创建根节点 直接返回。否则， cur 从 根节点 开始，比较 当前节点的值和插入值的大小关系 ： 1）如果 插入值 < cur ，就
阅读更多...
一张图系列 - “position_embedding”

一张图系列 - “position_embedding”

关于位置编码&#xff0c;我感觉应该我需要知道点啥&#xff1f; 0、需要知道什么知识&#xff1f; multi head atten 计算 复数的常识 1、embedding 是什么&#xff1f; position embedding常识、概念&#xff0c;没有会怎样&#xff1f; 交换token位置&#xff0c;没有P…
阅读更多...
vue手动搭建脚手架（保姆式教案）

vue手动搭建脚手架（保姆式教案）

目录 1.创建项目 1.node.js环境搭建 2.安装vue-cli 3.搭建项目 目录结构 1.创建项目 1.node.js环境搭建 下载安装node.js&#xff08;Download | Node.js&#xff09;&#xff0c;安装时不要安装在C盘Windowsr打开cmd管理工具开始输入命令检查node.js是否安装和版本号&a…
阅读更多...
最新文章

Copyright @ 2022~2023