一、thymeleaf 簡介
thymeleaf 是一種現代化服務端的模闆引擎，能處理 HTML，XML，JavaScript，CSS 甚至純文字資料。
常見的模闆引擎：thymeleaf、freemarker 和 JSP，Spring Boot 中預設是不支援 JSP。
官網文檔：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
二、thymeleaf 基本使用
1、建立 Spring Boot 工程，選中 web 子產品
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2、引入 thymeleaf 所依賴的 starter
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3、編寫 Controller，在方法中存放資料，然後傳回視圖頁面
@Controller
public class HelloController {
@GetMapping("/data")
public String data(Model model){
model.addAttribute("user", "<h1>zhangsan</h1>");
model.addAttribute("users", Arrays.asList("zs","lisi"));
return "data";
}
}
4、在 resources 目錄下建立 templates 檔案夾，然後建立 data.html 檔案
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${user}">user</p>
<div th:each="u:${users}" th:text="${u}"></div>
</body>
</html>
5、啟動應用程式，通路：http://localhost:8080/data ，結果如圖
三、thymeleaf 擷取值
-
${x}
x
-
${param.x}
x
-
${session.x}
x
-
${application.x}
x
例子：
1、Controller 層代碼
@GetMapping("/test1")
public String test1(Model model, HttpServletRequest request){
HttpSession session = request.getSession();
ServletContext application = session.getServletContext();
model.addAttribute("name", "張三");
session.setAttribute("name", "王五");
application.setAttribute("name", "趙六");
return "test1";
}
2、在 resources / templates 目錄下，建立 test1.html 檔案，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf 從上下文中擷取資料</title>
<script>
var name = '[[${name}]]';
console.info('從thymeleaf 上下文中擷取: ' + name);
var sessionName = '[[${session.name}]]';
console.info('從 session 作用域中擷取: ' + sessionName);
var applicationName = '[[${application.name}]]';
console.info('從 application 作用域中擷取: ' + applicationName);
</script>
</head>
<body>
從thymeleaf 上下文中擷取name: <span th:text="${name}"></span> <br>
從 請求參數中擷取 name: <span th:text="${param.name}"></span> age: <span th:text="${param.age}"></span><br>
從 session 作用域中擷取 name: <span th:text="${session.name}"></span> <br>
從 application 作用域中擷取 name: <span th:text="${application.name}"></span> <br>
</body>
</html>
3、運作結果
四、text 與 utext的差別 ，以及行内寫法
1、Controller 層代碼
@GetMapping("/test2")
public String test2(Model model){
model.addAttribute("hello","<h1>hello SpringBoot!!</h1>");
return "test2";
}
2、在 resources / templates 目錄下，建立 test2.html 檔案，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>text 與 utext的差別 ，以及行内寫法</title>
</head>
<body>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr>
<div>[[${hello}]]</div>
<div>[(${hello})]</div>
</body>
</html>
3、運作結果
五、表達式基本對象
-
#ctx
-
#vars:
-
#locale
-
#request
HttpServletRequest
-
#response
HttpServletResponse
-
#session
HttpSession
-
#servletContext
ServletContext
例子：擷取 語言資訊
1、Controller 層代碼
@GetMapping("/test3")
public String test3(Model model){
return "test3";
}
2、在 resources / templates 目錄下，建立 test3.html 檔案，内容如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>擷取 浏覽器語言</title>
</head>
<body>
Established locale country: <span th:text="${#locale.country}">US</span>
</body>
</html>
3、運作結果
六、日期格式化
1、Controller 層代碼
@GetMapping("/test4")
public String test4(Model model){
model.addAttribute("today", new Date());
return "test4";
}
2、在 resources / templates 目錄下，建立 test4.html 檔案，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf 日期格式化</title>
</head>
<body>
today is <span th:text="${#dates.format(today, 'yyyy-MM-dd HH:mm:ss')}"></span>
</body>
</html>
3、運作結果
七、*{} 表達式
1、建立pojo類，名為 User
/**
省略get/set 方法
*/
public class User {
private int id;
private String name;
private Date birthDate;
}
2、Controller 層代碼
@GetMapping("/test5")
public String test5(Model model){
User user = new User();
user.setId(1);
user.setName("張無忌");
user.setBirthDate(new Date());
model.addAttribute("user", user);
return "test5";
}
3、在 resources / templates 目錄下，建立 test5.html 檔案，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>*{...}表達式</title>
</head>
<body>
<div th:object="${user}">
<h1 th:text="*{id}"></h1>
<h1 th:text="*{name}"></h1>
<h1 th:text="*{#dates.format(birthDate, 'yyyy-MM-dd')}"></h1>
</div>
<hr>
<div>
<h1 th:text="${user.id}"></h1>
<h1 th:text="${user.name}"></h1>
<h1 th:text="${#dates.format(user.birthDate, 'yyyy-MM-dd')}"></h1>
</div>
</body>
</html>
4、運作結果