Spring Boot Thymeleaf
上一篇：SpringBoot：JPA + Druid 多數據源
發了七之後好久才發八，中間放飛自我 + 突然上課，嘿嘿
簡單概括Spring Boot Thymeleaf：
- 可以用來代替JSP，用於渲染XML / HTML5 / XHTML5 內容的模版引擎
- 能夠在瀏覽器中打開並正確地顯示模版頁面，而不需要啓動整個Web應用
- 無網絡也可以運行，提供標準和Spring兩種方言以及與SpringMVC完美集成的可選模塊，可直接套用模版實現JSTL、OGNL表達效果
下面三個小實驗：
-
訪問Spring Initializr
![在這裏插入圖片描述]()
初始化建立Spring Boot項目 -
解壓之後用IDEA打開thymeleaf文件
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
-
在pom.xml中dependencies中添加依賴：
<dependencies> <!-- web mvc --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- thymeleaf --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- test --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- hot swapping, disable cache for templates, enable live reload 熱部署--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> -
在pom.xml中添加build：
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <addResources>true</addResources> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <version>2.22.0</version> </plugin> </plugins> </build> -
在 application.properties 中添加配置， 是關閉 thymeleaf 緩存，避免開發過程中修改頁面需要重啓
spring.thymeleaf.cache=false -
三個實驗目錄
![在這裏插入圖片描述]()
-
第一個小實驗
hello.html:<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Hello</title> </head> <body> <h1 th:text="${message}">Hello Thymeleaf!</h1> </body> </html>HelloController.java
import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HelloController { @RequestMapping("/") public String index(ModelMap map) { map.addAttribute("message", "替換內容"); return "hello"; } } -
IDEA 右上角啓動項目後訪問 http://localhost:8080/
-
th:text="${message} ：th表示thymeleaf標籤， text是指它的內容會由" ${message}替換後面的“Hello Thymeleaf!”
-
在HelloController控制類中，@RequestMapping("/") 表示映射http://localhost:8080/ 地址
-
參數ModelMap對象主要用於傳遞控制方法處理數據到結果頁面，也就是說我們把結果頁面上需要的數據放到ModelMap對象中即可，他的作用類似於request對象的setAttribute方法的作用，用來在一個請求過程中傳遞處理的數據。通過方法map.addAttribute(“message”, “替換內容”)向頁面傳遞參數：
-
return “hello”指向 hello.html
![在這裏插入圖片描述]()
-
第二個小實驗
copyright.html:<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <footer th:fragment="copyright"> © include and replace </footer>index.html
<body xmlns:th="http://www.w3.org/1999/xhtml"> <div th:include="layout/copyright :: copyright"></div> <div th:replace="layout/copyright :: copyright"></div> </body>IndexController.java:
import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class IndexController { @RequestMapping("/index") public String index() { return "index"; } } -
IDEA右上角啓動項目後訪問 http://localhost:8080/index
-
在copyright.html中，th:fragment 屬性來定義被包含的模版片段：名稱爲“copyright”
-
include 和 replace 區別：include 只是加載，replace 是替換
-
th:include=“layout/copyright :: copyright”：layout / copyright是指項目目錄layout下的copyright文件，第二個copyright是指 th:fragment="copyright"中包含的片段名 copyright
-
IndexController.java 返回 index的URL
![在這裏插入圖片描述]()
-
第三個小實驗：
header.html：<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Header</title> </head> <body> <h5 th:fragment="header">header</h5> </body> </html>left.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Header</title> </head> <body> <h5 th:fragment="left">left</h5> </body> </html>layout.html:
<!DOCTYPE html> <html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> <div layout:fragment="content"> <h4>hey, momentum</h4> </div> </body> </html>footer.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Header</title> </head> <body> <h5 th:fragment="footer">footer</h5> </body> </html>home.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div th:replace="layout/header :: header"></div> <div th:replace="layout/left :: left"></div> <div layout:fragment="content"> I'm gonna gotcha</div> <div th:replace="layout/footer :: footer"></div> </div> </body> </html>layout.html:
import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class LayoutController { @RequestMapping("/home") public String home() { return "home"; } } -
啓動項目後訪問 http://localhost:8080/home：
![在這裏插入圖片描述]()
在home.html裏面分別應引用就到達了這個效果，header left footer以及中間的內容替換
下一篇：Spring Boot Jpa與Thymeleaf實現增刪改查
