版權聲明：本文爲小異常原創文章，非商用自由轉載-保持署名-註明出處，謝謝！
本文網址：https://blog.csdn.net/sun8112133/article/details/106961006

我在之前發佈的《Spring Boot 入門學習筆記》中寫過關於 Thymeleaf 模板引擎的博客，在那篇博客中我簡單介紹了 Thymeleaf 模板引擎 的使用以及個別標籤。

在本篇博客中會主要介紹使用 Spring Boot 來整合 Thymeleaf 模板引擎，還有 Thymeleaf 模板引擎 常用標籤，在下一篇博客中我會講到 Thymeleaf 訪問 Servlet Web 對象以及各種內置對象的使用。

一、引入 Thymeleaf

在之前的博客中，我已經簡單介紹過這個模板引擎，在此只作簡單敘述。

在過去開發 Web 項目時，我們會使用 JSP 作爲動態資源來開發 Web 項目。但 Spring Boot 默認是不支持 JSP 的，Spring Boot 官網更推薦使用模板引擎來開發動態資源，而 Thymeleaf 是 Spring Boot 重點推薦的模板引擎工具。

我們還是以一個小例子帶大家簡單瞭解一下這個模板引擎。

1、新建 Spring Boot 項目

2、引入依賴信息

在之前的博客中我介紹的依賴信息只是單純的整合了 Spring，並沒有使用 Spring Boot 來整合，本篇博客更推薦大家使用 Spring Boot 整合 Thymeleaf 的方式來引入依賴信息。我們在創建 Spring Boot 項目時選擇了 Thymeleaf 起步依賴，就會在 pom.xml 文件中自動生成以下依賴（若沒有選擇需要手動引入以下依賴信息）：

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3、創建 Controller，返回 Thymeleaf 視圖

@Controller
public class HelloController {
	@GetMapping("/result")
	public ModelAndView result() {
		System.out.println("result");
		ModelAndView modelAndView = new ModelAndView();
		modelAndView.setViewName("result");
		modelAndView.addObject("hello", "Hello World!");
		return modelAndView;
	}
}

4、配置 application.yml

在 application.yml 配置文件中配置 Thymeleaf 模板文件的位置，它默認的位置在：classpath:/templates/ ，模板文件的後綴名是：.html，我們也可以通過以下方式對它的配置信息進行修改：

spring:
  thymeleaf:
    prefix: classpath:/newtemplates/
    suffix: .html

注意： 在以前傳統的 Web 項目中，靜態資源修改後，是不需要重啓的；但是在 Spring Boot 項目中，資源一旦修改，必須重啓程序才能生效。

5、創建視圖（result.html）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p th:text="${hello}"></p>
</body>
</html>

6、目錄結構

7、測試

運行 Application 啓動類，在瀏覽器中進行測試：

生成的源代碼：

二、Thymeleaf 常用標籤

大家需要注意，只要前端頁面用了 Thymeleaf（th標籤）技術，則必須通過 Controller 映射才能正確解析。當然直接訪問也不會報錯，只是不會被解析了。

1、th:text

用於文本顯示，將業務數據的值填充到 HTML 標籤中。

Thymeleaf
```
<p th:text="${name}"></p>
```

Controller

@GetMapping("/result1")
public ModelAndView result1() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("name", "張三");
	return modelAndView;
}

2、th:utext

也是用於文本顯示，與 th:text 不同的是，th:text 獲取的值如果是 HTML 標籤的話，會進行解析，而 th:utext 不會被解析。

Thymeleaf

<p th:text="${name}"></p>
<p th:utext="${name}"></p>

Controller

@GetMapping("/result2")
public ModelAndView result2() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("name", "<span>這是內嵌的標籤</span>");
	return modelAndView;
}

生成的源代碼

3、th:if

用來做條件判斷，對業務數據的值進行判斷，如果成立則顯示內容，否則不顯示。

Thymeleaf

<p th:if="${score>=90}">優秀</p>
<p th:if="${score<90}">良好</p>

Controller

@GetMapping("/result3")
public ModelAndView result3(){
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("score", 90);   // 顯示 優秀
	return modelAndView;
}

4、th:unless

用來做條件判斷，邏輯與 th:if 剛好相反，如果條件不成立顯示，否則不顯示。

Thymeleaf

<p th:unless="${score>=90}">優秀</p>
<p th:unless="${score<90}">良好</p>

Controller

@GetMapping("/result4")
public ModelAndView result4() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("score", 90);   // 顯示 良好
	return modelAndView;
}

5、th:switch 與 th:case

這兩個標籤需要結合起來使用，用作多條件等值判斷，邏輯與 Java 中的 switch-case 一致，當 switch 中的業務數據值等於某個 case 值時，就顯示該 case 值對應的內容。

Thymeleaf

<div th:switch="${id}">
	<p th:case="1">張三</p>
	<p th:case="2">李四</p>
	<p th:case="3">王五</p>
</div>

Controller

@GetMapping("/result5")
public ModelAndView result5() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("id", 2);
	return modelAndView;
}

生成的源代碼

6、th:action

用來指定請求的 URL，相當於 form 表單中的 action 屬性。

Thymeleaf

<form th:action="@{/login}" method="post">
	用戶名：<input type="text" name="name"><br>
	密碼：<input type="password" name="password"><br>
    <input type="submit" value="登錄">
</form>

7、th:each

用來做遍歷，將集合、數組的數據進行遍歷。

Thymeleaf

<table>
	<tr>
		<th>編號</th>
		<th>姓名</th>
		<th>年齡</th>
	</tr>
	<tr th:each="user : ${list}">
		<td th:text="${user.id}"></td>
		<td th:text="${user.name}"></td>
		<td th:if="${user.gender == 1}">男</td>
		<td th:if="${user.gender == 0}">女</td>
	</tr>
</table>

Controller

@GetMapping("/result7")
public ModelAndView result7() {
	List<User> list = new ArrayList<>();
	list.add(new User(1L, "張三", 0));
	list.add(new User(2L, "李四", 1));
	list.add(new User(3L, "王五", 0));
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("list", list);
	return modelAndView;
}

生成的源代碼

8、th:value

用來給表單標籤賦值。

Thymeleaf

<input type="text" th:value="${value}">

Controller

@GetMapping("/result8")
public ModelAndView result8() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("value", "Thymeleaf");
	return modelAndView;
}

生成的源代碼

9、th:src

用來引入靜態資源，相當於 HTML 原生標籤 img、script 的 src 屬性。

${src}：需要 Controller 將具體的路徑傳到 src 中；

@{/1.jpg}：不需要傳入具體路徑，只需要解析 th 標籤即可。

Thymeleaf

<img th:src="${src}">
<img th:src="@{/1.jpg}">

Controller

@GetMapping("/result9")
public ModelAndView result9() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("src", "/1.jpg");
	return modelAndView;
}

生成的源代碼

10、th:href

用來引入鏈接，相當於 HTML 原生標籤中 a標籤的 href 屬性。

Thymeleaf

<a th:href="${href}">百度</a>
<a th:href="@{http://www.baidu.com}">百度</a>

Controller

@GetMapping("/result10")
public ModelAndView result10() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("href", "http://www.baidu.com");
	return modelAndView;
}

生成的源代碼

11、th:selected

用來給 HTML 元素設置選中項，條件成立則選中，否則不選中。

Thymeleaf

<select>
	<!-- 方式一（推薦）： -->
	<option th:each="user:${list}" th:text="${user.name}" 
th:selected="${user.name == name}"></option>
</select>
<select>
	<!-- 方式二： -->
	<option th:selected="${name=='張三'}">張三</option>
	<option th:selected="${name=='李四'}">李四</option>
	<option th:selected="${name=='王五'}">王五</option>
</select>

Controller

@GetMapping("/result11")
public ModelAndView result11() {
	List<User> list = new ArrayList<>();
	list.add(new User(1L, "張三", 0));
	list.add(new User(2L, "李四", 1));
	list.add(new User(3L, "王五", 0));
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("list", list);    // 如果使用方式二則不需要傳 list
	modelAndView.addObject("name", "李四");
	return modelAndView;
}

生成的源代碼

12、th:attr

用來給 HTML 標籤的任意屬性賦值。

Thymeleaf
```
<input th:attr="value=${attr}">
```

Controller

@GetMapping("/result12")
public ModelAndView result12() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("attr", "Thymeleaf");
	return modelAndView;
}

生成的源代碼

博客中若有不恰當的地方，請您一定要告訴我。前路崎嶇，望我們可以互相幫助，並肩前行！

SpringBoot整合Thymeleaf（上）

文章目錄

一、引入 Thymeleaf

1、新建 Spring Boot 項目

2、引入依賴信息

3、創建 Controller，返回 Thymeleaf 視圖

4、配置 application.yml

5、創建視圖（result.html）

6、目錄結構

7、測試

二、Thymeleaf 常用標籤

1、th:text

2、th:utext

3、th:if

4、th:unless

5、th:switch 與 th:case

6、th:action

7、th:each

8、th:value

9、th:src

10、th:href

11、th:selected

12、th:attr

Thymeleaf之鏈接表達式傳參問題

Thymeleaf之基本論述（方言、配置、註釋、優先級）

Thymeleaf之模板佈局

BCrypt初體驗之加密與驗證

SpringMVC之REST風格的URL

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結