快捷導(dǎo)航

SpringBoot詳細(xì)講解視圖整合引擎thymeleaf

更新時間：2022年06月29日 09:48:10 作者：程序員阿紅

這篇文章主要分享了Spring Boot整合使用Thymeleaf，Thymeleaf是新一代的Java模板引擎，類似于Velocity、FreeMarker等傳統(tǒng)引擎，關(guān)于其更多相關(guān)內(nèi)容，需要的小伙伴可以參考一下

1. 支持的視圖技術(shù)

前端模板引擎技術(shù)的出現(xiàn)，使前端開發(fā)人員無需關(guān)注后端業(yè)務(wù)的具體實(shí)現(xiàn)，只關(guān)注自己頁面的呈現(xiàn)效果即可，并且解決了前端代碼錯綜復(fù)雜的問題、實(shí)現(xiàn)了前后端分離開發(fā)。Spring Boot框架對很多常用的

模板引擎技術(shù)（如：FreeMarker、Thymeleaf、Mustache等）提供了整合支持

Spring Boot不太支持常用的JSP模板，并且沒有提供對應(yīng)的整合配置，這是因?yàn)槭褂们度胧絊ervlet容器的Spring Boot應(yīng)用程序?qū)τ贘SP模板存在一些限制：

在Jetty和Tomcat容器中，Spring Boot應(yīng)用被打包成war文件可以支持JSP。但Spring Boot默認(rèn)使用嵌入式Servlet容器以JAR包方式進(jìn)行項(xiàng)目打包部署，這種JAR包方式不支持JSP。
如果使用Undertow嵌入式容器部署Spring Boot項(xiàng)目，也不支持JSP模板。（Undertow 是紅帽公司開發(fā)的一款基于 NIO 的高性能 Web 嵌入式服務(wù)器）
Spring Boot默認(rèn)提供了一個處理請求路徑“/error”的統(tǒng)一錯誤處理器，返回具體的異常信息。使用JSP模板時，無法對默認(rèn)的錯誤處理器進(jìn)行覆蓋，只能根據(jù)Spring Boot要求在指定位置定制錯誤頁面。

上面對Spring Boot支持的模板引擎進(jìn)行了介紹，并指出了整合JSP模板的一些限制。接下來，對其中常用的Thymeleaf模板引擎進(jìn)行介紹，并完成與Spring Boot框架的整合實(shí)現(xiàn)

2. Thymeleaf

Thymeleaf是一種現(xiàn)代的基于服務(wù)器端的Java模板引擎技術(shù)，也是一個優(yōu)秀的面向Java的XML、XHTML、HTML5頁面模板，它具有豐富的標(biāo)簽語言、函數(shù)和表達(dá)式，在使用Spring Boot框架進(jìn)行頁面設(shè)計(jì)時，一般會選擇Thymeleaf模板

2.1 Thymeleaf語法

常用標(biāo)簽

在HTML頁面上使用Thymeleaf標(biāo)簽，Thymeleaf 標(biāo)簽?zāi)軌騽討B(tài)地替換掉靜態(tài)內(nèi)容，使頁面動態(tài)展示。為了大家更直觀的認(rèn)識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}">歡迎進(jìn)入Thymeleaf的學(xué)習(xí)</p>
</body>
</html>

上述代碼中，“xmlns:th=“http://www.thymeleaf.org”“ 用于引入Thymeleaf模板引擎標(biāo)簽，使用關(guān)鍵字“th”標(biāo)注標(biāo)簽是Thymeleaf模板提供的標(biāo)簽，其中，“th:href”用于引入外聯(lián)樣式文件，“th:text”用于動態(tài)顯示標(biāo)簽文本內(nèi)容。

除此之外，Thymeleaf模板提供了很多標(biāo)簽，接下來，通過一張表羅列Thymeleaf的常用標(biāo)簽

2.2 標(biāo)準(zhǔn)表達(dá)式

Thymeleaf模板引擎提供了多種標(biāo)準(zhǔn)表達(dá)式語法，在正式學(xué)習(xí)之前，先通過一張表來展示其主要語法及說明

1. 變量表達(dá)式 ${…}

變量表達(dá)式${…}主要用于獲取上下文中的變量值，示例代碼如下：

<p th:text="${title}">這是標(biāo)題</p>

示例使用了Thymeleaf模板的變量表達(dá)式${…}用來動態(tài)獲取P標(biāo)簽中的內(nèi)容，如果當(dāng)前程序沒有啟動或者當(dāng)前上下文中不存在title變量，該片段會顯示標(biāo)簽?zāi)J(rèn)值“這是標(biāo)題”；如果當(dāng)前上下文中存在title變量

并且程序已經(jīng)啟動，當(dāng)前P標(biāo)簽中的默認(rèn)文本內(nèi)容將會被title變量的值所替換，從而達(dá)到模板引擎頁面數(shù)據(jù)動態(tài)替換的效果

同時，Thymeleaf為變量所在域提供了一些內(nèi)置對象，具體如下所示

# ctx：上下文對象
# vars：上下文變量
# locale：上下文區(qū)域設(shè)置
# request：（僅限Web Context）HttpServletRequest對象
# response：（僅限Web Context）HttpServletResponse對象
# session：（僅限Web Context）HttpSession對象
# servletContext：（僅限Web Context）ServletContext對象

結(jié)合上述內(nèi)置對象的說明，假設(shè)要在Thymeleaf模板引擎頁面中動態(tài)獲取當(dāng)前國家信息，可以使用#locale內(nèi)置對象，示例代碼如下

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

上述代碼中，使用th:text="${#locale.country}"動態(tài)獲取當(dāng)前用戶所在國家信息，其中標(biāo)簽內(nèi)默認(rèn)內(nèi)容為US（美國），程序啟動后通過瀏覽器查看當(dāng)前頁面時，Thymeleaf會通過瀏覽器語言設(shè)置來識別當(dāng)前用戶所在國家信息，從而實(shí)現(xiàn)動態(tài)替換

2. 選擇變量表達(dá)式 *{…}

選擇變量表達(dá)式和變量表達(dá)式用法類似，一般用于從被選定對象而不是上下文中獲取屬性值，如果沒有選定對象，則和變量表達(dá)式一樣，示例代碼如下

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

*{title} 選擇變量表達(dá)式獲取當(dāng)前指定對象book的title屬性值。

3. 消息表達(dá)式 #{…}

消息表達(dá)式#{…}主要用于Thymeleaf模板頁面國際化內(nèi)容的動態(tài)替換和展示，使用消息表達(dá)式#{…}進(jìn)行國際化設(shè)置時，還需要提供一些國際化配置文件。

4. 鏈接表達(dá)式 @{…}

鏈接表達(dá)式@{…}一般用于頁面跳轉(zhuǎn)或者資源的引入，在Web開發(fā)中占據(jù)著非常重要的地位，并且使用也非常頻繁，示例代碼如下：

<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>

上述代碼中，鏈接表達(dá)式@{…}分別編寫了絕對鏈接地址和相對鏈接地址。在有參表達(dá)式中，需要按照@{路徑(參數(shù)名稱=參數(shù)值，參數(shù)名稱=參數(shù)值…)}的形式編寫，同時該參數(shù)的值可以使用變量表達(dá)式來傳遞動態(tài)參數(shù)值

5. 片段表達(dá)式 ~{…}

片段表達(dá)式~{…}用來標(biāo)記一個片段模板，并根據(jù)需要移動或傳遞給其他模板。其中，最常見的用法是使用th:insert或th:replace屬性插入片段，示例代碼如下：

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

上述代碼中，使用th:insert屬性將title片段模板引用到該標(biāo)簽中。thymeleafDemo為模板名稱，Thymeleaf會自動查找 “/resources/templates/” 目錄下的thymeleafDemo模板，title為片段名稱

3. 基本使用

3.1 Thymeleaf模板基本配置

首先在Spring Boot項(xiàng)目中使用Thymeleaf模板，首先必須保證引入Thymeleaf依賴，示例代碼如下：

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

其次，在全局配置文件中配置Thymeleaf模板的一些參數(shù)。一般Web項(xiàng)目都會使用下列配置，示例代碼如：

spring.thymeleaf.cache = true ＃啟用模板緩存
spring.thymeleaf.encoding = UTF_8 ＃模板編碼
spring.thymeleaf.mode = HTML5 ＃應(yīng)用于模板的模板模式
spring.thymeleaf.prefix = classpath:/templates/ ＃指定模板頁面存放路徑
spring.thymeleaf.suffix = .html ＃指定模板頁面名稱的后綴

上述配置中，spring.thymeleaf.cache表示是否開啟Thymeleaf模板緩存，默認(rèn)為true，在開發(fā)過程中通常會關(guān)閉緩存，保證項(xiàng)目調(diào)試過程中數(shù)據(jù)能夠及時響應(yīng)；spring.thymeleaf.prefix指定了Thymeleaf模板頁面的存放路徑，默認(rèn)為classpath:/templates/；spring.thymeleaf.suffix指定了Thymeleaf模板頁面的名稱后綴，默認(rèn)為.html

3.2 靜態(tài)資源的訪問

開發(fā)Web應(yīng)用時，難免需要使用靜態(tài)資源。Spring boot默認(rèn)設(shè)置了靜態(tài)資源的訪問路徑。

使用Spring Initializr方式創(chuàng)建的Spring Boot項(xiàng)目，默認(rèn)生成了一個resources目錄，在resources目錄中新建public、resources、static三個子目錄下，Spring boot默認(rèn)會挨個從public、resources、static里面查找靜態(tài)資源

3.3 完成數(shù)據(jù)的頁面展示

1. 創(chuàng)建Spring Boot項(xiàng)目

引入Thymeleaf依賴

2. 編寫配置文件

打開application.properties全局配置文件，在該文件中對Thymeleaf模板頁面的數(shù)據(jù)緩存進(jìn)行設(shè)置

# thymeleaf頁面緩存設(shè)置（默認(rèn)為true），開發(fā)中方便調(diào)試應(yīng)設(shè)置為false，上線穩(wěn)定后應(yīng)保持默認(rèn)
true
spring.thymeleaf.cache=false

使用“spring.thymeleaf.cache=false”將Thymeleaf默認(rèn)開啟的緩存設(shè)置為了false，用來關(guān)閉模板頁面緩存

3. 創(chuàng)建web控制類

在項(xiàng)目中創(chuàng)建名為com.lagou.controller的包，并在該包下創(chuàng)建一個用于前端模板頁面動態(tài)數(shù)據(jù)替換效果測試的訪問實(shí)體類LoginController

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

toLoginPage()方法用于向登錄頁面login.html跳轉(zhuǎn)，同時攜帶了當(dāng)前年份信息currentYear。

4. 創(chuàng)建模板頁面并引入靜態(tài)資源文件

在“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模板標(biāo)簽；

使用“th:href”和“th:src”分別引入了兩個外聯(lián)的樣式文件和一個圖片；

使用“th:text”引入了后臺動態(tài)傳遞過來的當(dāng)前年份currentYear