概述（轉）
-
Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較與其他的模板引擎，它有如下三個極吸引人的特點
-
Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型，然后在 html 標簽里增加額外
的屬性來達到模板 + 數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。 -
Thymeleaf 開箱即用的特性。它提供標准和 Spring 標准兩種方言，可以直接套用模板實現 JSTL、 OGNL 表達式效果，避免每天套模板、改 JSTL、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。
-
Thymeleaf 提供 Spring 標准方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。
為什么要使用thymeleaf ？（轉）
如果希望以 Jar 形式發布模塊則盡量不要使用 JSP 相關知識，這是因為 JSP 在內嵌的 Servlet 容器上運行有一些問題 (內嵌 Tomcat、 Jetty 不支持 Jar 形式運行 JSP，Undertow 不支持 JSP)。
Spring Boot 中推薦使用 Thymeleaf 作為模板引擎，因為 Thymeleaf 提供了完美的 Spring MVC 支持
Spring Boot 提供了大量模板引擎，包括：
- FreeMarker
- Groovy
- Mustache
- Thymeleaf
- Velocity
- Beetl
SpringBoot整合Thymeleaf
一、使用SpringBoot Initializer創建SpringBoot的web項目
二、引入thymeleaf依賴
<!--引入thymeleaf依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
三、創建thymeleaf模板
在templates下新建index.html,內容如下：
<!doctype html>
<!--注意：引入thymeleaf的名稱空間-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p th:text="'hello SpringBoot'">hello thymeleaf</p>
</body>
</html>
四、啟動項目
訪問http://localhost:8080 ,展示效果如下：
五、通過控制器定位thymeleaf模板：
在入口類所在目錄建立controller包，新建控制器，寫法與SpringMVC一致：
package com.hncj.spring.boot.thymeleaf.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("home")
public String index() {
return "index";
}
}
訪問http://localhost:8080/home,也能顯示index.html的內容。
thymeleaf的相關全局配置
SpringBoot支持.properties和.yml兩種格式的全局配置，下面給出thymeleaf的yml格式全局配置：
spring:
thymeleaf:
enabled: true #開啟thymeleaf視圖解析
encoding: utf-8 #編碼
prefix: classpath:/templates/ #前綴
cache: false #是否使用緩存
mode: HTML #嚴格的HTML語法模式
suffix: .html #后綴名
thymeleaf常用標簽的使用
用到的User實體如下：
package com.hncj.spring.boot.thymeleaf.domain;
import java.util.List;
import java.util.Map;
public class User {
String username;
String password;
List<String> hobbies;
Map<String, String> secrets;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public List<String> getHobbies() {
return hobbies;
}
public void setHobbies(List<String> hobbies) {
this.hobbies = hobbies;
}
public Map<String, String> getSecrets() {
return secrets;
}
public void setSecrets(Map<String, String> secrets) {
this.secrets = secrets;
}
}
具體的屬性值為：
package com.hncj.spring.boot.thymeleaf.controller;
import com.hncj.spring.boot.thymeleaf.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
@Controller
public class IndexController {
@GetMapping("home")
public String index(Model model) {
User user = new User();
user.setUsername("jack");
user.setPassword("112233");
user.setHobbies(Arrays.asList(new String[]{"singing", "dancing", "football"}));
Map<String, String> maps = new HashMap<>();
maps.put("1", "o");
maps.put("2", "g");
maps.put("3", "a");
maps.put("4", "j");
user.setSecrets(maps);
model.addAttribute("user", user);
return "index";
}
}
測試界面如下：
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--字符串輸出-->
<p th:text="'hello SpringBoot'">hello thymeleaf</p>
<!--數學運算-->
<p th:text="9 + 10"></p>
<p th:text="10 * 10"></p>
<p th:text="1 - 10"></p>
<p th:text="8 / 3"></p>
<p th:text="3 % 2"></p>
<!--操作域對象-->
<p th:text="${user}"></p>
<p th:text="${user.username}"></p>
<!--遍歷數組-->
<table th:each="item, sta:${user.hobbies}">
<tr>
<td th:text="${item}"></td>
<td th:text="${sta.index}"></td>
<td th:text="${sta.odd}"></td>
<td th:text="${sta.size}"></td>
</tr>
</table>
<!--遍歷map-->
<div th:each="item:${user.secrets}" th:text="${item.key}"></div>
<!--遍歷數組-->
<div th:each="item:${user.hobbies}" th:text="${item}"></div>
<!--設置屬性-->
<input type="text" th:attr="value=${user.username}">
<input type="text" th:attr="value=${user.username}, title=${user.username}">
<!--表單數據綁定-->
<form action="" th:object="${user}">
<input type="text" th:value="*{username}">
<input type="password" th:value="*{password}">
<select>
<option th:each="item:${user.secrets}" th:text="${item.value}" th:selected="'a' eq ${item.value}"></option>
</select>
</form>
<!--解析html文本內容-->
<p th:utext="'<span>html</span>'"></p>
<!--流程控制-->
<p th:if="${user.username} != ${user.password}">yes</p>
<div th:switch="${user.username}">
<p th:case="rose">name is rose</p>
<p th:case="jack">name is jack</p>
</div>
<!--外部引入-->
<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/index.js}"></script>
<a th:href="@{/home}">home</a>
</body>
</html>