Thymeleaf模板

最新推荐文章于 2024-04-20 23:20:14 发布

高冷大猛男

最新推荐文章于 2024-04-20 23:20:14 发布

阅读量783

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_60934893/article/details/128070297

版权

Thymeleaf可用于前后端分离，下图，value="aa"，在本地静态资源可以改变值，但是在web端不可以

前端可以在本地测试，有数据了显示数据所以前后端分离

th属性

常用th属性解读

html 有的属性， Thymeleaf 基本都有，而常用的属性大概有七八个。其中 th 属性执行的优先级从 1~8 ，数字越低优先

级越高。

一、 th:text ：设置当前元素的文本内容，相同功能的还有 th:utext ，两者的区别在于前者不会转义 html 标签，后者

会。优先级不高： order=7

二、 th:value ：设置当前元素的 value 值，类似修改指定属性的还有 th:src ， th:href 。优先级不高： order=6

三、 th:each ：遍历循环元素，和 th:text 或 th:value 一起使用。注意该属性修饰的标签位置，详细往后看。优先级很

高： order=2

四、 th:if ：条件判断，类似的还有 th:unless ， th:switch ， th:case 。优先级较高： order=3

五、 th:insert ：代码块引入，类似的还有 th:replace ， th:include ，三者的区别较大，若使用不恰当会破坏 html 结

构，常用于公共代码块提取的场景。优先级最高： order=1

六、 th:fragment ：定义代码块，方便被 th:insert 引用。优先级最低： order=8

七、 th:object ：声明变量，一般和 *{} 一起配合使用，达到偷懒的效果。优先级一般： order=4

八、 th:attr ：修改任意属性，实际开发中用的较少，因为有丰富的其他 th 属性帮忙，类似的还有 th:attrappend ，

th:attrprepend 。优先级一般： order=5

常用th属性使用

使用 Thymeleaf 属性需要注意点以下五点：

一、若要使用 Thymeleaf 语法，首先要声明名称空间：

xmlns:th="http://www.thymeleaf.org"

二、设置文本内容 th:text ，设置 input 的值 th:value ，循环输出 th:each ，条件判断 th:if ，插入代码块 th:insert ，定

义代码块 th:fragment ，声明变量 th:object

三、 th:each 的用法需要格外注意，打个比方：如果你要循环一个 div 中的 p 标签，则 th:each 属性必须放在 p 标签上。

若你将 th:each 属性放在 div 上，则循环的是将整个 div 。

四、变量表达式中提供了很多的内置方法，该内置方法是用 # 开头，请不要与 #{} 消息表达式弄混。

五、 th:insert ， th:replace ， th:include 三种插入代码块的效果相似，但区别很大。

pom.xml 引入 Thymeleaf 的依赖，并确定其版本

th:text:

th:value:

th:each：

th:if：

flag=false时，整个p标签不显示，可以用作登录，登录显示，不登录不显示。

th:insert： th:fragment：

th:object：

标准表达式语法

${...} 变量表达式， Variable Expressions

@{...} 链接表达式， Link URL Expressions

#{...} 消息表达式， Message Expressions

~{...} 代码块表达式， Fragment Expressions

*{...} 选择变量表达式， Selection Variable Expressions

变量表达式使用频率最高，其功能也是非常的丰富。所以我们先从简单的代码块表达式开始，然后是消息表达式，再是链接表达式，最后是变量表达式，随带介绍选择变量表达式。

链接表达式好处

不管是静态资源的引用， form 表单的请求，凡是链接都可以用 @{...} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问

链接表达式结构

无参： @{/xxx}

有参： @{/xxx(k1=v1,k2=v2)} 对应 url 结构： xxx?k1=v1&k2=v2

引入本地资源： @{/ 项目本地的资源路径 }

引入外部资源： @{/webjars/ 资源在 jar 包中的路径 }

列举：第三部分的实战引用会详细使用该表达式

常用的内置方法

一、 strings ：字符串格式化方法，常用的 Java 方法它都有。比如： equals ， equalsIgnoreCase ， length ， trim ，

toUpperCase ， toLowerCase ， indexOf ， substring ， replace ， startsWith ， endsWith ， contains ，

containsIgnoreCase 等

二、 numbers ：数值格式化方法，常用的方法有： formatDecimal 等

三、 bools ：布尔方法，常用的方法有： isTrue ， isFalse 等

四、 arrays ：数组方法，常用的方法有： toArray ， length ， isEmpty ， contains ， containsAll 等

五、lists，sets：集合方法，常用的方法有： toList ， size ， isEmpty ， contains ， containsAll ， sort 等

六、 maps ：对象方法，常用的方法有： size ， isEmpty ， containsKey ， containsValue 等

七、 dates ：日期方法，常用的方法有： format ， year ， month ， hour ， createNow 等

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ITDragon Thymeleaf 内置方法</title>
</head>
<body>
<h2>ITDragon Thymeleaf 内置方法</h2>
<h3>#strings </h3>
<div th:if="${not #strings.isEmpty(itdragonStr)}" >
<p>Old Str : <span th:text="${itdragonStr}"/></p>
<p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"/></p>
<p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"/></p>
<p>equals : <span th:text="${#strings.equals(itdragonStr, 'itdragonblog')}"/></p>
<p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,
'itdragonblog')}"/></p>
<p>indexOf : <span th:text="${#strings.indexOf(itdragonStr, 'r')}"/></p>
<p>substring : <span th:text="${#strings.substring(itdragonStr, 2, 8)}"/></p>
<p>replace : <span th:text="${#strings.replace(itdragonStr, 'it', 'IT')}"/></p>
<p>startsWith : <span th:text="${#strings.startsWith(itdragonStr, 'it')}"/></p>
<p>contains : <span th:text="${#strings.contains(itdragonStr, 'IT')}"/></p>
</div>
<h3>#numbers </h3>
<div>
<p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span
th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/></p>
<p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span
th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/></p>
</div>
<h3>#bools </h3>
<div th:if="${#bools.isTrue(itdragonBool)}">
<p th:text="${itdragonBool}"></p>
</div>
<h3>#arrays </h3>
<div th:if="${not #arrays.isEmpty(itdragonArray)}">
<p>length : <span th:text="${#arrays.length(itdragonArray)}"/></p>
<p>contains : <span th:text="${#arrays.contains(itdragonArray, 5)}"/></p>
<p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,
itdragonArray)}"/></p>
</div>
<h3>#lists </h3>
<div th:if="${not #lists.isEmpty(itdragonList)}">
<p>size : <span th:text="${#lists.size(itdragonList)}"/></p>
<p>contains : <span th:text="${#lists.contains(itdragonList, 0)}"/></p>
<p>sort : <span th:text="${#lists.sort(itdragonList)}"/></p>
</div>
后台给负责给变量赋值，和跳转页面。
4.3 总结
一、Thymeleaf 是Spring Boot 官方推荐的Java模版引擎框架，其文件扩展名为.html
二、Thymeleaf 几乎支持所有的html属性，用于赋值的th:text和th:value，用于循环遍历的th:each，用于条件判
断的th:if
三、Thymeleaf 提供四种标准的表达式，有丰富内置方法的${}，用于国际化的#{}，用于代码插入的~{}，用于处理
链接的@{}
四、一定要注意循环遍历的th:each和代码插入的th:insert用法，尽量避免破坏html结构的细节问题
<h3>#maps </h3>
<div th:if="${not #maps.isEmpty(itdragonMap)}">
<p>size : <span th:text="${#maps.size(itdragonMap)}"/></p>
<p>containsKey : <span th:text="${#maps.containsKey(itdragonMap, 'thName')}"/></p>
<p>containsValue : <span th:text="${#maps.containsValue(itdragonMap, '#maps')}"/>
</p>
</div>
<h3>#dates </h3>
<div>
<p>format : <span th:text="${#dates.format(itdragonDate)}"/></p>
<p>custom format : <span th:text="${#dates.format(itdragonDate, 'yyyy-MM-dd
HH:mm:ss')}"/></p>
<p>day : <span th:text="${#dates.day(itdragonDate)}"/></p>
<p>month : <span th:text="${#dates.month(itdragonDate)}"/></p>
<p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"/></p>
<p>year : <span th:text="${#dates.year(itdragonDate)}"/></p>
<p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"/></p>
<p>hour : <span th:text="${#dates.hour(itdragonDate)}"/></p>
<p>minute : <span th:text="${#dates.minute(itdragonDate)}"/></p>
<p>second : <span th:text="${#dates.second(itdragonDate)}"/></p>
<p>createNow : <span th:text="${#dates.createNow()}"/></p>
</div>
</body>
</html>

。

高冷大猛男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf模板

Thymeleaf可用于前后端分离，下图，value="aa"，在本地静态资源可以改变值，但是在web端不可以前端可以在本地测试，有数据了显示数据所以前后端分离常用th属性解读html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。一、：设置当前元素的文本内容，相同功能的还有，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7二、：设置当前元素的value。
复制链接

扫一扫