Thymeleaf语法详解(8大语法使用示例)

Thymeleaf语法详解(8大语法使用示例)-mikechen

Thymeleaf是Java模板引擎，并且Thymeleaf被Springboot官方推荐，成为JavaWeb领域必备技能，下面重点详解Thymeleaf的语法。

Thymeleaf变量表达式

  1. 变量表达式：${...}

示例：

  1. <div th:object="${book}">

Thymeleaf选择变量表达式

选择变量表达式和变量表达式用法类似，一般用于从被选定对象而不是上下文中获取属性值。

  1. 选择变量表达式：*{...}

示例：

  1. <p>titile: <span th:text="*{title}">标题</span>.</p>

*{title} 选择变量表达式获取当前指定对象book的title属性值。

Thymeleaf链接表达式

用于静态资源的引用，form表单的请求等链接。

  1. 链接表达式：@{...}

示例：

  1. 无参：@{/xxx}
  2.  
  3. 有参：@{/xxx(k1=v1,k2=v2)} 对应url结构：xxx?k1=v1&k2=v2
  4.  
  5. 引入本地资源：@{/项目本地的资源路径}
  6.  
  7. 引入外部资源：@{/webjars/资源在jar包中的路径}

Thymeleaf国际化表达式

  1. 国际化表达式：#{...}

一般用于国际化的场景，示例如下：

  1. th:text="#{msg}"

Thymeleaf片段引用表达式

片段表达式~{…}用来标记一个片段模板，并根据需要移动或传递给其他模板。

  1. 片段引用表达式：~{...}

其中，最常见的用法是使用th:insert或th:replace属性插入片段，示例代码如下：

  1. <divth:insert="~{thymeleafDemo::title}"></div>

上述代码中，使用th:insert属性将title片段模板引用到该标签中。

Thymeleaf常用内置功能

  • ctx ：上下文对象；
  • vars ：上下文变量；
  • locale：上下文的语言环境；
  • request：（仅在web上下文）的 HttpServletRequest 对象；
  • response：（仅在web上下文）的 HttpServletResponse 对象；
  • session：（仅在web上下文）的 HttpSession 对象；
  • servletContext：（仅在web上下文）的 ServletContext 对象；

这里以常用的Session举例，如下所示：

  1. // java 代码将用户名放在session中
  2. session.setAttribute("userinfo",username);
  3. // Thymeleaf通过内置对象直接获取
  4. th:text="${session.userinfo}"

Thymeleaf常用内置方法

  • strings：字符串格式化方法，常用的Java方法它都有，比如：equals，equalsIgnoreCase，length，trim，indexOf，substring，replace，contains等;
  • numbers：数值格式化方法，常用的方法有：formatDecimal等;
  • bools：布尔方法，常用的方法有：isTrue，isFalse等;
  • arrays：数组方法，常用的方法有：length，isEmpty，contains等;
  • lists，sets：集合方法，常用的方法有：toList，size，isEmpty等;
  • maps：对象方法，常用的方法有：size，isEmpty，containsKey等;
  • dates：日期方法，常用的方法有：format，year，month，hour等;

示例：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8. </head>
  9. <body>
  10. <h2>Thymeleaf 内置方法</h2>
  11. <h3>#strings</h3>
  12.  
  13. <div th:if="${not #strings.isEmpty(itdragonStr)}">
  14.     <p>Old Str : <span th:text="${itdragonStr}"></span></p>
  15.     <p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"></span></p>
  16.     <p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"></span></p>
  17.     <p>equals : <span th:text="${#strings.equals(itdragonStr,'itdragonblog')}"></span></p>
  18.     <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,'itdragonblog')}"></span></p>
  19.     <p>indexOf ： <span th:text="${#strings.indexOf(itdragonStr,'r')}"></span></p>
  20.     <p>substring : <span th:text="${#strings.substring(itdragonStr,2,8)}"></span></p>
  21.     <p>replace : <span th:text="${#strings.replace(itdragonStr,'it','IT')}"></span></p>
  22.     <p>startsWith : <span th:text="${#strings.startsWith(itdragonStr,'it')}"></span></p>
  23.     <p>contains : <span th:text="${#strings.contains(itdragonStr,'IT')}"></span></p>
  24.  
  25. </div>
  26.  
  27. <h3>#numbers</h3>
  28. <div>
  29.     <p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,0,2)}"></span></p>
  30.     <p>formatDecimal 整数部分保留五位数，小数点保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,4,2)}"></span></p>
  31. </div>
  32.  
  33. <h3>#bools </h3>
  34. <div th:if="${#bools.isTrue(itdragonBool)}">
  35.     <p th:text="${itdragonBool}"></p>
  36. </div>
  37.  
  38. <h2>#arrays </h2>
  39. <div th:if="${not #arrays.isEmpty(itdragonArray)}">
  40.     <p>length : <span th:text="${#arrays.length(itdragonArray)}"></span></p>
  41.     <p>contains : <span th:text="${#arrays.contains(itdragonArray,5)}"></span></p>
  42.     <p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,itdragonArray)}"></span></p>
  43. </div>
  44.  
  45. <h3>#lists </h3>
  46. <div th:if="${not #lists.isEmpty(itdragonList)}">
  47.     <p>size : <span th:text="${#lists.size(itdragonList)}"></span></p>
  48.     <p>contains : <span th:text="${#lists.contains(itdragonList,0)}"></span></p>
  49.     <p>sort : <span th:text="${#lists.sort(itdragonList)}"></span></p>
  50. </div>
  51.  
  52. <h3>#maps </h3>
  53. <div th:if="${not #maps.isEmpty(itdragonMap)}">
  54.     <p>size : <span th:text="${#maps.size(itdragonMap)}"></span></p>
  55.     <p>containKey : <span th:text="${#maps.containsKey(itdragonMap,'thName')}"></span></p>
  56.     <p>containValue : <span th:text="${#maps.containsValue(itdragonMap,'#maps')}"></span></p>
  57.     <p><span th:text="${itdragonMap.thName}"></span></p>
  58. </div>
  59.  
  60. <h3>#dates </h3>
  61. <div>
  62.     <p>format : <span th:text="${#dates.format(itdragonDate)}"></span></p>
  63.     <p>custom format : <span th:text="${#dates.format(itdragonDate,'yyyy-MM-dd HH:mm:ss')}"></span></p>
  64.     <p>day : <span th:text="${#dates.day(itdragonDate)}"></span></p>
  65.     <p>month : <span th:text="${#dates.month(itdragonDate)}"></span></p>
  66.     <p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"></span></p>
  67.     <p>year : <span th:text="${#dates.year(itdragonDate)}"></span></p>
  68.     <p>dayOfWeek : <span th:text="${#dates.dayOfWeek(itdragonDate)}"></span></p>
  69.     <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"></span></p>
  70.     <p>hour : <span th:text="${#dates.hour(itdragonDate)}"></span></p>
  71.     <p>minute : <span th:text="${#dates.minute(itdragonDate)}"></span></p>
  72.     <p>second : <span th:text="${#dates.second(itdragonDate)}"></span></p>
  73.     <p>createNow : <span th:text="${#dates.createNow()}"></span></p>
  74.  
  75. </div>
  76. </body>
  77. </html>

 

Thymeleaf常用 th 属性

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个:

Thymeleaf语法详解(8大语法使用示例)-mikechen

示例：

  1. <!DOCTYPE html>
  2.     <html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
  3.     <meta charset="UTF-8">
  4.     <title>Thymeleaf 语法</title></head><body>
  5.     <h2>mikechen的互联网架构 Thymeleaf 语法</h2>
  6.  
  7.     <!--th:text 设置当前元素的文本内容，常用，优先级不高-->
  8.     <p th:text="${thText}" />
  9.     <p th:utext="${thUText}" />
  10.  
  11.     <!--th:value 设置当前元素的value值，常用，优先级仅比th:text高-->
  12.     <input type="text" th:value="${thValue}" />
  13.  
  14.     <!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
  15.     <!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
  16.     <div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->
  17.         <p th:text="${message}" />
  18.     </div>
  19.     <div> <!--只遍历p，推荐使用-->
  20.         <p th:text="${message}" th:each="message : ${thEach}" />
  21.     </div>
  22.  
  23.     <!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
  24.     <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
  25.  
  26.     <!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 -->
  27.     <div th:insert="~{grammar/common::thCommon}"></div>
  28.  
  29.     <!--th:object 声明变量，和*{} 一起使用-->
  30.     <div th:object="${thObject}">
  31.         <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
  32.         <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
  33.         <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
  34.     </div></body></html>

 

相关推荐

Java进阶架构师系列专题

阿里Java架构面试系列专题

2025最全大厂Java面试解析

手把手带大型项目实战落地

评论交流
    说说你的看法
欢迎您，新朋友，感谢参与互动！
确定

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定

打开微信扫一扫

微信长按二维码

关注「mikechen公众号」安全快捷登录

×

下载海报：

点击下载
返回顶部