當(dāng)開(kāi)發(fā)Spring Boot項(xiàng)目時(shí)，我們經(jīng)常會(huì)使用Thymeleaf作為模板引擎來(lái)渲染前端頁(yè)面。本文將介紹如何在HTML文件中引入Thymeleaf，并使用其自動(dòng)提示功能。 查看Thymeleaf的

當(dāng)開(kāi)發(fā)Spring Boot項(xiàng)目時(shí)，我們經(jīng)常會(huì)使用Thymeleaf作為模板引擎來(lái)渲染前端頁(yè)面。本文將介紹如何在HTML文件中引入Thymeleaf，并使用其自動(dòng)提示功能。

查看Thymeleaf的文檔

在開(kāi)始之前，我們首先需要查看Thymeleaf的官方文檔，以了解其基本用法和特性。可以在文檔中找到示例代碼，其中在HTML標(biāo)簽內(nèi)部有一個(gè)屬性【xmlns:th】，如下圖所示：

添加Thymeleaf屬性到HTML文件

接下來(lái)，我們需要將示例中的【xmlns:th】屬性添加到我們的項(xiàng)目的HTML文件中。這樣，在該HTML文件中，我們就可以使用Thymeleaf的自動(dòng)提示功能了，如下圖所示：

在Controller中傳入?yún)?shù)

為了在前端獲取后端的值，我們需要在自己的Controller中設(shè)置一個(gè)Map變量，并將其傳遞給Thymeleaf。示例如下：

在HTML文件中獲取后端的值

在HTML文件中，我們可以使用【th:text】屬性通過(guò)【${}】方式來(lái)獲取后端傳遞的值。示例如下：

啟動(dòng)Spring Boot項(xiàng)目并測(cè)試

現(xiàn)在，我們可以啟動(dòng)Spring Boot項(xiàng)目，并在瀏覽器中輸入對(duì)應(yīng)的地址來(lái)測(cè)試前端是否成功獲取后端的值。示例如下：

Thymeleaf渲染效果

我們可以進(jìn)一步進(jìn)行實(shí)驗(yàn)，在HTML文件的傳值標(biāo)簽中添加一段文字。然后，通過(guò)瀏覽器直接打開(kāi)該HTML文件，我們可以看到瀏覽器顯示的是標(biāo)簽中的文字，而不是Thymeleaf渲染后的結(jié)果。這是因?yàn)橹苯哟蜷_(kāi)HTML文件時(shí)，沒(méi)有經(jīng)過(guò)Thymeleaf渲染。示例如下：

但是，如果我們通過(guò)瀏覽器訪問(wèn)經(jīng)過(guò)Thymeleaf渲染后的HTML文件，就會(huì)看到后端傳遞的值被正確替換了標(biāo)簽中的內(nèi)容。示例如下：

通過(guò)以上步驟，我們可以在Spring Boot項(xiàng)目中成功引入Thymeleaf并使用其自動(dòng)提示功能，實(shí)現(xiàn)前后端數(shù)據(jù)的交互和渲染。