python web框架fastapi模板渲染--Jinja2使用技巧总结

文章目录

  • 1.jinja2模板
    • 1.1、jinja2 的变量
      • 1.1.1 列表类型数据渲染
      • 1.1.2 字典类型数据渲染
  • 2. jinja2 的过滤器
  • 3. jinja2 的控制结构
    • 3.1、分支控制
    • 3.2、循环控制

1.jinja2模板

要了解jinja2,那么需要先理解模板的概念。模板在Python的web开发中⼴泛使⽤,它能够有效的将业务逻辑和页⾯逻辑分开,使代码可读性增强、并且更加容易理解和维护。
模板简单来说就是⼀个其中包涵占位变量表⽰动态的部分的⽂件,模板⽂件在经过动态赋值后,返回给⽤户。

jinja2是Flask作者开发的⼀个模板系统,起初是仿django模板的⼀个模板引擎,也可以为fastapi提供模板⽀持,由于其灵活,快速和安全等优点被⼴泛使⽤。
jinja2模板主要用在前后端不分离项目中

在jinja2中,存在三种语法:

1、控制结构 {% %}
2、变量取值 {{ }}
3、注释 {# #}

1.1、jinja2 的变量

#导入模板的包,需要单独安装:Jinja2
在这里插入图片描述

案例代码:

from fastapi import Requestfrom fastapi import FastAPIimport uvicorn#导入模板的包
from fastapi.templating import Jinja2Templates
app = FastAPI()# 实例化Jinja2对象,并将文件夹路径设置为以templates命名的文件夹
templates = Jinja2Templates(directory="templates")@app.get("/index")
async def items(request: Request):name = 'root'return templates.TemplateResponse('index.html', #第一个参数放模板文件{'request': request,  # 注意,返回模板响应时,必须有request键值对,且值为Request请求对象'user':name}, #context上下文对象,是个字典)if __name__ == '__main__':#注意,run的第一个参数 必须是文件名:应用程序名uvicorn.run("模板:app", port=8080,  reload=True)

在docs运行测试,拿到了页面,并且name的值,就是我们动态传的root
在这里插入图片描述

我们用浏览器去测试接口
返回的就是个html页面
在这里插入图片描述

此时,我们就可以扩展我们得html页面
在这里插入图片描述

在模板处添加进去数据
在这里插入图片描述

浏览器访问
在这里插入图片描述

1.1.1 列表类型数据渲染

return templates.TemplateResponse(
‘index.html’, #第一个参数放模板文件
{
‘request’: request, # 注意,返回模板响应时,必须有request键值对,且值为Request请求对象
‘user’:name,
‘age’:age,
‘people’:people,
“books”: [“西游记”, “红楼梦”, “天涯”, “国色天香”],
}, #context上下文对象,是个字典

)

在html页面展示

<p>{{ books.0 }}</p>
<p>{{ books.1 }}</p>
<p>{{ books.2 }}</p>
<p>{{ books.3 }}</p>

在这里插入图片描述

浏览器查看
在这里插入图片描述

当然也可以在html中通过for循环来遍历展示

<ul>{% for book in books %}<li>{{ book }}</li>  <!--凡是变量都要用两个大括号括起来-->
{% endfor %}
</ul>

1.1.2 字典类型数据渲染

return templates.TemplateResponse(
‘index.html’, #第一个参数放模板文件
{
‘request’: request, # 注意,返回模板响应时,必须有request键值对,且值为Request请求对象
‘user’:name,
‘age’:age,
‘people’:people,
“books”: [“西游记”, “红楼梦”, “天涯”, “国色天香”],
“booksDict”: {
“西游记”: {“price”: 100, “publish”: “苹果出版社”},
“红楼梦”: {“price”: 200, “publish”: “橘子出版社”},
}
}, #context上下文对象,是个字典

)

在这里插入图片描述

在html页面通过点的方式获取

<p>{{ booksDict.金瓶梅.publish }}</p>

在这里插入图片描述

浏览器查看
在这里插入图片描述

2. jinja2 的过滤器

变量可以通过“过滤器”进⾏修改,过滤器可以理解为是jinja2⾥⾯的内置函数和字符串处理函数。常⽤的过滤器有:
在这里插入图片描述

那么如何使⽤这些过滤器呢?只需要在html文件中的变量后⾯使⽤管道(|)分割,多个过滤器可以链式调⽤,前⼀个过滤器的输出会作为后⼀个过滤器的输⼊。
{{user | capitalize }} 首字母大写

{{ ‘abc’| upper }} # ABC

{{ ‘hello world’| title }} # Hello World

{{ “hello world”| replace(‘world’,‘yuan’) | upper }} # HELLO YUAN

{{ 18.18 | round | int }} # 18

在这里插入图片描述

在这里插入图片描述

3. jinja2 的控制结构

3.1、分支控制

jinja2中的if语句类似与Python的if语句,它也具有单分⽀,多分⽀等多种结构,不同的是,条件语句不需要使⽤冒号结尾,而结束控制语句,需要使⽤endif关键字

在数据区,我们的age是18
在这里插入图片描述

在html展示区,可以使用分支控制语句来动态展示

{% if age > 18 %}<p>成年区</p>{% else %}<p>未成年区</p>{% endif %}

由于age=18,所以展示 未成年区 这个p标签
在这里插入图片描述

3.2、循环控制

jinja2中的for循环⽤于迭代Python的数据类型,包括列表,元组和字典。在jinja2中不存在while循环。

{% for book in books %}<p>{{ book }}</p>
{% endfor %}

在这里插入图片描述
在这里插入图片描述

当然,分支控制语句和循环控制语句可以嵌套使用,也不难,感兴趣的小伙伴可以试一下

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

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

相关文章

双硬盘备份的一种可行方案

双硬盘备份有什么优势弊端&#xff1f; 事物总有两面性&#xff0c;那么对于双硬盘数据备份任务来说&#xff0c;有什么优势与弊端呢&#xff1f; ◉ 双硬盘备份的优势&#xff1a; 安全性更好&#xff1a;由于数据备份到两个不同的硬盘&#xff0c;所以可以保证备份数据的冗…

基于springboot实现图书馆管理系统项目【项目源码+论文说明】

基于springboot实现图书馆管理系统演示 摘要 电脑的出现是一个时代的进步&#xff0c;不仅仅帮助人们解决了一些数学上的难题&#xff0c;如今电脑的出现&#xff0c;更加方便了人们在工作和生活中对于一些事物的处理。应用的越来越广泛&#xff0c;通过互联网我们可以更方便地…

练习 1 Web EasySQL极客大挑战

CTF Week 1 EasySQL极客大挑战 BUUCTF 典中典复习 Web SQL 先尝试输入&#xff0c;找一找交互页面 check.php 尝试万能语句 a’ or true SQL注入&#xff1a;#和–的作用 get传参只能是url编码&#xff0c;注意修改编码&#xff0c;输入的字符串要改成url格式。 POST请求和…

Linux:Kubernetes(k8s)——基础理论笔记(1)

我笔记来源的图片以及共享至GitHub&#xff0c;本章纯理论。这是k8s中部分的基础理论 &#x1f447; KALItarro/k8spdf: 这个里面只有一个pdf文件 (github.com)https://github.com/KALItarro/k8spdf&#x1f446; 什么是kubernetes kubernetes 是一个开源的&#xff0c;用于管…

Unity(第十一部)场景

游戏有多个场景组成&#xff08;新手村&#xff0c;某某副本&#xff0c;主城&#xff09; 场景是有多个物体组成&#xff08;怪物&#xff0c;地形&#xff0c;玩家等&#xff09; 物体是有多个组件组成&#xff08;刚体组件&#xff0c;自定义脚本&#xff09; 创建场景 编辑…

Intel SGX 概述 --潦草笔记

文章目录 前言一、SGX介绍1.1 指令介绍1.2 数据结构 二、内存保护过程2.1 enclave页面缓存&#xff08;EPC&#xff09;2.2 Enclave页面缓存映射&#xff08;EPCM&#xff09; 三、部署SGX参考资料 前言 SGX是Intel开发的新的处理器技术&#xff0c;可以在计算平台上提供一个可…

华为s5720s-28p-power-li-ac堆叠配置

叠物理约束&#xff1a; • 连线推荐示意图选用产品子系列中固定的一款设备做示例&#xff0c;与选择产品时指定型号的外观可能不同。示意图主要用于让用户了解相同子系列设备可以用作堆叠的端口的位置&#xff0c;以及使用不同的连线方式时如何连接设备上的端口。因此&#xf…

Spring 类型转换、数值绑定与验证(三)— Formatting 与 Validation

1 Formatting 在Spring中用于格式化数据及根据地域展示不同格式的数据。 图 Formatting接口 UML 1.1 注解驱动Formatting 自定义像“DateTimeFormat”注解来对相关字段格式化的步骤为&#xff1a; 自定义注解。定义一个实现AnnotationFormatterFactory接口的工厂类。往容器…

向日葵、Todesk、teamviewer等工具远程连接电脑时第三方应用显示白屏

问题描述&#xff1a;用向日葵远程等桌面时&#xff0c;当把显示器断电或者就没有显示器时或者笔记本盖子合住时&#xff0c;第三方软件显示白屏或显示不出来的问题。 原因&#xff1a;某些显卡在断开屏幕时自动降为低功耗模式。 解决 1、下载工具 https://www.amyuni.com/d…

NoSQL--虚拟机网络配置

目录 1.初识NoSQL 1.1 NoSQL之虚拟机网络配置 1.1.1 首先&#xff0c;导入预先配置好的NoSQL版本到VMware Workstation中 1.1.2 开启虚拟机操作&#xff1a; 1.1.2.1 点击开启虚拟机&#xff1a; 1.1.2.2 默认选择回车CentOS Linux&#xff08;3.10.0-1127.e17.x86_64) 7 …

动态规划之使用最小花费爬楼梯【LeetCode】

动态规划之使用最小花费爬楼梯 LCR 088. 使用最小花费爬楼梯解法1解法2 LCR 088. 使用最小花费爬楼梯 LCR 088. 使用最小花费爬楼梯 解法1 状态表示&#xff08;这是最重要的&#xff09;&#xff1a;dp[i]表示以第i级台阶为楼层顶部&#xff0c;到达第i层台阶的最低花费。 状…

【VSCode】解决VSCode远程连接问题:远程主机可能不符合 glibc 和 libstdc++

今天用VSCode进行ssh连接时&#xff0c;提示“远程主机可能不符合 glibc 和 libstdc VSCode 服务器的先决条件”。查了一下发现这个问题主要是由于VSCode在一月份发布的最新版本v1.86中要求远程主机 glibc>2.28导致的&#xff0c;所以ssh连接Ubuntu 18.04的时候就会提示这个…

详解 Rope (Opal-03a) 的变化

文章目录 &#xff08;一&#xff09;特点&#xff08;二&#xff09;使用流程&#xff08;三&#xff09;界面&#xff08;四&#xff09;详解&#xff08;4.1&#xff09;目录区域⭐Start Rope⭐Video Folder⭐Output Folder⭐Faces Folder &#xff08;4.2&#xff09;预览控…

Python爬虫项目实战案例-批量下载网易云榜单音乐保存至本地

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

汽车后视镜反射率检测仪厂家

随着汽车工业的快速发展&#xff0c;汽车后视镜作为驾驶员观察车辆周围环境的重要工具&#xff0c;其性能和质量对于交通安全至关重要。汽车后视镜的反射率检测仪是一种用于检测汽车后视镜反射性能的专业设备&#xff0c;其重要性不言而喻。本文将重点介绍汽车后视镜反射率检测…

射频识别RFID

射频识别&#xff08;RFID&#xff09;是 Radio Frequency Identification 的缩写。 射频识别技术是自动识别技术的&#xff0c;通过无线射频方式进行非接触双向数据通信&#xff0c;利用无线射频方式对记录媒体&#xff08;电子标签或射频卡&#xff09;进行读写&#xff0c;…

Mallox勒索病毒的最新威胁:如何恢复您的数据?

引言&#xff1a; 在当今数字化时代&#xff0c;网络安全威胁层出不穷&#xff0c;而勒索软件&#xff08;Ransomware&#xff09;是其中最为恶劣的一种形式之一。而.Mallox勒索病毒则是近期备受关注的一种勒索软件&#xff0c;其深受全球各地用户的困扰。那么&#xff0c;让我…

探讨:围绕 props 阐述 React 通信

在 ✓ &#x1f1e8;&#x1f1f3; 开篇&#xff1a;通过 state 阐述 React 渲染 中&#xff0c;以 setInterval 为例&#xff0c;梳理了 React 渲染的相关内容。 &#x1f4e2; 本篇会 ✓ &#x1f1e8;&#x1f1f3; 围绕 props 阐述 React 通信 props React 组件使用 pro…

docker安装单机版canal和使用

说明&#xff1a;我安装的组件架构如下&#xff1a; 1、准备一台虚拟机&#xff0c;192.168.2.223&#xff0c;我安装的时候&#xff0c;docker只支持canal1.1.6版本&#xff0c;1.1.7无法使用docker安装.还有一点要补充&#xff0c;就是1.1.6好像不支持es8.0以上版本&#x…

Appium手机Android自动化

目录 介绍 什么是APPium&#xff1f; APPium的特点 环境准备 adb(android调试桥)常用命令 appium图形化简单使用 连接手机模拟器 使用appium桌面端应用程序 ​编辑 整合java代码测试 环境准备 引入所需依赖 书写代码简单启动 ​编辑 Appium元素定位 id定位 介…