【Spring Boot】Thymeleaf模板引擎 — 表达式的语法

表达式的语法

模板的主要作用是将后台返回的数据渲染到HTML中。那么Thymeleaf是如何解析后台数据的呢?接下来从变量、方法、条件判断、循环、运算(逻辑运算、布尔运算、比较运算、条件运算)方面学习Thymeleaf表达式支持的语法。

1.赋值和拼接

(1)文本赋值

赋值就是通过${}标签将后台返回的数据替换到页面中。

<p th:text="${name}">hello spring boot</p>

(2)文本拼接

Thymeleaf支持将后台返回的值和现有的内容进行拼接,然后替换到页面中。示例代码如下:

<span th:text=" 'Welcome,' + ${username} + '!' "></span>

在上面的示例中,将后台返回的userName的值拼接到“Welcome,”之后,最后统一替换到页面的<span>中。文本文字可以用单引号来包含,如有特殊字符,需要用“\”转义。

除了上面这种写法外,字符串拼接还有另一种简洁的写法:

<span th:text="|Welcome, + ${username} + !|"></span>

在上面的示例中,使用两个竖杠“|”将后台返回的数据与页面中的内容合并。

Thymeleaf标签和HTML的基本一致,在HTML的标签上加上“th:”即可替换HTML标签中原生属性的值。

2.条件判断

Thymeleaf中使用th:if和th:unless属性进行条件判断。在标签中使用th:if属性判断表达式是否成立,成立则显示该标签的内容,不成立则隐藏该标签的内容。th:unless与th:if恰好相反,只有表达式中的条件不成立才会显示其内容。

th:if和th:unless表达式的结果支持boolean、number、character、string及其他类型。下面通过例子演示Thymeleaf中如何使用th:if和th:unless属性进行条件判断。

步骤01 定义HTML页面。

在templates目录下创建if.html页面,示例代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="en"><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>条件判断</h3>
<a th:if="${flag == 'yes'}" th:href="@{http://www.a.home/}">a.home</a>
<a th:unless="${flag != 'no'}" th:href="@{http://www.b.home/}">b.home</a>
</body>
</html>

在上面的例子中,通过th:if标签进行条件判断,如果flag==yes,就显示a.home的链接,否则显示b.home的链接。

步骤02 定义后端接口,返回数据结果。

    @RequestMapping("/if")public String ifunless(ModelMap map) {map.addAttribute("flag","yes");return "if";}

在上面的示例中,定义请求的地址,返回if.html页面,并返回flag的值为yes。

步骤03 启动验证。

启动项目后,在浏览器中输入地址http://localhost:8080/if,如图所示。
在这里插入图片描述
由图可知,后端返回的flag值为yes,th:if="${flag == 'yes'}"条件成立,所以显示a.home的链接。而th:unless="${flag != 'no'}" 条件也成立,所以隐藏b.home的链接。

3.switch

Thymeleaf中使用th:switch、th:case标签进行多条件判断,与Java中的switch语句等效,根据条件显示匹配的内容,如果有多个匹配结果,只选择第一个显示。th:case="*"表示默认选项,即没有case的值为true时显示th:case="*"的内容,对应Java中switch的default。下面以数据状态为例来演示th:switch的用法。

步骤01 创建前端页面。

在templates目录下创建switch.html页面,示例代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"></meta><title>Example switch</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>switch</h3>
<div><div th:switch="${status}"><p th:case="'todo'">未开始</p><p th:case="'doing'">进行中</p><p th:case="'done'">完成</p><!-- *case的默认选项 --><p th:case="*">状态错误</p></div>
</div>
</body>
</html>

在上面的示例代码中,使用th:switch、th:case标签根据后台返回的status的值显示匹配数据。

步骤02 添加后端程序。

    @RequestMapping("/switch")public String ifunless(ModelMap map) {map.addAttribute("status","doing");return "switch";}

在上面的示例中,后台返回switch.html页面,同时返回status值为doing。

步骤03 运行验证。

启动项目,在浏览器中输入地址http://localhost:8080/switch,页面显示效果如图所示。页面显示“进行中”的状态,可以在后台更改status的值来查看结果。

在这里插入图片描述
由图可知,switch.html页面通过后台返回的status的值来显示不同的内容。

4.循环遍历

循环遍历在日常项目中比较常用,一般用于将后台返回的数据渲染到前端的表格中。Thymeleaf可以使用th:each标签进行数据的迭代循环,语法:th:each="obj,iterStat:${objList}",支持List、Map、数组数据类型等。下面通过简单的例子演示数据循环遍历的过程。

步骤01 定义后端数据。

首先在后端定义一个用户列表,然后传递到前端页面:

    @RequestMapping("/list")public String list(ModelMap map) {List<User> list = new ArrayList();User user1 = new User("spring", 12, "123456");User user2 = new User("boot", 6, "123456");User user3 = new User("Thymeleaf", 68, "123456");list.add(user1);list.add(user2);list.add(user3);map.addAttribute("user", list);return "list";}

在上面的示例代码中,后台返回list.html页面,同时返回ArrayList类型的用户列表数据。

步骤02 创建前台页面。

在templates目录下创建list.html页面,展示后台的数据,示例代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"></meta><title>Example switch</title>
</head>
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>each循环遍历</h3>
<div><table><tr><th>姓名</th><th>年龄</th><th>密码</th><th>变量: index</th><th>变量: count</th><th>变量: size</th><th>变量: even</th><th>变量: odd</th><th>变量: first</th><th>变量: last</th></tr><tr th:each="user,stat : ${users}"><td th:text="${user.name}">name</td><td th:text="${user.age}">age</td><td th:text="${user.password}">password</td><td th:text="${iterStat.index}">index</td><td th:text="${iterStat.count}">count</td><td th:text="${iterStat.size}">size</td><td th:text="${iterStat.even}">even</td><td th:text="${iterStat.odd}">odd</td><td th:text="${iterStat.first}">first</td><td th:text="${iterStat.last}">last</td></tr></table>
</div>
</body>
</html>

循环遍历通过th:each实现,语法:th:each="obj,stat:${objList}"

1)${users}是从模板上下文中获取变量。

2)user是${users}变量遍历后的每一个对象。

3)${user.name}可以读取遍历中的变量。

在遍历的同时,也可以获取迭代对象的迭代状态变量stat,它包含如下属性:

  • index:当前迭代对象的index(从0开始计算)。
  • count:当前迭代对象的index(从1开始计算)。
  • size:被迭代对象的大小。
  • even/odd:布尔值,当前循环是不是偶数/奇数(从0开始计算)。
  • first:布尔值,当前循环是不是第一个。
  • last:布尔值,当前循环是不是最后一个。

步骤03 运行验证。

启动项目,在浏览器中输入地址:http://localhost:8080/list,页面显示效果如图所示。

在这里插入图片描述

由图可知,后端返回的list数据被循环遍历并显示在页面中,同时th:each标签还提供了index、count等标签。

5.运算符

Thymeleaf支持在表达式中使用算术运算、逻辑运算、布尔运算、三目运算等各类数据计算功能,实现前端页面根据后台返回数据动态显示页面信息。下面就来一一演示。

5.1算术运算符

算术运算符包括+、-、*、/、%等简单的计算。

<th:with="isEven=(${prodStat.count} / 2 == 0)">

在上面的示例中,通过除以2的算术运算判断奇偶。

5.2关系运算符

关系运算符包括>、<、>=、<=、==、!=,对应的别名为gt、lt、ge、le、eq、ne,使用>、<时需要用它的HTML转义符,所以建议使用gt、lt等别名:

  • gt:great than(大于)。
  • ge:great equal(大于等于)。
  • eq:equal(等于)。
  • lt:less than(小于)。
  • le:less equal(小于等于)。
  • ne:not equal(不等于)。
<th:if="${prodStat.count} gt 1">

使用gt比较count的值是否大于1。

5.3逻辑运算符

通过逻辑运算符实现多个条件判断,包括&&(and)和||(or)。

&&(and)表示“并且”,示例如下:

<div th:if="${age gt 10 && a lt 19}"></div>

<div th:if=" (${age gt 10}) and ${age lt 19} "></div>

上面的示例表示:如果age>10且age <19,实现年龄是否在10~19岁的判断。

|| or表示“或者”,示例如下:

<div th:if="${age gt 10 || age lt 19}"></div>

<div th:if=" (${age gt 10}) or ${age lt 19} "></div>

上面的示例表示:如果age > 10或age < 19,实现年龄大于10岁或者年龄小于19岁的判断。

5.4三目运算符

三目运算符的语法与Java等语言类似,具体使用如下:

<tr th:class="${row.even}? 'even' : 'odd' ">
...
</tr>

在上面的示例中,在前端列表进行数据渲染,实现用颜色隔行显示的效果。

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

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

相关文章

RPC框架引入zookeeper服务注册与服务发现

Zookeeper概念及其作用 ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是大数据生态中的重要组件。它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理…

使用 LangChain 搭建基于 Amazon DynamoDB 的大语言模型应用

LangChain 是一个旨在简化使用大型语言模型创建应用程序的框架。作为语言模型集成框架&#xff0c;在这个应用场景中&#xff0c;LangChain 将与 Amazon DynamoDB 紧密结合&#xff0c;构建一个完整的基于大语言模型的聊天应用。 本次活动&#xff0c;我们特意邀请了亚马逊云科…

git 版本管理工具 学习笔记

git 学习笔记 目录 一、git是什么 二、创建仓库 三、工作区域和文件状态 四、添加和提交文件 五、回退版本 &#xff08;了解&#xff09; 六、查看差异 七、删除文件 八、.gitignore文件&#xff08;了解&#xff09; 九、github ssh-key配置 十、本地仓库和远程仓库内…

C++ STL vector

目录 一.认识vector 二.vector的使用 1.vector的构造函数 2.vector的迭代器 2.1 begin&#xff08;&#xff09;&#xff0c;end&#xff08;&#xff09; 2.2 rbegin&#xff08;&#xff09;&#xff0c;rend&#xff08;&#xff09; 2.3 迭代器初始化对象 3. vector…

pp-ocr报错记录

RESER 报错&#xff1a; distutils.errors.DistutilsError: Could not find suitable distribution for Requirement.parse(‘tomli>1.0.0’) 解决办法&#xff1a; 参考&#xff1a;https://stackoverflow.com/questions/67603407/distutilserror-could-not-find-suitable…

网络编程——MAC地址、IP地址和子网掩码

MAC地址、IP地址和子网掩码 一、MAC地址&#xff1a;硬件身份证 1、MAC地址的概念 MAC地址&#xff0c;即媒体访问控制地址&#xff08;Media Access Control Address&#xff09;&#xff0c;是一个用于唯一标识网络设备的物理地址。每个网络接口卡&#xff08;NIC&#xf…

RocketMQ 主备自动切换模式部署

目录 主备自动切换模式部署 Controller 部署​ Controller 嵌入 NameServer 部署​ Controller 独立部署​ Broker 部署​ 兼容性​ 升级注意事项​ 主备自动切换模式部署 该文档主要介绍如何部署支持自动主从切换的 RocketMQ 集群&#xff0c;其架构如上图所示&#xff…

TeeChart NET for MAUI Crack

TeeChart NET for MAUI Crack 跨平台图表-移动或桌面应用程序的核心图表代码相同。 图表集合-60多种图表类型和50多种财务和统计指标。 图表类型 60多种2D和3D图表类型以及多种组合&#xff0c;包括&#xff1a; 标准&#xff1a;线条(条形)、条形、区域、饼图、快线、点(散点…

24届近5年上海大学自动化考研院校分析

今天给大家带来的是上海大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、上海大学 学校简介 上海大学是上海市属的综合性研究型大学&#xff0c;是教育部与上海市人民政府共建高校&#xff0c;是国家“211 工程”重点建设高校、上海市高水平地方大学建设高校&a…

Python爬虫遇到重定向问题解决办法汇总

在进行Python爬虫任务时&#xff0c;遇到重定向问题是常见的问题之一。重定向是指在发送请求时&#xff0c;服务器会返回一个新的URL&#xff0c;将请求重新定向到该URL。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决办法&#xff0c;并给出相关的代码示例&…

论文阅读 - Social bot detection in the age of ChatGPT: Challenges and opportunities

论文链接&#xff1a;https://www.researchgate.net/publication/371661341_Social_bot_detection_in_the_age_of_ChatGPT_Challenges_and_opportunities 目录 摘要&#xff1a; 引言 1.1. Background on social bots and their role in society 1.2. The rise of AI-gene…

Java私有仓库Nexus搭建部署

Java私有仓库Nexus搭建部署 需求分析 为什么要搭建部署Nexus私有仓库&#xff0c;有什么用&#xff0c;用来干什么&#xff0c;怎么用&#xff0c;也许是大家看到这篇文章的第一个反应和疑惑&#xff0c;这里给大家先笼统的做一个介绍&#xff1a; 依赖管理&#xff1a;在Java…

css, resize 拖拉宽度

效果如下&#xff1a; 可直接复制预览查看属性值: 关键样式属性&#xff1a; resize: horizontal; overflow-x: auto; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…

Windows同时安装两个版本的JDK并随时切换,以JDK6和JDK8为例,并解决相关存在的问题(亲测有效)

Windows同时安装两个版本的JDK并随时切换&#xff0c;以JDK6和JDK8为例&#xff0c;并解决相关存在的问题&#xff08;亲测有效&#xff09; 1.下载不同版本JDK 这里给出JDK6和JDK的百度网盘地址&#xff0c;具体安装过程&#xff0c;傻瓜式安装即可。 链接&#xff1a;http…

第20节 R语言医学分析:某保险医疗事故赔偿因素分析

文章目录 某保险医疗事故赔偿因素分析源码源文件下载某保险医疗事故赔偿因素分析 我们分析数据集“诉讼”的第一个方法是确定样本数量、变量类型、缩放/编码约定(如果有)用于验证数据清理。 接下来,数据集看起来很干净,没有缺失值,并且对于分类变量,将编码约定替换为实际…

第3章 数据和C

本章介绍以下内容&#xff1a; 关键字&#xff1a;int 、short、long、unsigned、char、float、double、_Bool、_Complex、_Imaginary 运算符&#xff1a;sizeof() 函数&#xff1a;scanf() 整数类型和浮点数类型的区别 如何书写整型和浮点型常数&#xff0c;如何声明这些类型的…

设计模式原来是这样

目录 概述: 什么是模式&#xff01;&#xff01; 为什么学习模式&#xff01;&#xff01; 模式和框架的比较&#xff1a; 设计模式研究的历史 关于pattern的历史 Gang of Four(GoF) 关于”Design”Pattern” 重提&#xff1a;指导模式设计的三个概念 1.重用(reuse)…

工具、技巧【个人专用】如何在CSND编辑器内输出带颜色的字体?Markdown编辑器——字体、字号、颜色使用全解

当你穿过了暴风雨,你就不再是原来那个人。 ————村上春树 🎯作者主页: 追光者♂🔥 🌸个人简介: 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿 🌟[3] 2022年度博客之星人工智能领域TOP4dz

HarmonyOS/OpenHarmony-ArkTS基于API9元服务开发快速入门

一、创建项目 二、创建卡片 三、添加资源 四、具体代码 Entry Component struct WidgetNewCard {/** The title.*/readonly TITLE: string harmonyOs;readonly CONTEXT: string 技术构建万物智联;/** The action type.*/readonly ACTION_TYPE: string router;/** The…

Win10下webots2020b闪退

下载安装完之后打开软件就会停留在这个界面几秒钟&#xff0c;什么都点不了&#xff0c;然后就会闪退回桌面 原因: webots安装路径中有中文 解决方案&#xff1a; 安装路径下的中文改为英文