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

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

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

Thymeleaf变量表达式

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

示例：

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

Thymeleaf选择变量表达式

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

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

示例：

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

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

Thymeleaf链接表达式

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

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

示例：

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

Thymeleaf国际化表达式

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

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

th:text="#{msg}"

Thymeleaf片段引用表达式

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

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

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

<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举例，如下所示：

// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
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等;

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Thymeleaf 内置方法</h2>
<h3>#strings</h3>

<div th:if="${not #strings.isEmpty(itdragonStr)}">
    <p>Old Str : <span th:text="${itdragonStr}"></span></p>
    <p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"></span></p>
    <p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"></span></p>
    <p>equals : <span th:text="${#strings.equals(itdragonStr,'itdragonblog')}"></span></p>
    <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,'itdragonblog')}"></span></p>
    <p>indexOf ： <span th:text="${#strings.indexOf(itdragonStr,'r')}"></span></p>
    <p>substring : <span th:text="${#strings.substring(itdragonStr,2,8)}"></span></p>
    <p>replace : <span th:text="${#strings.replace(itdragonStr,'it','IT')}"></span></p>
    <p>startsWith : <span th:text="${#strings.startsWith(itdragonStr,'it')}"></span></p>
    <p>contains : <span th:text="${#strings.contains(itdragonStr,'IT')}"></span></p>

</div>

<h3>#numbers</h3>
<div>
    <p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,0,2)}"></span></p>
    <p>formatDecimal 整数部分保留五位数，小数点保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,4,2)}"></span></p>
</div>

<h3>#bools </h3>
<div th:if="${#bools.isTrue(itdragonBool)}">
    <p th:text="${itdragonBool}"></p>
</div>

<h2>#arrays </h2>
<div th:if="${not #arrays.isEmpty(itdragonArray)}">
    <p>length : <span th:text="${#arrays.length(itdragonArray)}"></span></p>
    <p>contains : <span th:text="${#arrays.contains(itdragonArray,5)}"></span></p>
    <p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,itdragonArray)}"></span></p>
</div>

<h3>#lists </h3>
<div th:if="${not #lists.isEmpty(itdragonList)}">
    <p>size : <span th:text="${#lists.size(itdragonList)}"></span></p>
    <p>contains : <span th:text="${#lists.contains(itdragonList,0)}"></span></p>
    <p>sort : <span th:text="${#lists.sort(itdragonList)}"></span></p>
</div>

<h3>#maps </h3>
<div th:if="${not #maps.isEmpty(itdragonMap)}">
    <p>size : <span th:text="${#maps.size(itdragonMap)}"></span></p>
    <p>containKey : <span th:text="${#maps.containsKey(itdragonMap,'thName')}"></span></p>
    <p>containValue : <span th:text="${#maps.containsValue(itdragonMap,'#maps')}"></span></p>
    <p><span th:text="${itdragonMap.thName}"></span></p>
</div>

<h3>#dates </h3>
<div>
    <p>format : <span th:text="${#dates.format(itdragonDate)}"></span></p>
    <p>custom format : <span th:text="${#dates.format(itdragonDate,'yyyy-MM-dd HH:mm:ss')}"></span></p>
    <p>day : <span th:text="${#dates.day(itdragonDate)}"></span></p>
    <p>month : <span th:text="${#dates.month(itdragonDate)}"></span></p>
    <p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"></span></p>
    <p>year : <span th:text="${#dates.year(itdragonDate)}"></span></p>
    <p>dayOfWeek : <span th:text="${#dates.dayOfWeek(itdragonDate)}"></span></p>
    <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"></span></p>
    <p>hour : <span th:text="${#dates.hour(itdragonDate)}"></span></p>
    <p>minute : <span th:text="${#dates.minute(itdragonDate)}"></span></p>
    <p>second : <span th:text="${#dates.second(itdragonDate)}"></span></p>
    <p>createNow : <span th:text="${#dates.createNow()}"></span></p>

</div>
</body>
</html>

 

Thymeleaf常用 th 属性

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

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

示例：

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
    <meta charset="UTF-8">
    <title>Thymeleaf 语法</title></head><body>
    <h2>mikechen的互联网架构 Thymeleaf 语法</h2>

    <!--th:text 设置当前元素的文本内容，常用，优先级不高-->
    <p th:text="${thText}" />
    <p th:utext="${thUText}" />
 
    <!--th:value 设置当前元素的value值，常用，优先级仅比th:text高-->
    <input type="text" th:value="${thValue}" />
 
    <!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
    <!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
    <div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->
        <p th:text="${message}" />
    </div>
    <div> <!--只遍历p，推荐使用-->
        <p th:text="${message}" th:each="message : ${thEach}" />
    </div>
 
    <!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
    <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
 
    <!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 -->
    <div th:insert="~{grammar/common::thCommon}"></div>
 
    <!--th:object 声明变量，和*{} 一起使用-->
    <div th:object="${thObject}">
        <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
        <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
        <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
    </div></body></html>

 

陈睿mikechen

10年+大厂架构经验，资深技术专家，就职于阿里巴巴、淘宝、百度等一线互联网大厂。

关注「mikechen」公众号，获取更多技术干货！

后台回复【面试】即可获取《史上最全阿里Java面试题总结》，后台回复【架构】，即可获取《阿里架构师进阶专题全部合集》

相关推荐

Java架构师最新学习路线图

阿里P8架构师面试系列专题

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

Java进阶架构师18大技能专题

相关面试

2024最新大厂Spring考题解析

2024最新大厂Java面试题解析

2024大厂MySQL面试题解析

2024大厂Redis面试考题解析

评论交流
    说说你的看法
❯
返回顶部