Thymeleaf语法详解

目录

一、Thymeleaf介绍

（1）依赖

（2）视图

（3）控制层

二、变量输出

三、操作字符串

四、操作时间

五、条件判断

六、遍历集合

（1）迭代遍历

（2）将遍历的状态变量封装到一个对象中

七、遍历Map

八、获取域中的数据

（1）控制层

（2）视图

九、Thymeleaf中的URL写法

一、Thymeleaf介绍

Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎，类似JSP。它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。在SpringBoot中推荐使用Thymeleaf编写动态页面。

Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

Thymeleaf在有网络和无网络的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。没有数据时，Thymeleaf的模板可以静态地运行；当有数据返回到页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。

（1）依赖

<!--添加Thymeleaf起步依赖-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

（2）视图

一定要注意templates的html文件不能直接访问，需要编写controller跳转到页面中

<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<h2 th:text="${name}"></h2>
</body>
</html>

（3）控制层

@Controller
public class PageController {// 页面跳转@GetMapping("/show")public String showPage(Model model){model.addAttribute("name","Hello Thymeleaf");return "index";}
}

二、变量输出

th:text

作用：将model的值作为内容放入标签中。

th:value

作用：将model的值放入input标签的value属性中

<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<h1>name=<span th:text="${name}"></span></h1>
<input th:value="${name}">
</body>
</html>

三、操作字符串

Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的，操作字符串的内置对象为strings。

方法	                                      说明
${#strings.isEmpty(key)}	    判断字符串是否为空，如果为空返回true，否则返回false
${#strings.contains(msg,'T')}	判断字符串是否包含指定的子串，如果包含返回true，否则返回false
${#strings.startsWith(msg,'a')}	判断当前字符串是否以子串开头，如果是返回true，否则返回false
${#strings.endsWith(msg,'a')}	判断当前字符串是否以子串结尾，如果是返回true，否则返回false
${#strings.length(msg)}	        返回字符串的长度
${#strings.indexOf(msg,'h')}	查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,2,5)}	截取子串，用法与JDK的subString方法相同
${#strings.toUpperCase(msg)}	字符串转大写
${#strings.toLowerCase(msg)}	字符串转小写
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<span th:text="${#strings.length(name)}"></span>
<span th:text="${#strings.startsWith(name,'n')}"></span>
</body>
</html>

四、操作时间

操作时间的内置对象为dates

方法	                                      说明
${#dates.format(key)}	            格式化日期，默认的以浏览器默认语言为格式化标准
${#dates.format(key,'yyyy/MM/dd')}	按照自定义的格式做日期转换
${#dates.year(key)}	                取年
${#dates.month(key)}	            取月
${#dates.day(key)}	                取日
添加数据
model.addAttribute("date",new Date(130,01,01));
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<span th:text="${#dates.format(date)}"></span>
<span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span>
<span th:text="${#dates.year(date)}"></span>
<span th:text="${#dates.month(date)}"></span>
</body>
</html>

五、条件判断

th:if  用于条件判断

th:switch/th:case  th:switch/th:case与Java中的switch语句等效。th:case="*"表示Java中switch的default，即没有case的值为true时显示th:case="*"的内容。

添加数据model.addAttribute("age",3);
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<span th:if="${age}==1">我是1</span>
<span th:if="${age}==2">我是2</span>
<span th:if="${age}==3">我是3</span>
</body>
</html>

<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>thymeleaf入门</title>
</head>
<body>
<!-- thymeleaf支持el表达式 -->
<div th:switch="${age}"><span th:case="1">我是1</span><span th:case="2">我是2</span><span th:case="3">我是3</span><span th:case="4">我是4</span><span th:case="*">我是不知道</span>
</div>
</body>
</html>

六、遍历集合

（1）迭代遍历

th:each  迭代器，用于循环迭代集合

 @GetMapping("/c1")public String t1(Model model){List<Users> users=new ArrayList<>();Users users1=new Users("2","pet",54);Users users2=new Users("18","ioi",7);Users users3=new Users("223","ppp",65);users.add(users1);users.add(users2);users.add(users3);model.addAttribute("li",users);return "index";}
<body>
<!-- thymeleaf支持el表达式 -->
<table border="1" width="50%"><tr><th>id</th><th>name</th><th>age</th></tr><tr th:each="u:${li}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td></tr>
</table>
</body>

（2）将遍历的状态变量封装到一个对象中

thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：

状态变量含义
index当前迭代器的索引，从0开始
count当前迭代对象的计数，从1开始
size被迭代对象的长度
odd/even布尔值，当前循环是否是偶数/奇数，从0开始
first布尔值，当前循环的是否是第一条，如果是返回true，否则返回false
last布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false
<tr th:each="user,status : ${li}"><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.age}"></td><td th:text="${status.index}"></td><td th:text="${status.count}"></td><td th:text="${status.size}"></td><td th:text="${status.odd}"></td><td th:text="${status.even}"></td><td th:text="${status.first}"></td><td th:text="${status.last}"></td>
</tr>

七、遍历Map

遍历Map出来的每一项是键值对，key获取键，value获取值

 @GetMapping("/c1")public String t1(Model model){Map<String,Users> map=new HashMap<>();map.put("u1",new Users("16","张三",90));map.put("u2",new Users("90","李四",12));map.put("u4",new Users("1","王一",16));model.addAttribute("us",map);return "index";}
<body>
<!-- thymeleaf支持el表达式 -->
<table border="1" width="50%"><tr><th>键</th><th>id</th><th>name</th><th>age</th></tr><tr th:each="u:${us}"><th th:text="${u.key}"></th><th th:text="${u.value.id}"></th><th th:text="${u.value.name}"></th><th th:text="${u.value.age}"></th></tr>
</table>
</body>

八、获取域中的数据

（1）控制层

@GetMapping("/c1")public String t1(HttpServletRequest request, HttpSession session){request.setAttribute("q1","我是request数据");session.setAttribute("s1","我绝对是session");ServletContext servletContext=session.getServletContext();servletContext.setAttribute("c1","我真的是context'数据");return "index";}

（2）视图

<body>
<!-- thymeleaf支持el表达式 -->
request1=<span th:text="${#request.getAttribute('q1')}"></span>
request2=<span th:text="${#httpServletRequest.getAttribute('q1')}"></span>
session=<span th:text="${session.s1}"></span>
session1=<span th:text="${#httpSession.getAttribute('s1')}"></span>
context1=<span th:text="${application.c1}"></span>
context2=<span th:text="${#servletContext.getAttribute('c1')}"></span>
</body>

九、Thymeleaf中的URL写法

在Thymeleaf中路径的写法为@{路径}

<a th:href="@{show2?id=1&name=gq}">静态参数一</a>
<a th:href="@{show2(id=2,name=gq)}">静态参数二</a>
<a th:href="@{'show2?id='+${id}+'&name='+${name}}">动态参数一</a>
<a th:href="@{show2(id=${id},name=${name})}">动态参数二</a>

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

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

相关文章

webpack 基础配置

webpack 基础配置

常见配置 文件打包的出口和入口webpack如何开启一台服务webpack 如何打包图片&#xff0c;静态资源等。webpack 配置 loader配置 plugin配置sourceMap配置 babel 语法降级等 接下来 &#xff0c; 我们先从webpack的基本配置 开始吧&#xff01; 在准备 配置之前 , 搭建一个 …
阅读更多...
程序地址空间

程序地址空间

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——程序地址空间 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;我们一直随口就能说出来的栈区&#xff0c;堆区&#xff0c;常量…
阅读更多...
VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法

VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法

首先来看报错的makefile源码 再来看报错的信息&#xff1a; 第5行缺少分隔符&#xff0c;其实不止是第5行&#xff0c;只要是前面需要加tab留白的行都会报这个错误&#xff0c;比如说第7行第11行 编译的时候&#xff0c;前面的留白必须是按tab键生成的 但是&#xff01;&…
阅读更多...
C++11线程库简介

C++11线程库简介

前言 在c11之前涉及多线程的问题都是和平台相关的&#xff0c;比如windows和linux都有一套自己的接口&#xff0c;这使得代码的可移植性变差。C11中最重要的特性就是对线程进行了支持&#xff0c;使得C在编程时不再依赖第三方库&#xff0c;而且原子操作中还引入了原子类的概念…
阅读更多...
LeetCode：3. 无重复字符的最长子串

LeetCode：3. 无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; // 3.无重复字符的最长子串 // 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 class Solu…
阅读更多...
DETR：End-to-End Object Detection with Transformers

DETR：End-to-End Object Detection with Transformers

代码&#xff1a;https://github.com/HuKai97/detr-annotations 论文&#xff1a;https://arxiv.org/pdf/2005.12872.pdf 参考视频&#xff1a;DETR 论文精读【论文精读】_哔哩哔哩_bilibili 团队&#xff1a;Meta AI 摘要 DETR 做目标检测任务既不需要proposal&#xff0…
阅读更多...
elasticsearch4-文档操作

elasticsearch4-文档操作

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…
阅读更多...
html的日期选择插件

html的日期选择插件

1.效果 2.文档 https://layui.gitee.io/v2/docs/ 3.引入 官网地址&#xff1a; https://layui.gitee.io/v2/ 引入&#xff08;在官网下载&#xff0c;&#xff09;jquery-1.7.2.min.js,layui/layui.js **<link href"js/layui/css/layui.css" rel"stylesh…
阅读更多...
哈夫曼编码原理及实现

哈夫曼编码原理及实现

文章目录 一.哈夫曼编码原理哈夫曼二叉树构建 二.具体代码实现 一.哈夫曼编码原理 哈夫曼编码&#xff08;Huffman Coding&#xff09;是一种用于数据压缩的编码方法&#xff0c;它通过给出不同的数据符号分配不同长度的编码&#xff0c;使得出现频率高的符号具有较短的编码&a…
阅读更多...
OpenCV(四十一)：图像分割-分水岭法

OpenCV(四十一)：图像分割-分水岭法

1.分水岭方法介绍 OpenCV 提供了分水岭算法&#xff08;Watershed Algorithm&#xff09;的实现&#xff0c; 使用分水岭算法对图像进行分割&#xff0c;将图像的不同区域分割成互不干扰的区域。分水岭算法模拟了水在图像中的扩散和聚集过程&#xff0c;将标记的边界被看作是阻…
阅读更多...
PHP8中获取并删除数组中第一个元素-PHP8知识详解

PHP8中获取并删除数组中第一个元素-PHP8知识详解

我在上一节关于数组的教程&#xff0c;讲的是在php8中获取并删除数组中最后一个元素&#xff0c;今天分享的是相反的&#xff1a;PHP8中获取并删除数组中第一个元素。 回顾一下昨天的知识&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;今天学习的是使用arr…
阅读更多...
Vue自动生成二维码并可下载二维码

Vue自动生成二维码并可下载二维码

遇到一个需求&#xff0c;需要前端自行生成用户的个人名片分享二维码&#xff0c;并提供二维码下载功能。在网上找到很多解决方案&#xff0c;最终吭哧吭哧做完了&#xff0c;把它整理记录一下&#xff0c;方便后续学习使用&#xff01;嘿嘿O(∩_∩)O~ 这个小东西有以下功能特点…
阅读更多...
AWT中常用组件

AWT中常用组件

笔记&#xff1a;https://www.yuque.com/huangzhanqi/rhwoir/repuodh23fz01wiv 仓库&#xff1a;Java图形化界面: Java图形化界面学习demo与资料 (gitee.com) 基本组件 组件名 功能 Button Button Canvas 用于绘图的画布 Checkbox 复选框组件&#xff08;也可当做单选…
阅读更多...
批量获取CSDN文章对文章质量分进行检测，有助于优化文章质量

批量获取CSDN文章对文章质量分进行检测，有助于优化文章质量

&#x1f4da;目录 ⚙️简介✨分析获取步骤⛳获取文章列表☘️前期准备✨ 接口解析⚡️ 获取文章的接口 ☄️文章质量分接口⭐接口分析 ⌛代码实现&#xff1a;⚓核心代码:⛵测试用例:⛴ 运行效果:☘️增加Excel导出 ✍️结束 ⚙️简介 有时候我们写文章是为了记录当下遇到的bu…
阅读更多...
查看表结构

查看表结构

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法格式: desc 表名; 描述: 如果表不存在,就提示不存在; 如果表存在,就显示表的结构 比如: desc test01; desc test02; 错误示范: mysql> …
阅读更多...
systemserver的inputdispatcher直接产生CANCEL事件原理分析-讨厌的android触摸面试题

systemserver的inputdispatcher直接产生CANCEL事件原理分析-讨厌的android触摸面试题

背景回顾&#xff1a; 上一个blog已经重点讲解了app层面自己产生的Cancel触摸事件&#xff0c;大概产生的原理如下&#xff1a; 上一个blog地址&#xff1a;https://blog.csdn.net/learnframework/article/details/124086882 即可以看出来&#xff0c;在服务端systemserver其实…
阅读更多...
vue3-vant4-vite-pinia-axios-less学习日记

vue3-vant4-vite-pinia-axios-less学习日记

代码地址 GitHub&#xff1a;vue3-vant4-vite-pinia-axios-less 效果如图 1.首页为导航栏 2.绑定英雄页 3.注册页 4.英雄列表页 5.后面不截图了&#xff0c;没啥了 模块 1.vant4&#xff1a;按需引入组件样式文档 2.安装该vite-plugin-vue-setup-extend插件可以直接在…
阅读更多...
基于Java+SpringBoot+Vue的图书借还小程序的设计与实现（亮点：多角色、点赞评论、借书还书、在线支付）

基于Java+SpringBoot+Vue的图书借还小程序的设计与实现（亮点：多角色、点赞评论、借书还书、在线支付）

图书借还管理小程序 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1 小…
阅读更多...
Linux安全加固：保护你的服务器

Linux安全加固：保护你的服务器

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
【深度学习实验】线性模型（三）：使用Pytorch实现简单线性模型：搭建、构造损失函数、计算损失值

【深度学习实验】线性模型（三）：使用Pytorch实现简单线性模型：搭建、构造损失函数、计算损失值

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入库 1. 定义线性模型linear_model 2. 定义损失函数loss_function 3. 定义数据 4. 调用模型 5. 完整代码 一、实验介绍 使用Pytorch实现 线性模型搭建构造损失函数计算损失值 二、…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023