Thymeleaf基本語法
1. 往期
Thymeleaf模板入門（一）
Thymeleaf模板入門（二）
2. 案例
物體類User
package top.infinxkj.thymeleaf.pojo;
public class User {
public String name;
public int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
控制器
@Controller
public class DemoController {
@GetMapping("my")
public String myIndex(Model model){
User user = new User();
user.setName("張 三");
user.setAge(28);
model.addAttribute("user",user);
return "index";
}
}
動靜結合
Thymeleaf中所有的運算式都需要寫在指令中，指令時HTML5的自定義屬性，在靜態環境下，Thymeleaf運算式的內容會被瀏覽器自動忽略，
${user.name} 可以寫作${user['name']}
3. 自定義變數
在資料量較多時，頻繁使用物件.屬性名會比較繁瑣，我們可以自定義變數，
<div th:object="${user}">
<p>name: <span th:text="*{name}">大古</span></p>
<p>age: <span th:text="*{age}">28</span></p>
</div>
- 用
th:object="${user}"獲取user的值 - 在內部的任意元素上，可以通過
*{屬性名}，來獲取user中的屬性
4. 方法
ognl運算式本身支持方法呼叫
<div th:object="${user}">
<p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
<p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</div>
Thymeleaf提供了很多內置物件和物件內的方法，詳情見：Thymeleaf模板入門二
舉例：
controller添加
model.addAttribute("today",new Date());
HTML頁面：
<p>
今天是：<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2021-04-03</span>
</p>
5. 字面值
有時，我們需要在指令中填寫基本型別如（字串、數值、布爾等），不希望被Thymeleaf決議為變數，這個時候稱字面值，
字串字面值
用對單引號包括
<p>
字串字面值:<span th:text="'name'">字面值</span>
</p>
數字字面值
不許任何符號，直接書寫，甚至可以進行算術運算
<p>
數字字面值:小明身高： <span th:text="185">190</span>.
</p>
布爾字面值
布爾型別的字面值是true或false
<p>
布爾型字面值<div th:if="true">true</div>
</p>
6. 拼接
普通字串與運算式拼接：
<span th:text="'歡迎您:' + ${user.name} + '!'"></span>
字串字面值需要用''，Thymeleaf使用一對|即可：
<span th:text="|歡迎您:${user.name}|"></span>
7. 運算
${}內部是通過OGNL運算式引擎決議的，外部的是通過Thymeleaf的引擎決議，運算子盡量放在${}外進行，
算術運算
支持的算術運算子：+ - * / %
<span th:text="${user.age}"></span>
<span th:text="${user.age}%2 == 0"></span>
比較運算
支持：>, <, >= and <= ，但是>, <不能直接使用，xml會決議為標簽，要使用別名，
注意 == and !=不僅可以比較數值，類似于equals的功能，
可以使用的別名：gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).
條件運算
- 三元運算
<span th:text="${user.age}>=18 ? '成年':'未成年'"></span>
三元運算子的三個部分：conditon ? then : else
? condition：條件，then：條件成立的結果，else：不成立的結果
其中的每部分都可是Thymeleaf中的任意運算式，
-
默認值
有的時候，我們取一個值可能為空，這個時候需要做非空判斷，可以使用
運算式 ?: 默認值簡寫：
<span th:text="${user.name} ?: '李華'"></span>
運算式值為null時，使用默認值，注意：?:之間沒有空格，
8. 回圈
回圈是頻繁使用的，使用th:each指令來完成：
有用戶的集合：users在Context中，
<tr th:each="user : ${users}">
<td th:text="${user.name}">姓名</td>
<td th:text="${user.age}">年齡</td>
</tr>
${users} 是要遍歷的集合，可以是以下型別：
- Iterable，實作了Iterable介面的類
- Interator，迭代器
- Map，遍歷得到的是Map.Entry
- Array，陣列及其它一切符合陣列結果的物件
- Enumeration，列舉
在迭代的同時，也可以獲取迭代的狀態物件：
<tr th:each="user,stat : ${users}">
<td th:text="${stat.index}">序號</td>
<td th:text="${user.name}">姓名</td>
<td th:text="${user.age}">年齡</td>
</tr>
stat物件包含以下屬性：
- index，從0開始的角標
- count，元素的個數，從1開始
- size，總元素個數
- current，當前遍歷到的元素
- even/odd，回傳是否為奇偶，boolean值
- first/last，回傳是否為第一或最后，boolean值
9. 邏輯判斷
Thymeleaf中使用th:if 或者 th:unless ，兩者的意思相反，
<p>
<span th:if="${user.age} < 30">年輕人</span>
</p>
如果運算式的值為true，則標簽會渲染到頁面，否則不進行渲染，
以下情況被認定為true：
- 運算式值為true、為非0數值、為非0字符、為字串，但不是
"false","no","off"、不是布爾、字串、數字、字符中的任何一種
其它情況包括null都被認定為false
10.分值控制switch
這里要使用兩個指令：th:switch 和 th:case
<div th:switch="${user.name}">
<p th:case="張 三">管理員</p>
<p th:case="李四">經理</p>
<p th:case="*">員工</p>
</div>
有一個th:case成立，其它的則不再判斷，與java中的switch是一樣的，th:case="*"表示默認，放最后，
11. JS模板
模板引擎不僅可以渲染html，也可對JS進行預處理，為了在純靜態環境下運行，Thymeleaf代碼可以被注釋起來：
-
在script標簽中通過
th:inline="javascript"宣告這是要特殊處理的js腳本 -
語法結構：
const user = /*[[Thymeleaf運算式]]*/ "靜態環境下的默認值";運算式后面跟著的是默認值，
原始碼：
HTML：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>讓大古編程</title>
</head>
<body>
<h3>變數</h3>
<span th:text="${user.name}">請登錄</span>
<h3>自定義變數</h3>
<p>name: <span th:text="${user.name}">大骨</span></p>
<p>age: <span th:text="${user.age}">18</span></p>
<p>或者</p>
<div th:object="${user}">
<p>name: <span th:text="*{name}">大古</span></p>
<p>age: <span th:text="*{age}">28</span></p>
<p>age: <span th:text="${#object.age}">28</span></p>
</div>
<h3>方法</h3>
<div th:object="${user}">
<p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
<p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</div>
<p>
今天是：<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2021-04-03</span>
</p>
</body>
<h3>字面值</h3>
<p>
字串字面值:<span th:text="'name'">字面值</span>
</p>
<p>
數字字面值:小明身高： <span th:text="185">190</span>.
</p>
<p>
布爾型字面值<span th:if="true">true</span>
</p>
<h3>拼接</h3>
<span th:text="'歡迎您:' + ${user.name} + '!'"></span></br>
<span th:text="|歡迎您:${user.name}|"></span>
<h3>運算</h3>
<p>
<span th:text="${user.age}"></span>
<span th:text="${user.age}%2 == 0"></span>
<span th:text="${user.age}>=18 ? '成年':'未成年'"></span>
<span th:text="${user.name} ?: '李華'"></span>
</p>
<h3>回圈</h3>
<tr th:each="user : ${users}">
<td th:text="${user.name}">姓名</td>
<td th:text="${user.age}">年齡</td>
</tr>
</br>
<tr th:each="user,stat : ${users}">
<td th:text="${stat.index}">序號</td>
<td th:text="${user.name}">姓名</td>
<td th:text="${user.age}">年齡</td>
</tr>
<h3>邏輯判斷</h3>
<p>
<span th:if="${user.age} < 30">年輕人</span>
</p>
<h3>分支控制</h3>
<div th:switch="${user.name}">
<p th:case="'張 三'">管理員</p>
<p th:case="'李四'">經理</p>
<p th:case="*">員工</p>
</div>
<h3>JS模板</h3>
<script th:inline="javascript">
const user = /*[[${user}]]*/ {};
const age = /*[[${user.age}]]*/ 20;
console.log(user);
console.log(age)
</script>
</html>
Controller
package top.infinxkj.thymeleaf.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import top.infinxkj.thymeleaf.pojo.User;
import java.util.*;
@Controller
public class DemoController {
@GetMapping("my")
public String myIndex(Model model){
User user = new User();
User user2 = new User();
user.setName("張 三");
user.setAge(28);
user2.setName("李四");
user2.setAge(20);
ArrayList<User> users=new ArrayList<User>();
users.add(user);
users.add(user2);
model.addAttribute("user",user);
model.addAttribute("users",users);
model.addAttribute("today",new Date());
return "index";
}
}
User物體類
package top.infinxkj.thymeleaf.pojo;
public class User {
public String name;
public int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272510.html
標籤：其他