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

news2024/10/7 10:21:19

Jinjia2 模板

模板的介绍

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

模板的使用

from flask import Flask, render_template

app = 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_template

app = 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_template

app = 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_for

app = 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_template

app = 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_template

app = 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_template

app = 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_template

app = 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_template

app = 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_template

app = 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_template

app = 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.coloradmin.cn/o/1639933.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

U盘未初始化?别慌,数据还有救!

当我们将U盘插入电脑&#xff0c;期待地打开“我的电脑”或文件管理器&#xff0c;却发现U盘显示为未初始化&#xff0c;这种心情无异于一盆冷水浇头。但先别急着慌张&#xff0c;这篇文章将带你了解U盘未初始化的原因&#xff0c;并提供有效的数据恢复方案&#xff0c;让你在遭…

24.5.2数据结构|顺序表实现

主要是记笔记&#xff0c;留着以后复习回来看的&#xff0c;有些内容解释的并不清晰。也就稍微可以借鉴借鉴。 目录 一、如何定义结构&#xff1f; 二、看书搞清楚顺序表实现流程 三、使用clion写代码 实现代码过程中的错误代码 一、如何定义结构&#xff1f; 应该有的部…

AI与电力

好多写AI会导致电力匮乏的消息,不绝于耳。然而大部分只能知其然,却不能知其所以然,为什么缺,怎么缺,缺多少,没什么答案也没什么可参考的。 我关注一个事情,一般先了解一下论点,然后重点看论据,最后再自己论证合理不。今天这篇文章主要聊一下数据层面上是谈一谈AI如何导…

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

本文主要使用微信小程序显示ESP8266读取的温湿度并通过微信小程序控制LED灯。小程序界面如下图所示 原理讲解 esp8266 通过mqtt发布消息,微信小程序通过mqtt 订阅消息,小程序订阅后,就可以实时收到esp8266 传输来的消息。 个人可免费注册五个微信小程序账号,在微信小程序官…

Python_GUI框架 Pyside6的信号与槽应用

Python_GUI框架 Pyside6的信号与槽应用 在Pyside6框架中&#xff0c;信号与槽&#xff08;Signals and Slots&#xff09;机制是连接用户界面元素与响应功能的核心机制。我们可以把信号想象成一根电线&#xff0c;而槽就是电线的另一端连接的灯泡。当电线&#xff08;信号&…

ubuntu 小工具

随着在专业领域待得越久&#xff0c;发现总会遇到各种奇怪的需求。因此&#xff0c;这里介绍一些ubuntu上的一些小工具。 meld 对比文件 sudo apt-get install meld sudo apt --fix-broken install # maybeHow to compare two files

量子城域网建设设备系列(二):量子密钥管系统(KMS)

在上文介绍光量子交换机的文章中我们提到&#xff0c;量子保密通信网络的通道切换是由量子密钥管理系统&#xff08;Key Management System&#xff0c;KMS&#xff09;给光量子交换机下发信道切换指令&#xff0c;实现整个网络中任意两对量子密钥分发终端的量子信道互联互通&a…

buuctf-misc-23.FLAG

23.FLAG 题目&#xff1a;stegsolve得出PK-zip文件&#xff0c;改后缀名为zip,解压后查看文件类型为ELF 使用kali-strings或者ida获取flag 点击Save Bin将其另存为一个zip文件 而后解压我们另存的这个1234.zip文件后&#xff0c;可以得到 我们用ida打开它&#xff0c;打开后就…

从零开始搭建一个vue项目

从零开始搭建一个vue项目 一、环境准备 1.1 安装node.js 选择合适的LTS版本&#xff0c;然后下载安装&#xff0c;安装地址&#xff1a;https://nodejs.org/en/download 在命令行中查看已安装的node.js版本 node -v v14.14.01.2 切换为淘宝的镜像源 解决国内下载慢的问题,…

45. UE5 RPG 使用元属性(Meta Attributes)以及使用Set by Caller修改伤害

在RPG游戏中&#xff0c;我们是不会直接修改生命值的属性&#xff0c;是因为在修改角色属性时&#xff0c;需要获取角色的属性并进行复杂的计算&#xff0c;所以&#xff0c;我们正常情况下使用元属性&#xff08;Meta Attributes&#xff09;作为计算的中间的媒。在服务器上先…

中间件之异步通讯组件RabbitMQ进阶

这里我们必须尽可能确保MQ消息的可靠性&#xff0c;即&#xff1a;消息应该至少被消费者处理1次 那么问题来了&#xff1a; 我们该如何确保MQ消息的可靠性&#xff1f; 如果真的发送失败&#xff0c;有没有其它的兜底方案&#xff1f; 首先&#xff0c;我们一起分析一下消息…

django设计模式理解FBV和CBV

在 Web 开发中&#xff0c;FBV&#xff08;Function-Based Views&#xff09;和 CBV&#xff08;Class-Based Views&#xff09;是两种常见的视图设计模式&#xff0c;用于处理 HTTP 请求并生成相应的响应。下面是它们的简要解释&#xff1a; Function-Based Views (FBV) 在 …

Mac环境下ollama部署和体验

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于ollama ollama和LLM&#xff08;大型语言模型&#xff09;的关系&#xff0c;类似于docker和镜像&#xff0c;可以在ollama服务中管理和运行各种LLM&…

基于java,SpringBoot和VUE的求职招聘简历管理系统设计

摘要 基于Java, Spring Boot和Vue的求职招聘管理系统是一个为了简化求职者与雇主间互动流程而设计的现代化在线平台。该系统后端采用Spring Boot框架&#xff0c;以便快速搭建具有自动配置、安全性和事务管理等特性的RESTful API服务&#xff0c;而前端则使用Vue.js框架构建动…

UE5入门学习笔记(六)——编译低版本插件

对于有些低版本的插件&#xff0c;可以通过此方法自己编译到高版本而无需等待插件作者更新 使用工具&#xff1a;如图所示 步骤1&#xff1a;打开cmd&#xff0c;并使用cd命令切换到此目录 步骤2&#xff1a;输入如下指令 RunUAT.bat BuildPlugin -Plugin“路径1” -Package“…

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…

Java 新手上路常见的5个经典问题,你遇到过吗?

当我们开始学习一门新的编程语言或者开发平台时&#xff0c;经常会遇到一些常见的问题。这些问题不仅是学习过程中的一部分&#xff0c;也是成长和提高的机会。 1. 空指针异常&#xff08;NullPointerException&#xff09; 空指针异常是 Java 开发中最常见的问题之一。它的产…

【AI大模型应用开发】3. RAG初探 - 动手实现一个最简单的RAG应用

0. 什么是RAG 大模型也不是万能的&#xff0c;也有局限性。 LLM 的知识不是实时的LLM 可能不知道你私有的领域/业务知识 RAG&#xff08;Retrieval Augmented Generation&#xff09;顾名思义&#xff1a;通过检索的方法来增强生成模型的能力。你可以把这个过程想象成开卷考…

TCP协议在物联网中的实战

一、TCP协议介绍 网上对TCP协议介绍众多&#xff0c;本人按照自己的理解简单介绍一下。 TCP&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

基于Springboot的民宿管理平台

基于SpringbootVue的民宿管理平台设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 民宿信息 后台登录 后台首页 用户管理 商家管理 民宿信息管理 房间类型管理 …