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. 有参:@{/xxx(k1=v1,k2=v2)} 对应url结构:xxx?k1=v1&k2=v2
  3. 引入本地资源:@{/项目本地的资源路径}
  4. 引入外部资源:@{/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. <!--th:value 设置当前元素的value值,常用,优先级仅比th:text高-->
  11. <input type="text" th:value="${thValue}" />
  12. <!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入-->
  13. <!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上-->
  14. <div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐-->
  15. <p th:text="${message}" />
  16. </div>
  17. <div> <!--只遍历p,推荐使用-->
  18. <p th:text="${message}" th:each="message : ${thEach}" />
  19. </div>
  20. <!--th:if 条件判断,类似的有th:switch,th:case,优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
  21. <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
  22. <!--th:insert 把代码块插入当前div中,优先级最高,类似的有th:replace,th:include,~{} :代码块表达式 -->
  23. <div th:insert="~{grammar/common::thCommon}"></div>
  24. <!--th:object 声明变量,和*{} 一起使用-->
  25. <div th:object="${thObject}">
  26. <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
  27. <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
  28. <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
  29. </div></body></html>

 

评论交流
    说说你的看法
欢迎您,新朋友,感谢参与互动!