SpringBoot 整合 thymeleaf
阿新 • • 發佈：2021-02-04
目錄
1 檢視模板技術
- 我們熟悉的 JSP 其實只是檢視模板技術的一種，除了 JSP 外還有很多其他技術也可以幫助我們實現伺服器端渲染。日路：Freemarker、Thymeleaf、Velocity等等。其中最優秀的是 Thymeleaf，而 JSP 因為不容易從 jar 包中讀取而不被 SpringBoot 所推薦
為什麼要使用 Thymeleaf 替代 jsp？
- 前端工程師拿到 jsp 檔案後，沒法直接在瀏覽器上檢視佈局、動態效果等等顯示效果。所以基於 jsp 無法和前端工程師進行協同工作。而 Thymeleaf 中所有的動態效果都不影響原本 HTML 標籤的顯示。當一個前端工程師拿到 Thymeleaf 檔案後，可以直接放在瀏覽器上檢視顯示效果，也無需啟動伺服器（如 Tomcat）後才能顯示效果，看程式碼時忽略動態部分即可
2 使用
1、新建工程，匯入依賴
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.6.RELEASE</version>
</parent>
<dependencies>
<dependency 2、建立啟動類 SpringBootMainType
@SpringBootApplication
public class SpringBootMainType {
public static void main(String[] args) {
SpringApplication.run(SpringBootMainType.class, args);
}
}
3、編寫 Handler：TestTemplateHandler
@Controller
public class TestTemplateHandler {
@RequestMapping("/test/thymeleaf")
public String testThymeleaf(){
return "hello";
}
}
4、建立配置檔案 application.yml，用於指定上哪找 Thymeleaf 檔案，類似檢視解析器
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: false
5、建立 Hello.html
注意新增 xmlns:th=“http://www.thymeleaf.org” 名稱空間，Thymeleaf 才會生效
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--伺服器解析 Thymeleaf 程式碼時，會讀取 th:text 屬性的值，用這個值替換原本標籤體的值-->
<p th:text="經過伺服器處理後可以看到的內容">直接在瀏覽器上開啟時可以看到的內容</p>
</body>
</html>
6、直接雙擊開啟 Hello.html 檢視效果：
7、啟動 SpringBoot，使用請求訪問 Hello.html，檢視效果：
3 Thymeleaf 相關語法
使用 Thymeleaf 前要加入名稱空間：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
修改標籤文字值
<p th:text="新值">原始值</p>
修改指定屬性值
<input value="原始值" th:value="新值" />
- 當然這個不僅僅對 value 生效，對其他屬性均生效，如 img 標籤的 src 屬性，可以使用 th:src 重新指定；div 的 style 屬性，可以使用 th:style 重新指定
<div style="background-color: yellow" th:style="'background-color: green'"></div>
瀏覽器開啟：
經過伺服器訪問：
在表示式中訪問屬性域
<p th:text="${attrNameRequestScope}">訪問請求域方式1</p>
<p th:text="${#httpServletRequest.getAttribute('attrNameRequestScope')}">訪問請求域方式2</p>
<p th:text="${session.attrNameSessionScope}">訪問會話域</p>
<p th:text="${application.attrNameAppScope}">訪問應用域</p>
編寫 Handler 傳遞相應的資料
@RequestMapping("/test/thymeleaf")
public String testThymeleaf(ModelMap modelMap, HttpSession session){
// 將測試資料存入請求域
modelMap.addAttribute("attrNameRequestScope", "attrValueRequestScope");
// 將測試資料存入會話域
session.setAttribute("attrNameSessionScope", "attrValueSessionScope");
// 將測試資料存入應用域
servletContext.setAttribute("attrNameAppScope", "attrValueAppScope");
return "hello";
}
瀏覽器訪問如下：
解析 URL 地址
- @{}的作用是把 contextPath 的值賦加到指定的地址前，但 SpringBoot 預設的 contextPath 是空
<p th:text="@{/aaa/bbb/ccc}"></p>
使用場景：超連結的 href 或表單的 action
<a href="../aaa/bbb/ccc.html" th:href="@{/aaa/bbb/ccc.html}"></a>
在伺服器訪問時，它會自動在 /aaa/bbb/ccc.html 前加上 contextPath，實現動態獲取
包含其他模板檔案
建立一個模板檔案part.html
<div th:fragment="myFirstPart">
<p>will be include content [first]</p>
</div>
<div th:fragment="mySecondPart">
<p>will be include content [Second]</p>
</div>
<div th:fragment="myThirdPart">
<p>will be include content [Third]</p>
</div>
在 hello.html 中有三種方式匯入
- include 是包含方式，只會將
<p>will be include content [first]</p>插入到 div 中 - insert 是插入方式，會將整個 div 插入到原來的 div 中
- replace 是替換方式，將整個 div 與原來的 div 替換
<div th:include="~{include/part::myFirstPart}"></div>
<div th:insert="~{include/part::mySecondPart}"></div>
<div th:replace="~{include/part::myThirdPart}"></div>