國產遊戲《聽風者也》今年夏季發售 明朝抗倭故事
阿新 • • 發佈：2021-07-05
Thymeleaf是新一代的java模板引擎，類似於FreeMarker。官網：https://www.thymeleaf.org。
1.Thymeleaf入門案例
1）匯入依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2）編寫頁面
在resources/templates目錄下新建index.html，內容如下
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf模板</title>
</head>
<body>
<div th:text="${hello}"></div>
</body>
</html>3）配置thymeleaf
在application.properties中新增如下配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#為便於測試,在開發時需要關閉快取
spring.thymeleaf.cache=false
4）新增檢視解析器
新建IndexController，內容如下
package com.zys.springboottestexample.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@RequestMapping
@Controller
public class IndexController {
@GetMapping("/index")
public String index(Model model) {
model.addAttribute("hello", "你好");
return "index";
}
}
5）啟動專案，訪問localhost:8080/index即可訪問到模板頁面。
2.基礎語法
2.2.1名稱空間
要使用 Thymeleaf ，則要先要加入依賴，然後在模板檔案中引用名稱空間，引入後才會進行模板標籤的渲染。<html lang="en" xmlns:th="http://www.thymeleaf.org">
2.2.2常用標籤
（1）th:text
用於顯示控制器傳入的指定屬性的值，如果值不存在，也可以指定預設值。下面的程式碼就是顯示傳入的name的值
<p th:text="${name}"></p>
指定預設值，會在name為null時顯示
<p th:text="${name1}?:'張三'"></p>
當然也可以進行字串的拼接
<p th:text="'歡迎登陸，'+${name}+'!'"></p>
（2）th:object
用於顯示後臺傳入的物件
<p th:text="${user}"></p>
<p th:text="${user.age}"></p>
（3）th:action
指定表單的提交地址，必須使用@{}格式，在裡面指定登入的請求地址
<form th:action="@{/api/login}" method="post">
<input type="text" name="username"/>
<input type="password" name="password"/>
<button type="submit">提交</button>
</form>
（4）th:value
給文字框設定預設值
<input type="text" name="sex" th:value="${sex}">
對於textarea，設定預設值時，不能使用th:value，需要使用th:tex。th:value不能回顯，不清楚原因！
<textarea name="remark" th:text="${remark}">
2.2.3 URL寫法
Thymeleaf 是通過語法＠｛…｝來處理 URL 的，如src、href、action<form th:action="@{/api/login}" method="post">...</form>
<a th:href="@{http://www.baidu.com}">點我去百度</a>
<img th:src="@{img.png}"/>
2.2.4條件求值
Thymeleaf 通過“th:if”和“th:unless ”屬性進行條件判斷。“th:if”在條件成立時顯示，“th:unless”在條件不成立時顯示。<div th:if="${num>10}">值大於10</div>
<div th:unless="${num>10}">值不大於10</div>
2.2.5switch-case分支
th:switch、th:case條件分支，類似於java的switch-case。
<div th:switch="${role}">
<p th:case="1">系統管理員</p>
<p th:case="2">企業管理員</p>
<p th:case="3">業務員</p>
<p th:case="4">普通使用者</p>
</div>
2.2.6運算子
1）算數運算子
算數運算子包含基本的運算子，+，-，*，/，%等，一般使用th:text進行展示
<p th:text="3+4"></p> <p th:text="11%3"></p>
2）比較運算子
| 運算子 | 說明 | 運算子 | 說明 |
| eq | 等於 | ne | 不等於 |
| gt | 大於 | ge | 大於或等於 |
| lt | 小於 | le | 小於或等於 |
一般結合th:if使用。
<p th:if="${role1 eq 'admin'}">admin</p>
<p th:if="${role1 eq 'vip'}">vip</p>
3）是否為空
一般結合th:if使用。
<p th:if="${name}!=null">不為空</p>
<p th:if="${name}==null">為空</p>
2.2.7公用物件
Thymeleaf 提供了一系列公用（ utility ）物件，可以通過“＃”直接使用。 1）格式化時間<p th:text="${#dates.format(nowDate,'yyyy-MM-dd HH:mm:ss')}"></p>
nowDate是後臺傳遞的Date型別的時間，通過new Date()獲得
2）判斷字串是否為空
如果為空，則結果是true，否則結果是true。一般結合th:text使用
<p th:text="${#strings.isEmpty(name)}"></p>
3）判斷字串是否包含
如果包含，則結果是true，否則結果是false，會區分大小寫。一般結合th:text使用
<p th:text="${#strings.contains(name,'hello')}"></p>
3.迴圈遍歷
遍歷使用th:each標籤。通過 th:each="Object: ${Objects}”進行遍歷，遍歷後使用Object展示，Objects是後臺傳遞過來的值。
2.3.1遍歷物件
遍歷物件很簡單，指定物件的屬性即可。<div th:each="entity:${user}">
<span th:text="${entity.name}"></span>
<span th:text="${entity.age}"></span>
</div>
2.3.2遍歷列表list
遍歷list以物件方式說明，若儲存的是單個值的元素，可參考陣列的遍歷。
<div th:each="item:${userList}">
<span th:text="${item.name}"></span>
<span th:text="${item.age}"></span>
</div>
2.3.3遍歷陣列
<div th:each="item:${arr}">
<p th:text="${item}"></p>
</div>
2.3.4遍歷map
遍歷map時，使用key獲取鍵值，使用value獲取對應的值。
<div th:each="item:${map}">
<p><span th:text="${item.key}"/>:<span th:text="${item.value}"/></p>
</div>
4.處理公共程式碼塊
一個網頁的結構基本可以分為上（ header）、中（ body ）、下（ footer） 個部分 般情況下， header和 footer的資訊在各個頁面都會重複顯示，如果每個頁面都複製一份程式碼則太麻煩了。使用"th:fragment"標記或宣告是重複的程式碼塊，用"th:include"或"th:replace "標籤根據fragment 值來呼叫。1）標記重複程式碼塊
在templates下新建header.html，程式碼如下<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>header</title>
</head>
<body>
<div th:fragment="header" class="header">
我是header資訊
</div>
</body>
</html>
2）呼叫
在templates下新建index2.html，程式碼如下<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index2</title>
</head>
<body>
<div th:replace="header"></div>
<div>我是內容</div>
</body>
</html>
上述程式碼是通過replace進行呼叫的，也可以使用include進行呼叫
<div th:include="header"></div>
這兩種方式都可以，但是它們是有區別的。