| Spring_Boot專欄 | ||
|---|---|---|
| 上一篇 | 主目錄 | 下一篇 |
【前言】
傳統的網站開發使用jsp模板引擎，jsp能以模板化的方式簡單、高效地添加動態網頁內容。但springboot默認不支持jsp，推薦使用Thymeleaf模板引擎
什麼是模板引擎：頁面+數據==模板引擎=>嵌入數據的頁面
1 Thymeleaf簡介
1.Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型，然後在 html 標籤裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、該jstl、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。
3. Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。
4. Spring Boot默認存放模板頁面的路徑在src/main/resources/templates。Thymeleaf默認的頁面文件後綴是.html。只要我們把HTML頁面放在classpath:/templates/，thymeleaf就能自動渲染
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");
private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
2 Thymeleaf使用
2.1 添加Thymeleaf依賴
要想使用Thhymeleaf，首先要在pom.xml文件中單獨添加Thymeleaf依賴。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.2 如何將數據傳到Thymeleaf
在MVC的開發過程中，我們經常需要通過Controller將數據傳遞到頁面中，讓頁面進行動態展示。
@Controller
public class ThymeleafController {
@RequestMapping(value = "show", method = RequestMethod.GET)
public String show(Model model){
model.addAttribute("uid","123456789");
model.addAttribute("name","shane");
return "show";
}
}
在SpringBoot默認的頁面路徑下創建show.html文件
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模版渲染</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<p th:text="'用戶ID：' + ${uid}"/>
<p th:text="'用戶名稱：' + ${name}"/>
</body>
</html>
2.3 Thymeleaf的使用
使用
- 導入thymeleaf的名稱空間
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org">在html中引入此命名空間，可避免編輯器出現html驗證錯誤。這樣的話纔可以在其他標籤裏面使用th:*這樣的語法.
- 使用thymeleaf語法
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>成功！</h1>
<!--th:text 將div裏面的文本內容設置爲 -->
<div th:text="${hello}">這是顯示歡迎信息</div>
</body>
</html>
2.4 語法規則
th：任意html屬性；來替換原生屬性的值。
th:text：改變當前元素裏面的文本內容
${...}：獲取變量值
https://www.jianshu.com/p/a842e5b5012e
${屬性}、*{屬性}
<div>
<p th:text="'用戶編號：' + ${member.uid}"/>
<p th:text="'出生日期：' + ${#dates.format(member.birthday,'yyyy-MM-dd')}"/>
</div>
<hr/>#這兩種方式等價
<div th:object="${member}">
<p th:text="'用戶編號：' + *{uid}"/>
<p th:text="'出生日期：' + *{#dates.format(birthday,'yyyy-MM-dd')}"/>
</div>
數據處理
@RequestMapping(value = "/user/set", method = RequestMethod.GET)
public String set(Model model) {
Set<String> allNames = new HashSet<String>() ;
List<Integer> allIds = new ArrayList<Integer>() ;
for (int x = 0 ; x < 5 ; x ++) {
allNames.add("boot-" + x) ;
allIds.add(x) ;
}
model.addAttribute("names", allNames) ;
model.addAttribute("ids", allIds) ;
model.addAttribute("mydate", new java.util.Date()) ;
return "user_set" ;
}
<body>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"/>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}"/>
<hr/>
<p th:text="${#strings.replace('www.baidu.cn','.','$')}"/>
<p th:text="${#strings.toUpperCase('www.baidu.cn')}"/>
<p th:text="${#strings.trim('www.baidu.cn')}"/>
<hr/>
<p th:text="${#sets.contains(names,'boot-0')}"/>
<p th:text="${#sets.contains(names,'boot-9')}"/>
<p th:text="${#sets.size(names)}"/>
<hr/>
<p th:text="${#sets.contains(ids,0)}"/>
<p th:text="${ids[1]}"/>
<p th:text="${names[1]}"/>
</body>
路徑處理
#然後在頁面中可以通過“@{路徑}”來引用
<script type="text/javascript" th:src="@{/js/main.js}"></script>
#頁面之間的跳轉也能通過@{}來實現
<a th:href="@{/show}">訪問controller方法</a>
<a th:href="@{/static_index.html}">訪問靜態頁面</a>