快捷導航

spring-boot-starter-thymeleaf加載外部html文件方式

更新時間：2025年02月24日 14:26:02 作者：jforgame

本文介紹了在SpringMVC中使用Thymeleaf模板引擎加載外部HTML文件的方法,以及在Spring Boot中使用Thymeleaf的基本步驟,包括引入依賴、創(chuàng)建Controller、創(chuàng)建HTML文件、參數(shù)化訪問、熱加載和熱更新文件

1.Thymeleaf介紹

Thymeleaf是一種現(xiàn)代化的服務(wù)器端Java模板引擎，用于構(gòu)建漂亮、可維護且易于測試的動態(tài)Web應(yīng)用程序。它適用于與Spring框架集成，并且可以與Spring MVC或Spring Boot等框架一起使用。

Thymeleaf模板引擎允許開發(fā)人員在HTML頁面中使用模板表達式，這些表達式可以動態(tài)地替換頁面中的內(nèi)容。它提供了豐富的表達式語法，可以從后端Java代碼中獲取動態(tài)數(shù)據(jù)，并在模板中進行顯示。

與其他模板引擎相比，Thymeleaf具有以下特點：

自然的模板語法：Thymeleaf的模板語法非常類似于HTML，易于理解和編寫。
靜態(tài)預(yù)覽：在開發(fā)過程中，可以直接在瀏覽器中預(yù)覽Thymeleaf模板，無需啟動整個應(yīng)用程序。
強大的功能：Thymeleaf提供了豐富的標簽和表達式，可以處理循環(huán)、條件判斷、國際化等常見的模板需求。
安全：Thymeleaf會對輸出的內(nèi)容進行自動轉(zhuǎn)義，以防止XSS攻擊。

2.springboot使用thymeleaf

使用spring-boot-starter-thymeleaf可以非常方便地使用thymeleaf，下面來看詳細的例子。

2.1.引入spring-boot-starter-thymeleaf依賴

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

2.2.創(chuàng)建controller

@Controller
public class H5Controller {

    @GetMapping("/external")
    public String loadExternalHtml() {
        return "index";
    }
}

在上述示例中，index()方法處理根路徑的GET請求，并返回"index"字符串。這意味著它將返回名為index.html的Thymeleaf模板。

現(xiàn)在，創(chuàng)建一個名為index.html的Thymeleaf模板，放置在src/main/resources/templates目錄下（默認的Thymeleaf模板目錄）

如果想重新定義模板目錄路徑，只需要修改application.properties文件

spring.thymeleaf.prefix=file:/F:/projects/eb/resources/html5/

2.3.創(chuàng)建簡易html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index Page</title>
</head>
<body>
    <h1>This is the index page</h1>
</body>
</html>

2.4.瀏覽器訪問

在瀏覽器輸入localhost:8080/index.html，即可看到html內(nèi)容。

2.5.參數(shù)化訪問html文件

假設(shè)Thymeleaf目錄下有很多文件，我們希望客戶端能通過參數(shù)來選擇加載某個文件，那么我們可以修改controller的代碼。

@Controller
public class H5Controller {

    @GetMapping("/external")
    public String loadExternalHtml(@RequestParam String resource) {
        return resource; 
    }

}

瀏覽器重新輸入（可以根據(jù)需要訪問特定文件）：

http://localhost:8080/external?resource=hello