SpringBoot集成Thymeleaf模板引擎
傳統的JSP+JSTL組合是已經過去了,Thymeleaf是Java服務端的模板引擎,與傳統的JSP不同,Thymeleaf可以使用瀏覽器直接打開,因為可以忽略掉拓展屬性,相當於打開原生頁面,給前端人員也帶來一定的便利。我的這個博客網站也是SpringBoot+Thymeleaf搭建的。
1. 依賴導入
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
2. Thymeleaf相關配置
因為Tymeleaf默認是開啟頁面緩存的,所以在開發的時候,需要關閉這個頁面緩存,其他基本不用怎麽配置。
server: port: 8088 spring: thymeleaf: cache: false #關閉緩存
3. 測試頁面訪問
3.1 訪問靜態頁面
這個和Thymeleaf沒啥關系,我也把它一並寫到這裏,一般做網站的時候,都會自己做一個404頁面和500頁面,為了給用戶一個友好的展示。SpringBoot中會自動識別模板目錄下的404.html和500.html,所以我們在templare/error下新建兩個html頁面,然後分別打印些信息。以404為例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 這是404頁面 </body> </html>
再寫一個controller測試一下:
@Controller public class TestController { @RequestMapping("/test") public String test404() {return "index"; } @RequestMapping("/test505") public String test505() { int i = 1 / 0; return "index"; } }
當我們在瀏覽器中輸入localhost:8088/hello時,找不到對應的方法,就會跳轉到404.html顯示。
當我們在瀏覽器中輸入localhost:8088/test505時,會拋出異常,然後會自動跳轉到500.html顯示。
【註】使用模板引擎時,Controller層就不能用@RestController註解了,否則會把返回的String當作json解析了,直接返回了,就不會去找頁面,所以使用模板時要用@Controller註解。
3.2 Thymeleaf中處理對象
假如我們給前端傳一個對象,如下:
public class Blogger { private Long id; private String name; private String pass; // 省去set和get }
然後在controller層中初始化一下:
@RequestMapping("/blogger") public String testObject(Model model) { Blogger blogger = new Blogger(); blogger.setId(1L); blogger.setName("倪升武"); blogger.setPass("12345"); model.addAttribute("blogger", blogger); return "blogger"; }
再寫一個blogger.html來渲染一下:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <html lang="en"> <head> <meta charset="UTF-8"> <title>博主信息</title> </head> <body> <form action="" th:object="${blogger}" > 用戶編號:<input name="id" th:value="${blogger.id}"/><br> 用戶姓名:<input type="text" name="username" th:value="${blogger.getName()}" /><br> 登陸密碼:<input type="text" name="password" th:value="*{pass}" /> </form> </body> </html>
可以看出,使用th:object="${}"來獲取對象信息,然後在表單裏面可以有三種方式獲取對象屬性。
使用 th:value="*{屬性名}" 使用 th:value="${對象.屬性名}" 使用 th:value="${對象.get方法}"
可以看出,在Thymeleaf中可以像寫java一樣寫代碼,很方便。
3.3 Thymeleaf中處理List
List的話,就需要在前Thymeleaf中進行遍歷了。先模擬一個List。
@RequestMapping("/list") public String testList(Model model) { List<Blogger> bloggerList = new ArrayList<>(); Blogger blogger = new Blogger(); blogger.setId(1L); blogger.setName("倪升武"); blogger.setPass("12345"); bloggerList.add(blogger); Blogger blogger2 = new Blogger(); blogger2.setId(2L); blogger2.setName("ITcodai"); blogger2.setPass("12345"); bloggerList.add(blogger2); model.addAttribute("list", bloggerList); return "list"; }
然後list.html中來遍歷這個list。
<form action="" th:each="blogger : ${list}" > 用戶編號:<input name="id" th:value="${blogger.id}"/> 用戶姓名:<input type="text" name="password" th:value="${blogger.name}"/><br> 登錄密碼:<input type="text" name="username" th:value="${blogger.getPass()}"/> </form>
其實和JSTL差不多,Thymeleaf使用th:each進行遍歷,表單裏面可以直接使用${對象.屬性名},也可以使用${對象.get方法},但是不能使用*{屬性名},模板獲取不到。
Thymeleaf還有很多其他用法,這裏就不總結了,具體的可以參考Thymeleaf的官方文檔(v3.0)。
SpringBoot集成Thymeleaf模板引擎