SpringBoot Thymeleaf

什么是Thymeleaf？

Thymeleaf 是一個開源Java庫根據(jù) Apache許可2.0 獲得許可。這是一個 HTML5/XHTML/XML 模板引擎。它是用于Web(基于Servlet)和非Web(離線)環(huán)境的 服務器端Java模板引擎。對于現(xiàn)代HTML5 JVM Web開發(fā)而言，它是完美的選擇。它提供了與Spring Framework的完全集成。

它對模板文件應用了一組轉換，以顯示應用程序生成的數(shù)據(jù)或文本。適合在Web應用程序中提供XHTML/HTML5。

Thymeleaf的目標是提供一種 時尚和 格式良好的模板創(chuàng)建方式。它基于XML標簽和屬性。這些XML標記定義了DOM(文檔對象模型)上預定義邏輯的執(zhí)行，而不是將該邏輯作為模板中的代碼顯式編寫。它代替了 JSP 。

Thymeleaf的體系結構允許對模板進行 快速 處理，具體取決于緩存解析的文件。它在執(zhí)行過程中使用了最少的I/O操作。

為什么我們使用Thymeleaf？

JSP或多或少類似于HTML。但是它與Thymeleaf等HTML并不完全兼容。我們可以在瀏覽器中正常打開和顯示Thymeleaf模板文件，而JSP文件則不能。

Thymeleaf支持像Spring EL這樣的變量表達式($ {...})并在模型屬性，星號表達式上執(zhí)行(* {...})在表單支持bean上執(zhí)行，哈希表達式(#{...})用于國際化，鏈接表達式(@{......))重寫URL。

像JSP一樣，Thymeleaf可以很好地用于Rich HTML電子郵件。

Thymeleaf可以處理哪種模板？

Thymeleaf可以處理六種類型的模板(也稱為" 模板模式)如下:

XML 有效的XML XHTML 有效的XHTML HTML5 舊版HTML5

除了舊版HTML5模式外，上述所有模式均引用 定義明確的XML 文件。它使我們能夠處理具有獨立標簽，沒有值的標簽屬性或未在引號之間寫入等功能的HTML5文件。

要以這種特定模式處理文件，Thymeleaf會執(zhí)行轉換，將文件轉換為 格式良好的XML 文件(有效的HTML5文件)。

Thymeleaf還允許我們通過指定兩種在此模式下解析模板的方式來定義自己的模式。這樣，Thymeleaf可以有效地將任何可以建模為DOM樹的模型作為模板進行處理。

標準方言

Thymeleaf是模板引擎允許我們定義DOM節(jié)點的框架。在模板中處理的DOM節(jié)點。

將邏輯應用于DOM節(jié)點的對象稱為 處理器。一組處理器以及一些額外的工件稱為 方言。包含Thymeleaf核心庫的方言稱為 標準方言。

如果我們想在利用庫的高級功能的同時定義自己的處理邏輯，則可以定義自己的方言。自己的方言。在模板引擎中，我們可以一次配置多個方言。

Thymeleaf集成包(thymeleaf-spring3和thymeleaf-spring4)定義了一個稱為 SpringStandard Dialect 的方言。標準方言和SpringStandard幾乎相同。但是標準方言有一些小的變化，可以更好地利用Spring框架中的某些功能。

例如，使用Spring Expression Language代替Thymeleaf的標準ONGL(對象圖導航語言)。

標準方言可以以任何方式處理模板。但是，它非常適合面向Web的模板模式(HTML5和XHTML)。它支持并驗證以下XHTML規(guī)范:

XHTML 1.0過渡版 嚴格的XHTML 1.0 XHTML 1.0框架集 XHTML 1.1。

標準方言處理器是一種屬性處理器，它允許瀏覽器在處理之前顯示HTML5/XHTML模板文件。這是因為它們忽略了其他屬性。

例如，當JSP文件使用標簽庫時，它包含一段代碼，這些代碼無法由以下瀏覽器顯示:

<form:inputText name="student.Name" value="${student.name}" />

Thymeleaf標準方言允許我們使用以下代碼實現(xiàn)相同的功能。

<input type="text" name=" student Name" value="Thomas" th:value="${student.name}" />

上面的代碼還允許我們在其中定義 value 屬性( Thomas )。在瀏覽器中打開原型時，將顯示該值。在模板的Thymeleaf處理過程中，該屬性將由對 $ {student.name} 的求值得出的值代替。

它允許設計人員和開發(fā)人員進行處理。相同的模板文件，減少了將靜態(tài)原型轉換為工作模板文件所需的工作。它稱為 自然模板。

Thymeleaf特征

它既可以在網(wǎng)絡環(huán)境中使用，也可以在非網(wǎng)絡環(huán)境中使用。 用于HTML5/XML/XHTML的Java模板引擎。 其高性能的解析模板緩存將I/O降至最低。 如果需要，它可以用作模板引擎框架。 它支持幾種模板模式: XML，XHTML和HTML5。 它允許開發(fā)人員擴展和創(chuàng)建自定義方言。 它基于稱為方言的模塊化功能集。 它支持國際化。

Thymeleaf實現(xiàn)

我們可以通過在應用程序的pom.xml中添加   spring-boot-starter-thymeleaf 依賴項來實現(xiàn)Thymeleaf模板引擎文件。 Spring Boot將模板引擎配置為從  /resource/templates中讀取模板文件。

示例

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

 

Spring Boot Thymeleaf示例

我們創(chuàng)建一個Spring Boot應用程序并實現(xiàn)Thymeleaf模板。

步驟1: 打開Spring Initializr http://start.spring.io 。

步驟2: 選擇Spring Boot版本   2.3.0.M1。

步驟2: 提供  組名稱。我們提供了   com.nhooo 。

步驟3: 提供  工件 ID。我們提供了   spring-boot-thymeleaf-view-example。

步驟5: 添加依賴項   Spring Web 和  Thymeleaf。

步驟6: 單擊   Generate (生成)按鈕。當我們單擊"生成"按鈕時，它將規(guī)格包裝在   Jar 文件中，并將其下載到本地系統(tǒng)。

第7步: 提取 Jar文件并將其粘貼到STS工作區(qū)中。

步驟8: 導入 STS中的項目文件夾。

文件->導入->現(xiàn)有Maven項目->瀏覽->選擇文件夾spring-boot-thymeleaf-view-example->完成

導入需要一些時間。

步驟9: 在包   com.nhooo 中創(chuàng)建類。我們創(chuàng)建了一個名為   User的類。

在該類中，我們定義了兩個變量   name 和   email 并生成   Getter和Setters。

User.java

示例

package com.nhooo;  
public class User 
{  
String name;  
String email;  
public String getName() 
{  
return name;  
}  
public void setName(String name) 
{  
this.name = name;  
}  
public String getEmail() 
{  
return email;  
}  
public void setEmail(String email) 
{  
this.email = email;  
}  
}

 

步驟10: 創(chuàng)建控制器類。我們創(chuàng)建了一個名為   DemoController 的控制器類。

DemoController.java

示例

package com.nhooo;  
import org.springframework.web.bind.annotation.ModelAttribute;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RequestMethod;  
import org.springframework.web.servlet.ModelAndView;  
import org.springframework.stereotype.Controller;  
@Controller  
public class DemoController 
{  
@RequestMapping("/")  
public String index()
{  
return"index";  
}  
@RequestMapping(value="/save", method=RequestMethod.POST)  
public ModelAndView save(@ModelAttribute User user)
{  
ModelAndView modelAndView = new ModelAndView();  
modelAndView.setViewName("user-data");      
modelAndView.addObject("user", user);    
return modelAndView;  
}  
}

 

下一步，我們將創(chuàng)建Thymeleaf模板。

步驟11: 在  模板內部(src/main/resources/模板)文件夾中，創(chuàng)建一個名稱為   user-data 的Thymeleaf模板。

右鍵單擊模板文件夾->新建->其他-> HTML文件->下一步->提供文件名->完成

注意: 不要忘記在模板文件中實現(xiàn)以下內容。

示例

<html lang="en" xmlns:th="http://www.thymeleaf.org">

 

user-data.html

示例

<html xmlns:th="https://thymeleaf.org">  
<table>  
<tr>  
<td><h4>User Name: </h4></td>  
<td><h4 th:text="${user.name}"></h4></td>  
</tr>  
<tr>  
<td><h4>Email ID: </h4></td>  
<td><h4 th:text="${user.email}"></h4></td>  
</tr>  
</table>  
</html>

 

步驟12: 類似地，在文件夾模板中創(chuàng)建一個   HTML 文件。我們創(chuàng)建了一個名為   index 的HTML文件。

index.html

示例

<html lang="en">  
<head>  
<title>Index Page</title>  
</head>  
<body>  
<form action="save" method="post">  
<table>  
<tr>  
<td><label for="user-name">User Name</label></td>  
<td><input type="text" name="name"></input></td>  
 </tr>  
<tr>  
<td><label for="email">Email</label></td>  
<td><input type="text" name="email"></input></td>  
</tr>  
<tr>  
<td></td>  
<td><input type="submit" value="Submit"></input></td>  
</tr>  
</table>  
</form>  
</body>  
</html>

 

步驟13: 打開   application.properties 文件并在其中添加以下屬性。

application.properties

示例

spring.thymeleaf.cache=false
spring.thymeleaf.suffix: .html

 

創(chuàng)建所有文件，文件夾和包后，項目目錄如下所示:

讓我們運行應用程序。

步驟14: 打開   SpringBootThymeleafViewExampleApplication.java 文件并以Java應用程序。

SpringBootThymeleafViewExampleApplication.java

示例

package com.nhooo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringBootThymeleafViewExampleApplication 
{
public static void main(String[] args) 
{
SpringApplication.run(SpringBootThymeleafViewExampleApplication.class, args);
}
}

 

步驟15: 現(xiàn)在，打開瀏覽器并調用URL http://localhost:8080。它顯示輸出，如下所示。

提供  用戶名和  電子郵件，然后單擊  提交按鈕。

點擊  提交按鈕，URL更改為http://localhost: 8080/save并顯示顯示用戶數(shù)據(jù)，如下所示。

在本節(jié)中，我們討論了Thymeleaf視圖。如果要使視圖更具吸引力，可以添加   CSS 和   JS 文件。這些文件必須位于   src/main/resources/static 文件夾下。