【Flask 系统教程 4】Jinjia2模版和语法

Jinjia2 模板

模板的介绍

Jinja2 是一种现代的、设计优雅的模板引擎，它是 Python 的一部分，由 Armin Ronacher 开发。Jinja2 允许你在 HTML 文档中嵌入 Python 代码，以及使用变量、控制结构和过滤器来动态生成内容。它的语法简洁清晰，易于学习和使用。

模板的使用

from flask import Flask, render_templateapp = Flask(__name__, template_folder="custom_templates")  @app.route('/')
def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)

template_folder指定模板文件夹 默认是同级目录的 templates

  • 在以上案例下的文件架构如下
project_folder/
│
├── flask_app.py
│
└── custom_templates/│└── index.html

模板传递参数

当我们需要通过传递参数来修改模板中的内容时，就可以通过模板传参来实现

# app.py
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():# 定义要传递给模板的参数user = {'username': 'John', 'age': 30}fruits = ['Apple', 'Banana', 'Orange', 'Mango']return render_template('index.html', user=user, fruits=fruits)if __name__ == '__main__':app.run(debug=True)
<!--index.html-->
<!DOCTYPE html>
<html>
<head><title>Flask Template Example with Parameters</title>
</head>
<body><h1>Hello, {{ user.username }}!</h1><p>You are {{ user.age }} years old.</p><h2>Favorite Fruits:</h2><ul>{% for fruit in fruits %}<li>{{ fruit }}</li>{% endfor %}</ul>
</body>
</html>
  • 显示效果
    在这里插入图片描述

使用字典传参

对模板传参也支持使用字典的办法

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():# 定义要传递给模板的参数data = {'user': {'username': 'John', 'age': 30},'fruits': ['Apple', 'Banana', 'Orange', 'Mango']}return render_template('index.html', **data) # 这里使用**进行解包，这是Python3的特性if __name__ == '__main__':app.run(debug=True)

使用**解包传参，避免多参数的传参不便

模板中使用url_for函数

# app.py
from flask import Flask, render_template, url_forapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/hello')
def hello():return 'Hello, World!'if __name__ == '__main__':app.run(debug=True)
<!--index.html-->
<!DOCTYPE html>
<html>
<head><title>Flask Template Example with url_for()</title>
</head>
<body><h1>Hello, Flask!</h1><p>This is a template example.</p><p><a href="{{ url_for('hello') }}">Say Hello</a></p>
</body>
</html>

模板继承

继承允许你创建一个基础模板，并在其他模板中扩展它。

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}{% endblock %}</title>
</head>
<body>{% block content %}{% endblock %}
</body>
</html>

在父模板中定义 block代表可变对象，语法 {% block block_name %} {% endblock %}

<!-- index.html -->
{% extends "base.html" %}{% block title %}Home{% endblock %}{% block content %}<h1>Hello, {{ name }}!</h1>
{% endblock %}

使用 extends 继承模板，使用 {% block block_name %}...{% endblock %}即可实现更改内容

include模板导入

在 Jinja2 模板中， include 指令允许你将一个模板导入到另一个模板中。这样可以使模板更具有模块化和可重用性，使代码更易于维护和管理。通过 include 指令，你可以将一个模板的内容嵌入到另一个模板中的任意位置。

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)
  • 定义 index.html作为主页
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>include</title>
</head>
<body>
<div class="container">{% include 'header.html' %}<h4>主题内容</h4>{% include 'footer.html' %}
</div>
</body>
</html>
  • 定义 header.html用来显示头部
<!-- header.html -->
<header><h1>Header</h1><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul></nav>
</header>
  • 定义 footer.html用来显示脚部
<!-- footer.html -->
<footer><p>&copy; 2024 Flask Template Example. All rights reserved.</p>
</footer>
  • 效果
    在这里插入图片描述

使用静态资源

在 Web 开发中，静态资源（如样式表、JavaScript 文件、图像等）是构建用户界面和功能的重要组成部分。在 Flask 应用中，你可以使用静态资源来美化页面样式、增强交互性，并为用户提供更丰富的体验。下面是如何在 Flask 中使用静态资源的简单介绍：

组织静态资源文件夹

首先，你需要在 Flask 项目中创建一个文件夹来存放静态资源文件，通常命名为 static。在这个文件夹中，你可以按照你的项目结构组织样式表、JavaScript 文件、图像等静态文件。

your_flask_app/
│
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── img/
│       └── logo.png
│
├── templates/
│   └── index.html
│
└── app.py

使用静态资源

一旦你有了静态资源文件夹，你可以在模板中通过使用 url_for 函数来引用这些静态资源。例如，在模板中引用样式表文件 style.css：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My Flask App</title><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><h1>Welcome to My Flask App</h1><img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo"><script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

在这个示例中，url_for('static', filename='path/to/resource') 函数用于生成静态资源的 URL。在调用时，第一个参数 'static' 是 Flask 中默认用于静态资源的端点，而第二个参数 'filename' 是静态资源的路径。

设置静态文件夹地址

from flask import Flask, render_templateapp = Flask(__name__, static_folder="static2")  # 设置静态文件夹地址为 static2
# 第二种方式 app.static_folder = 'static2'@app.route('/')
def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)

Jinjia2 语法

Jinja2 是一种现代的、设计优雅的模板引擎，它为开发者提供了一种简单而强大的方式来创建动态内容。Jinja2 的语法清晰简洁，易于学习和使用。在这里，我将详细介绍 Jinja2 的主要语法元素：

定义变量

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask Template Example</title>
</head>
<body>{% set title = "Title" %}{% with subtitle="subtitle" %}{% set combined_title = title + " " + subtitle %}<h1>{{ combined_title }}</h1>{% with paragraph="This is the paragraph content of my website." %}<p>{{ paragraph }}</p>{% endwith %}{% endwith %}<!--  此处出了with的范围则不可使用其中变量subtitle等  -->
</body>
</html>

with只在范围内可用， set则是全局， with和 set可以结合使用

插入变量

在 Jinja2 中，你可以使用双大括号 {{ ... }} 来插入变量。这些变量将在渲染模板时替换为实际的值。

<p>Hello, {{ name }}!</p>

流程控制

Jinja2 支持常见的控制结构，如条件语句和循环。控制结构使用 {% ... %} 包裹。

条件语句

# app.py
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():# 假设这是从后端传递给前端的数据user = {'username': 'Alice', 'age': 30}return render_template('index.html', user=user)if __name__ == '__main__':app.run(debug=True)
<!--index.html-->
<!DOCTYPE html>
<html>
<head><title>选择结构示例</title>
</head>
<body><h1>欢迎访问我的网站！</h1><p>用户信息：</p><ul><li>用户名：{{ user.username }}</li><li>年龄：{{ user.age }}</li></ul>{% if user.age < 18 %}<p>您未满18岁，属于未成年人。</p>{% elif user.age >= 18 and user.age < 60 %}<p>您已满18岁，属于成年人。</p>{% else %}<p>您已年满60岁，属于老年人。</p>{% endif %}
</body>
</html>
  • 效果
    在这里插入图片描述

循环

from flask import Flask, render_templateapp = Flask(__name__)# 假设这是你的数据
items = {"Apple": "Red","Banana": "Yellow","Orange": "Orange","Grapes": "Purple"
}@app.route('/')
def index():return render_template('index.html', items=items)if __name__ == '__main__':app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask Jinja2 Example</title>
</head>
<body><h1>Fruit Colors</h1><ul>{% for fruit, color in items.items() %}<li>{{ fruit }}: {{ color }}</li>{% endfor %}</ul>
</body>
</html>
  • 效果
    在这里插入图片描述

注释

你可以在模板中使用 {#...#}添加注释，这些注释不会在最终渲染的输出中显示。

{# This is a comment #}

过滤器

过滤器允许你在输出中应用转换。它们以管道符 | 的形式使用。

官方使用文档

<p>{{ sentence|capitalize }}</p>
过滤器描述示例用法
capitalize将变量的首字母转换为大写。{{ variable_name|capitalize }}
lower将变量转换为小写。{{ variable_name|lower }}
upper将变量转换为大写。{{ variable_name|upper }}
title将每个单词的首字母转换为大写。{{ variable_name|title }}
trim移除变量的首尾空格。{{ variable_name|trim }}
escape将 HTML 转义为安全的字符串。{{ variable_name|escape }}
safe标记变量为安全，告诉模板引擎不要转义该变量。{{ variable_name|safe }}
length返回变量的长度。{{ variable_name|length }}
default如果变量为 False、None 或空，使用默认值。 {{variable_name|default('default_value',boolean=True)}}
简单办法 {{ variable_name or "default_value" }}
urlencode对 URL 进行编码。{{ variable_name|urlencode }}
join使用指定字符将列表中的元素连接起来。{{ list_variable|join(', ') }}
slice从列表中取出一部分元素。{{ list_variable|slice(start, stop) }}
sort对列表进行排序。{{ list_variable|sort }}
reverse将列表倒序。{{ list_variable|reverse }}
dictsort对字典按键或值进行排序。{{ dict_variable|dictsort(attribute='key') }}
abs返回变量的绝对值。{{ variable_name|abs }}
round四舍五入到指定的小数位数。{{ variable_name|round(precision=2) }}
striptags删除字符串中所有的
HTML标签，如果出
现多个空格，将替换
成一个空格		{{ variable_name|striptags }}
replace字符串替换 {{ text |replace('old', 'new') }}

自定义过滤器

# app.py
from flask import Flask, render_templateapp = Flask(__name__)# @app.template_filter("reverse") # 注册自定义过滤器
def reverse_filter(s):  # 自定义过滤器函数return s[::-1]app.jinja_env.filters['reverse'] = reverse_filter  # 注册自定义过滤器的第二种方法# 路由
@app.route('/')
def index():# 在模板中使用自定义过滤器message = "Hello, World!"return render_template('index.html', message=message)if __name__ == '__main__':app.run(debug=True)

使用装饰器或者 app.jinja_env.filters都可以设置过滤器

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Custom Filter Example</title>
</head>
<body>
<p>origin message: {{ message }}</p>
<p>Reversed message: {{ message | reverse }}</p>
</body>
</html>

定义宏

宏类似于函数，允许你定义可重用的代码块。

  • 宏没有返回值

在Python文件中定义宏

from flask import Flask, render_templateapp = Flask(__name__)# 定义一个简单的宏，用于在模板中显示消息
@app.template_global()
def display_message(message):return f"Message: {message}"@app.route('/')
def index():return render_template('index.html', message="Hello, world!")if __name__ == '__main__':app.run(debug=True)

在 py文件中直接定义了宏方法，可在 html文件中直接使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask Template Example</title>
</head>
<body><!-- 使用宏显示消息 -->{{ display_message(message) }}
</body>
</html>

在html文件中定义宏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask Template Example</title>
</head>
<body><!-- 定义宏 -->{% macro display_message(message) %}<p>Message: {{ message }}</p>{% endmacro %}<!-- 使用宏 -->{{ display_message("Hello, world!") }}
</body>
</html>
  • 效果
    在这里插入图片描述

宏文件引用

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html', message="Hello, world!")if __name__ == '__main__':app.run(debug=True)
<!-- 引入宏文件并传递变量 -->
{% import 'macros/macros.html' as macros with context %}
<!--引入宏而不传递变量-->
{% import 'macros/macros.html' as macros %}<!-- 另一种引入方式 -->
{% from 'macros/macros.html' import display %}<!-- 使用宏并传参 -->
{{ macros.display_message(message) }}
<!-- 使用宏 -->
{{ display() }}
  • 在引入宏的时候，可以使用 with context来共享变量，意思是此时的宏中能直接使用当前环境下有的变量。
  • 注意文件架构
project_folder/
│
├── flask_app.py
│
└── macros/│└── macros.html

<!-- macros.html -->
{% macro display_message(content) %}
<p>Content: {{ content }}</p>
{% endmacro %}{% macro display(content) %}
<p>Content: {{ message }}</p>
{% endmacro %}

变量过滤器

Jinja2 提供了一些内置的变量过滤器，用于对变量进行处理，例如格式化日期、字符串截断等。

{{ user.created_at|date("Y-m-d") }}

转义

在插入变量时，默认情况下 Jinja2 会自动转义 HTML 字符，以防止 XSS 攻击。但是，你也可以使用 safe 过滤器来禁用转义。

{{ unsafe_html|safe }}

过滤器链

你可以将多个过滤器串联在一起，以便在一个变量上应用多个转换。

{{ sentence|capitalize|truncate(50) }}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Qt QML】用CMake管理Qt工程

【Qt QML】用CMake管理Qt工程

CMake是一个开源、跨平台的工具系列&#xff0c;用于构建、测试和打包软件。CMake使用简单的独立配置文件来控制软件编译过程。与许多跨平台系统不同&#xff0c;CMake被设计为与本地构建环境结合使用。 下面我们在CMake项目中使用Qt的最基本方法。首先&#xff0c;创建一个基本…
阅读更多...
系统架构设计师错题集

系统架构设计师错题集

在实时操作系统中&#xff0c;两个任务并发执行&#xff0c;一个任务要等待另一个任务发来消息&#xff0c;或建立某个条件后再向前执行&#xff0c;这种制约性合作关系被称为任务的&#xff08;9&#xff09;。 (9)A.同步 B.互斥 C.调度 D.执行 【答案】A 【解析】本题考查…
阅读更多...
Linux图形化界面怎么进入？CentOS 7图形界面切换

Linux图形化界面怎么进入？CentOS 7图形界面切换

CentOS 7默认只安装命令行界面。要切换到图形界面&#xff0c;需要先检查系统是否安装图形界面&#xff0c;在终端输入以下命令&#xff1a; systemctl get-default若是返回结果是“multi-user.target”表示系统没有安装图形界面&#xff1b;若是返回结果是“graphical.target…
阅读更多...
Linux migrate_type进一步探索

Linux migrate_type进一步探索

文章接着上回Linux migrate_type初步探索 1、物理页面添加到buddy系统 我们都知道物理内存一开始是由memblock进行分配管理&#xff0c;后面会切换到buddy系统管理。那么接下来我们看一下&#xff0c;memblock管理的物理页面是怎么添加到buddy系统中的。 start_kernel() -&g…
阅读更多...
双指针（C++）

双指针（C++）

文章目录 1、移动零2、复写零3、快乐数4、盛最多水的容器5、有效三角形的个数6、和为s的两个数7、三数之和8、四数之和 需要理解的是&#xff0c;双指针并非只有指针&#xff0c;双指针的意思是两个位置。比如对于数组来说&#xff0c;两个下标也是双指针。当然&#xff0c;也可…
阅读更多...
merge and rebase

merge and rebase

文章目录 什么是merge什么是rebasemerge和rebase的区别操作执行git merge操作git rebase操作冲突解决解决冲突的步骤 Git Merge 和 Git Rebase 都是用于集成来自不同分支的修改的 Git 命令。 什么是merge Git Merge 是将一个分支的改动合并到另一个分支的方式。当你执行一个 m…
阅读更多...
LabVIEW机械臂控制与图像处理示教平台

LabVIEW机械臂控制与图像处理示教平台

LabVIEW机械臂控制与图像处理示教平台 随着工业自动化技术的快速发展&#xff0c;工业机器人在制造业中的应用越来越广泛&#xff0c;它们在提高生产效率、降低人工成本以及保证产品质量方面发挥着重要作用。然而&#xff0c;传统的工业机器人编程和操作需要专业知识&#xff…
阅读更多...
2024-5-3学习笔记 虚拟继承原理

2024-5-3学习笔记 虚拟继承原理

目录 原理 总结 前面提到过&#xff0c;解决菱形继承产生的数据二义性问题和数据冗余&#xff0c;就需要用到虚拟继承&#xff0c;关于它是如何解决的&#xff0c;我们来一起研究。 class Person { public :string _name ; // 姓名 }; class Student : virtual public Perso…
阅读更多...
某招聘网站搜索结果接口逆向之webpack扣取

某招聘网站搜索结果接口逆向之webpack扣取

逆向网址 aHR0cHM6Ly93ZS41MWpvYi5jb20v 逆向链接 aHR0cHM6Ly93ZS41MWpvYi5jb20vcGMvc2VhcmNoP2pvYkFyZWE9MDAwMDAwJmtleXdvcmQ9cGhwJnNlYXJjaFR5cGU9MiZrZXl3b3JkVHlwZT0 逆向接口 aHR0cHM6Ly93ZS41MWpvYi5jb20vYXBpL2pvYi9zZWFyY2gtcGM 逆向过程 请求方式 POST 逆向参数 …
阅读更多...
华为Pura70发布，供应链公司进入静默保密期

华为Pura70发布，供应链公司进入静默保密期

保密措施&#xff1a;与华为Pura70发布相关的供应链公司在产品发布前后处于静默保密期。这可能是由于华为对于手机供应链的一些信息处于保密状态&#xff0c;尤其是关于麒麟芯片的代工厂商等敏感信息。这种保密措施有助于保持产品的神秘感&#xff0c;调动用户的好奇心&#xf…
阅读更多...
微信小程序+esp8266温湿度读取

微信小程序+esp8266温湿度读取

本文主要使用微信小程序显示ESP8266读取的温湿度并通过微信小程序控制LED灯。小程序界面如下图所示 原理讲解 esp8266 通过mqtt发布消息，微信小程序通过mqtt 订阅消息，小程序订阅后，就可以实时收到esp8266 传输来的消息。 个人可免费注册五个微信小程序账号，在微信小程序官…
阅读更多...
开源框架 NanUI 项目宣布将暂停开发，作者转行卖钢材

开源框架 NanUI 项目宣布将暂停开发，作者转行卖钢材

NanUI 界面组件是一个开源的 .NET 窗体应用程序界面框架&#xff0c;适用于希望使用 HTML5 / CSS3 等前端技术来构建 Windows 窗体应用程序用户界面的 .NET 开发人员。 该项目的作者林选臣日前在 GitHub 上发布了停更公告&#xff0c;称因去年被裁员失业&#xff0c;他目前已经…
阅读更多...
Redis 实战1

Redis 实战1

SDS Redis 只会使用 C 字符串作为字面量&#xff0c; 在大多数情况下&#xff0c; Redis 使用 SDS &#xff08;Simple Dynamic String&#xff0c;简单动态字符串&#xff09;作为字符串表示。 比起 C 字符串&#xff0c; SDS 具有以下优点&#xff1a; 常数复杂度获取字符串…
阅读更多...
R语言学习—4—数据矩阵及R表示

R语言学习—4—数据矩阵及R表示

1、创建向量、矩阵 在R中&#xff0c;c()函数用于创建向量或组合数据对象。它在某些情况下可能会被省略&#xff0c;因为R有一些隐式的向量创建规则。例如&#xff0c;当你使用:操作符创建一个数字序列时&#xff0c;R会自动创建一个向量&#xff0c;所以你不需要显式地调用c()…
阅读更多...
UI-Diffuser——使用生成式扩散模型的UI原型设计算法解析

UI-Diffuser——使用生成式扩散模型的UI原型设计算法解析

概述。 移动UI是影响参与度的一个重要因素&#xff0c;例如用户对应用的熟悉程度和使用的便利性。如果你有一个类似的应用程序&#xff0c;你可能会选择一个具有现代、好看的设计的应用程序&#xff0c;而不是一个旧的设计。然而&#xff0c;要从头开始研究什么样的UI最适合应…
阅读更多...
[leetcode]Z 字形变换

[leetcode]Z 字形变换

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string convert(string s, int numRows) {int n s.length(), r numRows;if (r 1 || r > n) {return s;}int t r * 2 - 2;int c (n t - 1) / t * (r - 1);vector<string> mat(r, string(c, 0)…
阅读更多...
达梦(DM) SQL聚集函数及日期运算操作

达梦(DM) SQL聚集函数及日期运算操作

达梦DM SQL聚集函数及日期运算操作 聚集函数MAX、MIN、SUM、AVG、COUNT使用分析函数 sum (…) over (order by…) 可以生成累计和更改累计和的值计算出现次数最多的值 日期运算加减日、月、年加减时、分、秒日期间隔之时、分、秒日期间隔之日、月、年求两个日期间的工作天数确定…
阅读更多...
Java基础知识(三) -- 流程控制

Java基础知识(三) -- 流程控制

不论哪种编程语言&#xff0c;都会提供两种基本的流程控制结构&#xff1a;分支结构和循环结构。其中分支结构用于实现根据条件来选择性地执行某段代码&#xff0c;循环结构则用于实现根据循环条件重复执行某段代码。 1. 顺序结构 任何编程语言中最常见的程序结构就是顺序结构…
阅读更多...
单片机编程实例400例大全（100-200）

单片机编程实例400例大全（100-200）

今天继续分享单片机编程实例第100-200例。 今天的实例会比前面100复杂一些&#xff0c;我大概看了下&#xff0c;很多都具备实际产品的参考价值。 今天继续分享单片机编程实例第100-200例。 今天的实例会比前面100复杂一些&#xff0c;我大概看了下&#xff0c;很多都具备实际…
阅读更多...
频分复用系统设计及其MATLAB实现

频分复用系统设计及其MATLAB实现

引言 随着通信技术的飞速发展&#xff0c;通信系统的容量需求不断增长。频分复用&#xff08;Frequency Division Multiplexing, FDM&#xff09;作为一种重要的多路复用技术&#xff0c;被广泛应用于现代通信系统中。本文将介绍频分复用系统的设计原理&#xff0c;并展示如何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023