spring boot(四)：thymeleaf使用详解(1)

最新推荐文章于 2025-04-12 18:06:08 发布

2401_85015426

最新推荐文章于 2025-04-12 18:06:08 发布

阅读量909

点赞数 14

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.youkuaiyun.com/2401_85015426/article/details/138990689

版权

2024年程序员学习专栏收录该内容

16 篇文章

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

如果你需要这些资料，可以戳这里获取

| th:remove | 删除某个属性 | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
| th:attr | 设置标签属性，多个属性可以用逗号分隔 | 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。 |

还有非常多的标签，这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。

几种常用的使用方法

1、赋值、字符串拼接

 `<p th:text="${collect.description}">description</p>
 <span th:text="'Welcome to our application, ' + ${user.name} + '!'">`

字符串拼接还有另外一种简洁的写法

`<span th:text="|Welcome to our application, ${user.name}!|">`

2、条件判断 If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，<a>标签只有在th:if中条件成立时才显示：

`<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>`

th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容

3、for 循环

 `<tr th:each="collect,iterStat : ${collects}"> 
 <th scope="row" th:text="${collect.id}">1</th>
 <td >
 <img th:src="${collect.webLogo}"/>
 </td>
 <td th:text="${collect.url}">Mark</td>
 <td th:text="${collect.title}">Otto</td>
 <td th:text="${collect.description}">@mdo</td>
 <td th:text="${terStat.index}">index</td>
 </tr>`

iterStat称作状态变量，属性有：

index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个

4、URL

URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。
如果需要Thymeleaf对URL进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

`<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
 <a th:href="@{/standard/{type}(type=${type})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>`

设置背景

`<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>`

根据属性值改变背景

 `<div class="media-object resource-card-image" th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.png' : ${collect.webLogo})} + ')'" ></div>`

几点说明：

上例中URL最后的(orderId=${o.id}) 表示将括号内的内容作为URL参数处理，该语法避免使用字符串拼接，大大提高了可读性
@{...}表达式中可以通过{orderId}访问Context中的orderId变量
@{/order}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order

5、内联js

内联文本：[[…]]内联文本的表示方式，使用时，必须先用th:inline=”text/javascript/none”激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，不利于原型显示。

<script th:inline="javascript">
/\*<![CDATA[\*/
...
var username = /\*[[${sesion.user.name}]]\*/ 'Sebastian';
var size = /\*[[${size}]]\*/ 0;
...
/\*]]>\*/
</script>

js附加代码：

/\*[+
var msg = 'This is a working application';
+]\*/

js移除代码：

/\*[- \*/
var msg = 'This is a non-working template';
/\* -]\*/

6、内嵌变量

为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过#直接访问：

dates ： java.util.Date的功能方法类。
calendars : 类似#dates，面向java.util.Calendar
numbers : 格式化数字的功能方法类
strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
objects: 对objects的功能类操作。
bools: 对布尔值求值的功能方法。
arrays：对数组的功能类方法。
lists: 对lists功能类方法
sets
maps
…

下面用一段代码来举例一些常用的方法：

dates

`/*
 * Format date with the specified pattern
 * Also works with arrays, lists or sets
 */
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}

/*
 * Create a date (java.util.Date) object for the current date and time
 */
${#dates.createNow()}

/*
 * Create a date (java.util.Date) object for the current date (time set to 00:00)
 */
${#dates.createToday()}`

strings

`/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')} // also array*, list* and set*
${#strings.endsWith(name,endingFragment)} // also array*, list* and set*

/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}

/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}

/*
 * Random
 */
${#strings.randomAlphanumeric(count)}`

使用thymeleaf布局

使用thymeleaf布局非常的方便

定义代码片段

`<footer th:fragment="copy"> 
&copy; 2016
</footer>`

在页面任何地方引入：

`<body> 
 <div th:include="footer :: copy"></div>
 <div th:replace="footer :: copy"></div>
 </body>`

th:include 和 th:replace区别，include只是加载，replace是替换

返回的HTML如下：

`<body> 
 <div> &copy; 2016 </div> 
 <footer>&copy; 2016 </footer> 
</body>`

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面

`<body class="layout-fixed">
 <div th:fragment="navbar" class="wrapper" role="navigation">
 <div th:replace="fragments/header :: header">Header</div>
 <div th:replace="fragments/left :: left">left</div>
 <div th:replace="fragments/sidebar :: sidebar">sidebar</div>
 <div layout:fragment="content" id="content" ></div>
 <div th:replace="fragments/footer :: footer">footer</div>
 </div>
</body>`

任何页面想使用这样的布局值只需要替换中见的 content模块即可

 `<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
 <body>
 <section layout:fragment="content">
 ...`

也可以在引用模版的时候传参

`<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>`

layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlhead
htmlhead 是指定义的代码片段如 th:fragment="copy"

源码案例

这里有一个开源项目几乎使用了这里介绍的所有标签和布局，大家可以参考：
cloudfavorites

参考

thymeleaf官方指南
 新一代Java模板引擎Thymeleaf
Thymeleaf基本知识
 thymeleaf总结文章
 Thymeleaf 模板的使用
 thymeleaf 学习笔记

保持纯洁，保持微笑��。点我试试看？

分类:
springboot

标签:
springboot thymeleaf

好文要顶
关注我
收藏该文
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

纯洁的微笑

关注 - 5

粉丝 - 508

荣誉：
推荐博客

+加关注

« 上一篇：
程序员该用哪种姿势来理财

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

« 上一篇：
程序员该用哪种姿势来理财

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。
[外链图片转存中…(img-CQaKsZU6-1715905319993)]
[外链图片转存中…(img-73dTVwGi-1715905319993)]

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！