Python(Web时代)——jinja2模板

简介

Jinja2是Flask框架默认支持的模板引擎,是python的web项目中被广泛应用的一种模板引擎,jinja2的作者与Flask是同一个人。

jinja2具有以下特点:

  • 非常灵活,提供了控制结构、表达式与继承等

  • 性能好

  • 可读性强

渲染一个模板,通过render_template方法即可

语法

引入渲染函数

使用之前需要先通过import 导入

from flask import render_template

注:要将模板文件放置在项目根目录的 templates文件夹中

在Jinja2中,存在三种语法

  • 变量取值 {{ }}

  • 控制结构(逻辑代码) {% %}

  • 注释 {# #}

示例1:变量取值 {{ }}

@app.route("/tmp")
def template_test():
    name = "我是字符串"
    num =1
    mylist = [1,2,3,4]
    mydict={"name":"张三","age":33}
    mytuple = (1,2,3,4)

    return render_template("template.html",name=name,num=num,mylist=mylist,mydict=mydict,mytuple=mytuple)
 

template.html 模板文件 

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <p>字符串:{{ name }}</p>
    <p>数字:{{ num }}</p>
    <p>列表:{{ mylist }}</p>
    <p>列表中的第二个元素:{{ mylist[1] }}</p>
    <p>字典:{{ mydict }}</p>
    <p>字典的name:{{ mydict['name'] }}</p>
    <p>元组:{{ mytuple }}</p>
    <p>元组的第2个元素:{{ mytuple[1] }}</p>
</body>
</html>
 

调用结果

图片

示例2:控制结构 {% %}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <p>字符串:{{ name }}</p>
    <p>数字:{{ num }}</p>
    <p>列表:{{ mylist }}</p>
    <p>列表中的第二个元素:{{ mylist[1] }}</p>
    <p>字典:{{ mydict }}</p>
    <p>字典的name:{{ mydict['name'] }}</p>
    <p>元组:{{ mytuple }}</p>
    <p>元组的第2个元素:{{ mytuple[1] }}</p>

    {% if name=='张三' %}
        条件满足,我是张三
    {% else %}
        条件不满足
    {% endif %}

    循环列表数据:
    {% for i in mylist %}
        {{ i }}
    {% endfor %}
</body>
</html>
 

调用结果

图片

示例3:注释 {# #}

{# 循环列表数据:#}
{% for i in mylist %}
    {{ i }}
{% endfor %}

过滤器

有些时候需要对要在模板中的变量值做一些特殊处理,比如首字母大写,去掉前后空格、字符串拼接等等,这时就可以使用过滤器。

过滤器的使用

通过  |  来使用过滤器,与Linux中的管道类似

例如,将字符串的首字母大写

<p>{{ name | capitalize }}</p>

常用的过滤器

过滤器说明
safe渲染时值不转义
capitalize首字母大写,其他字母小写
lower所有字母小写
upper所有字母大写
title值中每个单词首字母大写
trim去除首尾空格
striptags渲染时删除掉值中所有HTML标签
  join拼接字符串
  replace替换字符串中的值
  round对数据进行四舍五入

示例代码

@app.route("/tmp2")
def template_test2():
    name = "harRY"
    return render_template("template2.html",name=name)
 


template2.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    {# 首字母大写 #}
    <p>{{ name | capitalize }}</p>
    {# 单词全小写 #}
    <p>{{ "Hello World!" | lower }}</p>
    {# 去除首尾空格 #}
    <p>{{ " Hello World!  " | trim }}</p>
    {# 四舍五入取整 #}
    <p>{{ 1.26 | round }}</p>
    {# 四舍五入保留2位小数取整 #}
    <p>{{ 1.2666 | round(2) }}</p>
</body>
</html>
 

调用

图片

自定义过滤器

当遇到现有的过滤无法满足我们的需求时,这时就需要我们自定义一个过滤器了

自定义过滤器有两种方式

方式1:@app.template_filter()

# 第一种方式,用作计算字符串长度
@app.template_filter()
def str_len(args):
    return len(args)
 

方式2: 先定义方法,后采用 app.jinja_env.filters

# 第二种方式, 去除字符串中的空格
def replace_space(args):
    return args.replace(" ", "")

app.jinja_env.filters['replace_space'] = replace_space
 

使用以上自定义的过滤器

@app.route("/tmp3")
def template_test3():
    name = "harRY"
    aaa="dfs jklf  jffff  "
    return render_template("template3.html", name=name,aaa=aaa)
 

template3.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <p>{{ name | str_len }}</p>
    <p>{{ aaa | replace_space }}</p>
</body>
</html>
 

输出

图片

程序猿与投资生活实录已改名为  程序猿知秋,WX 公众号同款,欢迎关注!! 

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

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

相关文章

uni——tab切换

案例展示 案例代码 <view class"tablist"><block v-for"(item,index) in tabList" :key"index"><view class"tabItem" :class"current item.id?active:" click"changeTab(item)">{{item.nam…

laravel语言包问题

1、更新vendor composer require "overtrue/laravel-lang:3.0" 2、修正配置文件 config/app.php 3、 php artisan config:clear 更新缓存 4、设定新的语言包 在这个resources\lang目录下加即可

LeetCode[210]课程表II

难度&#xff1a;Medium 题目&#xff1a; 现在你总共有 numCourses 门课需要选&#xff0c;记为 0 到 numCourses - 1。给你一个数组 prerequisites &#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示在选修课程 ai 前 必须 先选修 bi 。 例如&#xff0c;想要学…

RunnerGo配置场景时接口模式该怎么选

在进行性能测试时&#xff0c;测试场景的正确配置非常关键。首先&#xff0c;需要根据业务场景和需求&#xff0c;设计出合理的测试场景&#xff0c;再利用相应的工具进行配置&#xff0c;实现自动化的性能测试。 在JMeter中&#xff0c;用户需要自己组织测试场景&#xff0c;…

DDS中间件设计

OpenDDS、FastDDS数据分发服务中间件设计 软件架构 应用层DDS层RTPS层传输层 软件层次 FastDDS整体架构如下&#xff0c;这里可以看到DDS和RTPS的关系。另外缺少一部分IDL&#xff08;统一描述语言&#xff09;&#xff0c;其应该是Pub、Sub的反序列化、序列化工具。 在RT…

PDF Expert 3.3 for mac

PDF Expert是一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 以下是PDF Expert的特点&#xff1a; PDF编辑&#xff1a;PDF Expert提供了丰富的PDF编辑功能&#xff0c;包括添加、删除、移动、旋转、缩放、裁…

用i18n 实现vue2+element UI的国际化多语言切换详细步骤及代码

一、i18n的安装 这个地方要注意自己的vue版本和i1n8的匹配程度&#xff0c;如果是vue2点几&#xff0c;记得安装i18n的8版本&#xff0c;不然会自动安装的最新版本&#xff0c;后面会报错哦&#xff0c;查询了下资料&#xff0c;好像最新版本是适配的vue3。 npm install vue-…

量子力学的挑战和未来:未解决的问题和可能的发展方向

亲爱的读者&#xff0c; 欢迎回到我们的量子力学系列文章。在前面的几篇文章中&#xff0c;我们已经深入探讨了量子力学的起源、基本概念、实验验证以及应用领域&#xff0c;包括量子计算、量子通信和量子感应。今天&#xff0c;我们将探讨量子力学所面临的挑战以及未来可能的…

STM32 CubeMX USB_MSC(存储设备U盘)

STM32 CubeMX STM32 CubeMX USB_MSC(存储设备U盘&#xff09; STM32 CubeMX前言 《使用内部Flash》——U盘一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择FATFS功能 二、代码部分修改代码"usbd_storage_if.c"修改代码"user_diskio.c"main函数初始化插…

9.1网络通信基础

一.基础概念: 1)IP地址:描述网络上的一个设备所在的位置. 2)端口号(port):区分一个主机上不同的进程,和pid一样的作用,但两者不同. 3)协议:网络通信传输数据的含义,协议表示一种约定,这种约定可以是任意的.协议分层之后,上层不需要知道下层协议的细节,可以灵活地调整,替换某…

TypeScript 类型断言

TypeScript 类型断言 简单来说类型断言就是 使用as关键词 强行指定获取到的结果类型 应用场景 // 类型断言: 强行指定获取到的结果类型// 应用场景// 页面上有一个 id 为 link 的 a 标签// 我们知道它是 a 标签// 但是 TS 不知道 // document.getElementById 的返回值是 HTMLE…

图数据库使用及业务场景

一. 前言 来学习下图数据以及图数据库 二. 图数据库的简单原理 2.1 图数据 我认为图数据结构就是点线面的关系&#xff0c;图大致分为以下概念 &#xff1a; 节点 &#xff1a; 图中的基本元素&#xff0c;可以用来表示现实世界中的一个**实体 **边 &#xff1a; 节点之间…

Linux 远程登录

Linux 远程登录 Linux 一般作为服务器使用&#xff0c;而服务器一般放在机房&#xff0c;你不可能在机房操作你的 Linux 服务器。 这时我们就需要远程登录到Linux服务器来管理维护系统。 Linux 系统中是通过 ssh 服务实现的远程登录功能&#xff0c;默认 ssh 服务端口号为 2…

Spring+MyBatis整合案例

提示&#xff1a;要有自学能力&#xff0c;会学习 文章目录 前言前期准备项目内容数据库创建应用程序配置po 包代码mapper 包代码service 包代码测试类代码添加事物处理功能 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 前期准备 第一步&#xff1a…

pytorch的CrossEntropyLoss交叉熵损失函数默认reduction是平均值

pytorch中使用nn.CrossEntropyLoss()创建出来的交叉熵损失函数计算损失默认是求平均值的&#xff0c;即多个样本输入后获取的是一个均值标量&#xff0c;而不是样本大小的向量。 net nn.Linear(4, 2) loss nn.CrossEntropyLoss() X torch.rand(10, 4) y torch.ones(10, dt…

[oeasy]python0082_[趣味拓展]控制序列_清屏_控制输出位置_2J

光标位置 回忆上次内容 上次了解了键盘演化的过程 ESC 从 组合键到 独立按键 ESC的作用 是 进入 控制序列配置 控制信息控制信息 \033[y;xH 设置光标位置\033[2J 清屏 这到底怎么控制&#xff1f;&#xff1f;&#xff1f;&#x1f914;谁来实现这些功能&#xff1f; 控制…

ensp与虚拟机搭建测试环境

1.虚拟机配置 ①首先确定VMnet8 IP地址&#xff0c;若要修改IP地址&#xff0c;保证在启动Ensp前操作 ②尽量保证NAT模式 2.ensp配置 (1)拓扑结构 (2)Cloud配置 ①首先点击 绑定信息 UDP → 增加 ②然后点击 绑定信息 VMware ... → 增加 ③最后在 端口映射设置上点击双向通…

[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流进行控制信息的设置 可以设置 光标输出的位置 ASR33中的ALT MODE 是 今天的ESC键吗&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#x1f914; 查询文档…

Ajax入门

文章目录 axios体验axios-查询参数常用请求方法数据提交 axios错误处理 axios体验 引入axios库 使用axios语法 axios({url: 目标资源地址 }).then((result)>{// 对服务器返回的数据做后续处理 })完整实例 <!DOCTYPE html> <html lang"en"><head&g…

eclipse Java Code_Style Code_Templates

Preferences - Java - Code Style - Code Templates Eclipse [Java_Code_Style_Code_Templates_ZengWenFeng] 2023.08.07.xml 创建一个新的工程&#xff0c;不然有时候不生效&#xff0c;旧项目可能要重新导入eclipse 创建一个测试类试一试 所有的设置都生效了