Thymeleaf
Thymeleaf簡介
Thymeleaf是一個流行的模板引擎,該模板引擎采用Java語言開發,模板引擎是一個技術名詞,是跨領域跨平台的概念,在Java語言體系下有模板引擎,在C#、PHP語言體系下也有模板引擎。除了thymeleaf之外還有Velocity、FreeMarker等模板引擎,功能類似。
Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式,因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。使用thymeleaf創建的html模板可以在瀏覽器里面直接打開(展示靜態數據),這有利於前后端分離。需要注意的是thymeleaf不是spring旗下的。這里我們使用thymeleaf 3版本。
第一個thymeleaf程序
添加thymeleaf依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
修改spring boot配置文件
在開發階段,建議關閉thymeleaf的緩存
spring.thymeleaf.cache=false
thymeleaf會對html中的標簽進行嚴格校驗,如果html標簽缺少結束標簽的話,thymeleaf會報錯,我們可以通過下面方式去除thymeleaf的校驗,添加依賴:
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
在spring boot配置文件中添加下面內容:
spring.thymeleaf.mode=LEGANCYHTML5
創建controller准備數據
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ThymeleafController {
@RequestMapping("/hello")
public String helloThymeleaf(Model model) {
model.addAttribute("name", "jack");
return "index";
}
}
創建html頁面
在resources/templates里面創建一個index.html,填寫下面內容,注意添加這個xmlns:th="http://www.thymeleaf.org":
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring boot集成 Thymeleaf</title>
</head>
<body>
<p th:text="${name}">Spring boot集成 Thymeleaf</p>
</body>
</html>
Springboot使用thymeleaf作為視圖展示的時候,我們將模板文件放置在resource/templates目錄下,靜態資源放置在resource/static目錄下。
表達式
標准變量表達式
創建用來准備數據的Controller
@RequestMapping(value="/userInfo")
public String userInfo (Model model) {
User user = new User();
user.setId(1001);
user.setName("jack");
user.setPhone("13711111111");
model.addAttribute("user", user);
model.addAttribute("hello", "helloworld");
return "user";
}
創建user.html,通過th:text表達式來獲取controller中返回的數據。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring boot集成 Thymeleaf</title>
</head>
<body>
<table>
<tr>
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">a</td>
<td th:text="${user.phone}">137</td>
</tr>
</table>
<div th:text="${hello}"></div>
</body>
</html>
選擇變量表達式
這里相當於是先使用th:object將user對象取出,然后在里面的th:text中獲取user對象中的屬性值。
<table>
<tr th:object="${user}">
<td th:text="*{id}">1</td>
<td th:text="*{name}">a</td>
<td th:text="*{phone}">137</td>
</tr>
</table>
url表達式
將后台傳入的數據拼接到url中
<a href="info.html" th:href="@{/user/info(id=${user.id})}">參數拼接</a>
<a href="info.html" th:href="@{/user/info(id=${user.id},phone=${user.phone})}">多參數拼接</a>
<a href="info.html" th:href="@{/user/info/{uid}(uid=${user.id})}">restful風格</a>
<a href="info.html" th:href="@{/user/info/{uid}/abc(uid=${user.id})}">restful風格</a>