Day20 - Thymeleaf

15th鐵人賽

James

2023-10-06 00:37:17

422 瀏覽

分享至

Day20 - Thymeleaf

前言

昨日我們講了Template Engine也說明了Spring Boot對於JSP的限制，今日我們來詳細說Template Engine中的Thymeleaf

專案建立

create module

Thymeleaf plugin

這個套件可以幫你對html檔案加入Thymeleaf schema

對html檔案右鍵，選取JBLHtmlToThymeleaf

Thmeleaf

basic

th:xxx：動態渲染指定的 html 標簽屬性值、或者th指令(遍歷、判斷等)
- th:text：標簽體內文本值渲染
- th:utext：不會轉譯，顯示為html原本的樣子
表達式：用來動態取值
- ${}：变量取值；使用model共享给页面的值都直接用${}
- @{}：url路径；
- #{}：国际化消息
- ~{}：片段引用
- *{}：变量选择：需要配合th:object绑定对象
系統工具&內置對象：
- param：请求参数对象
- session：session对象
- application：application对象
- #execInfo：模板执行信息
- #messages：国际化消息
- #uris：uri/url工具
- #conversions：类型转换工具
- #dates：日期工具，是java.util.Date对象的工具类
- #calendars：类似#dates，只不过是java.util.Calendar对象的工具类
- #temporals： JDK8+ java.time API 工具类
- #numbers：数字操作工具
- #strings：字符串操作
- #objects：对象操作
- #bools：bool操作
- #arrays：array工具
- #lists：list工具
- #sets：set工具
- #maps：map工具
- #aggregates：集合聚合工具（sum、avg）
- #ids：id生成工具

Syntax

表達式
- 變量取值：${...}
- url 取值：@{...}
- 國際化消息：#{...}
- 變量選擇：*{...}
- 片段引用: ~{...}
字串操作
- 拼串： +
- 文本替換：| The name is ${name} |
比較運算
- 比較：>，<，<=，>=（gt，lt，ge,le）
- 等值：==,!=（eq，ne）
條件運算
- if-then： (if)?(then)
- if-then-else: (if)?(then):(else)
- default: (value)?:(defaultValue)

屬性設定

th:href="@{/product/list}"
th:attr="class=${active}"
th:attr="src=@{/images/gtvglogo.png},title=${logo},alt=#{logo}"
th:checked="${user.active}"

遍歷

th:each="元素名稱,疊代狀態"

<tr th:each="emp : ${emps}">
  <td th:text="${emp.empName}">kathy</td>
  <td th:text="${emp.empId}">123456</td>
  <td th:text="${emp.isDirector}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="emp,iterStat : ${emps}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${emp.name}">kathy</td>
  <td th:text="${emp.price}">123456</td>
  <td th:text="${emp.isDirector}? #{true} : #{false}">yes</td>
</tr>

iterStat 有以下属性：

index：当前遍历元素的索引，从0开始
count：当前遍历元素的索引，从1开始
size：需要遍历元素的总数量
current：当前正在遍历的元素对象
even/odd：是否偶数/奇数行
first：是否第一个元素
last：是否最后一个元素

判斷

th:if / th:unless

<td>
    <span th:if="${teacher.gender == 'F'}">Female</span>
    <span th:unless="${teacher.gender == 'F'}">Male</span>
</td>

th:switch

<div class="row">
    <h1>Thymeleaf swith case demo</h1>
    <h4 th:utext="${user.userName}"></h4>
    <div th:switch="${user.role}">
        <p th:case="'ADMIN'">User is an administrator</p>
        <p th:case="'MANAGER'">User is a manager</p>
        <p th:case="'GUEST'">User is a guest</p>
        <!-- * for default case -->
        <p th:case="*">User is some other thing</p>
    </div>
</div>