SpringBoot詳細講解檢視整合引擎thymeleaf

2022-06-29 14:02:51

1. 支援的檢視技術

前端模板引擎技術的出現，使前端開發人員無需關注後端業務的具體實現，只關注自己頁面的呈現效果即可，並且解決了前端程式碼錯綜複雜的問題、實現了前後端分離開發。Spring Boot框架對很多常用的

模板引擎技術（如：FreeMarker、Thymeleaf、Mustache等）提供了整合支援

Spring Boot不太支援常用的JSP模板，並且沒有提供對應的整合設定，這是因為使用嵌入式Servlet容器的Spring Boot應用程式對於JSP模板存在一些限制：

在Jetty和Tomcat容器中，Spring Boot應用被打包成war檔案可以支援JSP。但Spring Boot預設使用嵌入式Servlet容器以JAR包方式進行專案打包部署，這種JAR包方式不支援JSP。
如果使用Undertow嵌入式容器部署Spring Boot專案，也不支援JSP模板。（Undertow 是紅帽公司開發的一款基於 NIO 的高效能 Web 嵌入式伺服器）
Spring Boot預設提供了一個處理請求路徑“/error”的統一錯誤處理器，返回具體的異常資訊。使用JSP模板時，無法對預設的錯誤處理器進行覆蓋，只能根據Spring Boot要求在指定位置客製化錯誤頁面。

上面對Spring Boot支援的模板引擎進行了介紹，並指出了整合JSP模板的一些限制。接下來，對其中常用的Thymeleaf模板引擎進行介紹，並完成與Spring Boot框架的整合實現

2. Thymeleaf

Thymeleaf是一種現代的基於伺服器端的Java模板引擎技術，也是一個優秀的面向Java的XML、XHTML、HTML5頁面模板，它具有豐富的標籤語言、函數和表示式，在使用Spring Boot框架進行頁面設計時，一般會選擇Thymeleaf模板

2.1 Thymeleaf語法

常用標籤

在HTML頁面上使用Thymeleaf標籤，Thymeleaf 標籤能夠動態地替換掉靜態內容，使頁面動態展示。為了大家更直觀的認識Thymeleaf，下面展示一個在HTML檔案中嵌入了Thymeleaf的頁面檔案，範例代

碼如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" media="all"
     href="../../css/gtvg.css" rel="external nofollow"  th:href="@{/css/gtvg.css}" rel="external nofollow"  />
  <title>Title</title>
</head>
<body>
  <p th:text="${hello}">歡迎進入Thymeleaf的學習</p>
</body>
</html>

上述程式碼中，“xmlns:th=“http://www.thymeleaf.org”“ 用於引入Thymeleaf模板引擎標籤，使用關鍵字“th”標註標籤是Thymeleaf模板提供的標籤，其中，“th:href”用於引入外聯樣式檔案，“th:text”用於動態顯示標籤文字內容。

除此之外，Thymeleaf模板提供了很多標籤，接下來，通過一張表羅列Thymeleaf的常用標籤

2.2 標準表示式

Thymeleaf模板引擎提供了多種標準表示式語法，在正式學習之前，先通過一張表來展示其主要語法及說明

1. 變數表示式 ${…}

變數表示式${…}主要用於獲取上下文中的變數值，範例程式碼如下：

<p th:text="${title}">這是標題</p>

範例使用了Thymeleaf模板的變數表示式${…}用來動態獲取P標籤中的內容，如果當前程式沒有啟動或者當前上下文中不存在title變數，該片段會顯示標籤預設值“這是標題”；如果當前上下文中存在title變數

並且程式已經啟動，當前P標籤中的預設文字內容將會被title變數的值所替換，從而達到模板引擎頁面資料動態替換的效果

同時，Thymeleaf為變數所在域提供了一些內建物件，具體如下所示

# ctx：上下文物件
# vars：上下文變數
# locale：上下文區域設定
# request：（僅限Web Context）HttpServletRequest物件
# response：（僅限Web Context）HttpServletResponse物件
# session：（僅限Web Context）HttpSession物件
# servletContext：（僅限Web Context）ServletContext物件

結合上述內建物件的說明，假設要在Thymeleaf模板引擎頁面中動態獲取當前國家資訊，可以使用#locale內建物件，範例程式碼如下

The locale country is: <span th:text="${#locale.country}">US</span>.

上述程式碼中，使用th:text="${#locale.country}"動態獲取當前使用者所在國家資訊，其中標籤內預設內容為US（美國），程式啟動後通過瀏覽器檢視當前頁面時，Thymeleaf會通過瀏覽器語言設定來識別當前使用者所在國家資訊，從而實現動態替換

2. 選擇變數表示式 *{…}

選擇變數表示式和變數表示式用法類似，一般用於從被選定物件而不是上下文中獲取屬性值，如果沒有選定物件，則和變數表示式一樣，範例程式碼如下

<div th:object="${book}">
 <p>titile: <span th:text="*{title}">標題</span>.</p>
</div

*{title} 選擇變數表示式獲取當前指定物件book的title屬性值。

3. 訊息表示式 #{…}

訊息表示式#{…}主要用於Thymeleaf模板頁面國際化內容的動態替換和展示，使用訊息表示式#{…}進行國際化設定時，還需要提供一些國際化組態檔。

4. 連結表示式 @{…}

連結表示式@{…}一般用於頁面跳轉或者資源的引入，在Web開發中佔據著非常重要的地位，並且使用也非常頻繁，範例程式碼如下：

<a th:href="@{http://localhost:8080/order/details(orderId=${o.id})}" rel="external nofollow" >view</a>
<a  th:href="@{/order/details(orderId=${o.id},pid=${p.id})}" rel="external nofollow" >view</a>

上述程式碼中，連結表示式@{…}分別編寫了絕對連結地址和相對連結地址。在有參表示式中，需要按照@{路徑(引數名稱=引數值，引數名稱=引數值…)}的形式編寫，同時該引數的值可以使用變數表示式來傳遞動態引數值

5. 片段表示式 ~{…}

片段表示式~{…}用來標記一個片段模板，並根據需要移動或傳遞給其他模板。其中，最常見的用法是使用th:insert或th:replace屬性插入片段，範例程式碼如下：

<div th:insert="~{thymeleafDemo::title}"></div>

上述程式碼中，使用th:insert屬性將title片段模板參照到該標籤中。thymeleafDemo為模板名稱，Thymeleaf會自動查詢 “/resources/templates/” 目錄下的thymeleafDemo模板，title為片段名稱

3. 基本使用

3.1 Thymeleaf模板基本設定

首先在Spring Boot專案中使用Thymeleaf模板，首先必須保證引入Thymeleaf依賴，範例程式碼如下：

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

其次，在全域性組態檔中設定Thymeleaf模板的一些引數。一般Web專案都會使用下列設定，範例程式碼如：

spring.thymeleaf.cache = true ＃啟用模板快取
spring.thymeleaf.encoding = UTF_8 ＃模板編碼
spring.thymeleaf.mode = HTML5 ＃應用於模板的模板模式
spring.thymeleaf.prefix = classpath:/templates/ ＃指定模板頁面存放路徑
spring.thymeleaf.suffix = .html ＃指定模板頁面名稱的字尾

上述設定中，spring.thymeleaf.cache表示是否開啟Thymeleaf模板快取，預設為true，在開發過程中通常會關閉快取，保證專案偵錯過程中資料能夠及時響應；spring.thymeleaf.prefix指定了Thymeleaf模板頁面的存放路徑，預設為classpath:/templates/；spring.thymeleaf.suffix指定了Thymeleaf模板頁面的名稱字尾，預設為.html

3.2 靜態資源的存取

開發Web應用時，難免需要使用靜態資源。Spring boot預設設定了靜態資源的存取路徑。

使用Spring Initializr方式建立的Spring Boot專案，預設生成了一個resources目錄，在resources目錄中新建public、resources、static三個子目錄下，Spring boot預設會挨個從public、resources、static裡面查詢靜態資源

3.3 完成資料的頁面展示

1. 建立Spring Boot專案

引入Thymeleaf依賴

2. 編寫組態檔

開啟application.properties全域性組態檔，在該檔案中對Thymeleaf模板頁面的資料快取進行設定

# thymeleaf頁面快取設定（預設為true），開發中方便偵錯應設定為false，上線穩定後應保持預設
true
spring.thymeleaf.cache=false

使用“spring.thymeleaf.cache=false”將Thymeleaf預設開啟的快取設定為了false，用來關閉模板頁面快取

3. 建立web控制類

在專案中建立名為com.lagou.controller的包，並在該包下建立一個用於前端模板頁面動態資料替換效果測試的存取實體類LoginController

@Controller
public class LoginController {
  /**
    * 獲取並封裝當前年份跳轉到登入頁login.html
   */
  @RequestMapping("/toLoginPage")
  public String toLoginPage(Model model){
    model.addAttribute("currentYear",
Calendar.getInstance().get(Calendar.YEAR));
    return "login";
 }

toLoginPage()方法用於向登入頁面login.html跳轉，同時攜帶了當前年份資訊currentYear。

4. 建立模板頁面並引入靜態資原始檔

在“classpath:/templates/”目錄下引入一個使用者登入的模板頁面login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,shrink-
to-fit=no">
  <title>使用者登入介面</title>
  <link th:href="@{/login/css/bootstrap.min.css}" rel="external nofollow"  rel="stylesheet">
  <link th:href="@{/login/css/signin.css}" rel="external nofollow"  rel="stylesheet">
</head>
<body class="text-center">
<!-- 使用者登入form表單 -->
<form class="form-signin">
  <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">請登入</h1>
  <input type="text" class="form-control"
     th:placeholder="使用者名稱" required="" autofocus="">
  <input type="password" class="form-control"
     th:placeholder="密碼" required="">
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> 記住我
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit" >登入</button>
  <p class="mt-5 mb-3 text-muted">© <span
th:text="${currentYear}">2019</span>-<span
th:text="${currentYear}+1">2020</span></p>
</form>
</body>
</html>

通過“xmlns:th=“http://www.thymeleaf.org””引入了Thymeleaf模板標籤；

使用“th:href”和“th:src”分別引入了兩個外聯的樣式檔案和一個圖片；

使用“th:text”引入了後臺動態傳遞過來的當前年份currentYear