一、簡介
Thymeleaf 是可以渲染HTML5 內容的Java模板引擎,與JSP等模板引擎類似可以與Spring MVC等框架集成。它可以直接被瀏覽器打開,瀏覽器會忽略未定義的Thymeleaf標籤屬性,展示模板的靜態頁面效果。而通過Web 應用程序訪問時,則會動態地替換掉靜態內容來使頁面動態顯示。
二、引入依賴
pom文件引入thymeleaf依賴包:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
三、配置yml配置文件
在yml文件中添加如下配置:
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
encoding: UTF-8
cache: false
mode: HTML5
enabled: true
prefix:配置模板靜態文件放置的路徑,classpath:/templates/表示文件放置在resource資源文件的templates文件夾下。
suffix:配置模板靜態文件的後綴名,配置了這個屬性之後在跳轉頁面時就可以直接寫文件名即可,不用寫帶後綴名的全文件名(例:文件爲index.html,在跳轉頁面時直接跳轉到"index"而不用寫"index.html")。
encoding:配置模板文件的編碼格式。
cache:配置模板文件的緩存是否啓用,可選填false或true(在開發階段建議關閉,否則修改文件後容易無法及時看到效果)。
mode:應用於模板的模板模式。
enabled:是否啓用MVC Thymeleaf視圖分辨率。
四、接口開發
Controller文件要使用@Controller而不是@RestController,因爲後者會把返回的結果轉化成json格式,無法返回到頁面。
@Controller public class WebController { @RequestMapping("/mainWeb") public String mainWeb(Model model){ //執行一些查詢服務或者規定操作 //返回執行後獲取的數據,放置在模型中 model.setAttribute("result",result); //跳轉到主頁 return "/index"; } }
在瀏覽器中訪問接口/mainWeb時,會在後臺進行一些查詢服務或者其他一些需要的操作,執行完數據操作後如果需要數據返回到頁面,則通過model.setAttribute來將數據放置到模型中,return "/index"則是返回到templates文件夾下名稱爲index的html模板文件頁面。
五、頁面動態加載
html模板引擎中通過xmlns:th="http://www.thymeleaf.org"在 html 標籤中聲明此名稱空間,可避免編輯器出現 html 驗證錯誤。
1、常用屬性
th:text :通過${}來將該屬性替換該標籤的內容文本替換,會轉義其中的特殊字符。
th:utext :通過${}來將該屬性替換該標籤的內容文本替換,不轉義其中的特殊字符。
th:object :通過${}來替換父標籤內容,在該父標籤下的子標籤則可以通過*{}來顯示內容。(表單中可以使用該屬性標註form標籤,內部的各數據項的value使用*{}來使用)
th:value :通過${}來替換標籤的value屬性,用來接參數較多。
th:style :通過' '單引號中包含的css屬性來對標籤進行行內樣式綁定。
th:each :通過${ item : list }的方式進行遍歷循環,子標籤可以使用${ item.*** }來使用元素的某個屬性。
th:if :通過${}中的判斷條件來控制標籤是否顯示,如果true則顯示。相反th:unless則是true則不顯示。
th:switch:通過${}中的數據項來進行判斷,在th:case=""中填寫相應的分支,滿足不同值時進行不同內容的顯示。
th:src:通過@{url}來進行資源的引用。
th:selected:通過等於" "來選中當前選擇框,適用於選擇器。
th:onclick:通過' '中的事件來切換點擊觸發的事件。
th:inline:添加在javascript標籤上,分別有text、none和javascript等選擇,設置爲javascript時可以在js中獲取頁面對應接口中的值。
th:action:替換表單提交時訪問的接口,通過@{ url }來進行訪問,url爲提交的接口地址。
th:href:替換鏈接地址,無參數直接用@{ url }即可,有參數在地址後加括號進行附帶@{ url(name="***",value="***") }
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Thymeleaf</title> </head> <body> <div th:each="item : ${news}"> <span th:text="${item.title}"></span> </div> </body> </html>
括號中的數據項直接使用model.setAttribute中添加的屬性即可。
六、注意事項
1、接口跳轉頁面:
一般查詢數據列表返回的接口直接跳轉到對應頁面即可,而執行一些新增、修改、刪除等邏輯操作的接口最好使用重定向跳轉至對應頁面,即return "redirect:/mainWeb"。
因爲在刷新時會重複訪問同一個接口,會造成邏輯操作重複執行,所以除了查詢列表信息加載頁面之外最好還是通過重定向跳轉到查詢列表的接口再跳轉到對應的主頁面。
2、表單提交:
接口的@RequestMapping中要註明post方式,接參數的實體要使用@ModelAttribute註解來接參數:
@RequestMapping(value = "/submitPartnersApply",method = RequestMethod.POST) public String submitPartnersApply(@ModelAttribute(value = "partnersPo") PartnersPo partnersPo,Model model){ ResultBean resultBean = resourceCenterService.addPartner(partnersPo); model.setAttribute("submitRes",resultBean); return "redirect:/resourceCenter"; }
七、session擴展使用
1、引入依賴
<dependency> <groupId>org.springframework.session</groupId> <artifactId>spring-session-core</artifactId> </dependency>
2、接口賦值
在接口的形參中添加HttpSession session,代碼中使用session.setAttribute進行賦值:
@RequestMapping("/submit") public String submit(HttpSession session){ session.setAttribute("response",resultBean); return "redirect:/mainWeb"; }
3、頁面取值
通過${ session.* }來進行使用,即和model的區別就是model賦的值可以直接使用,session需要使用前綴。