當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

js文件中怎么使用thymeleaf标签_007、Spring Boot集成Thymeleaf模板引擎

發布時間：2025/3/15 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 js文件中怎么使用thymeleaf标签_007、Spring Boot集成Thymeleaf模板引擎小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. Thymeleaf 介紹

Thymeleaf 是適用于 Web 和獨立環境的現代服務器端 Java 模板引擎。
Thymeleaf 的主要目標是為您的開發工作流程帶來優雅的自然模板 - 可以在瀏覽器中正確顯示的HTML，也可以用作靜態原型，從而在開發團隊中實現更強大的協作。

以上翻譯自 Thymeleaf 官方網站。傳統的 JSP+JSTL 組合是已經過去了，Thymeleaf 是現代服務端的模板引擎，與傳統的 JSP 不同，Thymeleaf 可以使用瀏覽器直接打開，因為可以忽略掉拓展屬性，相當于打開原生頁面，給前端人員也帶來一定的便利。

什么意思呢？就是說在本地環境或者有網絡的環境下，Thymeleaf 均可運行。由于 thymeleaf 支持 html 原型，也支持在 html 標簽里增加額外的屬性來達到 “模板+數據” 的展示方式，所以美工可以直接在瀏覽器中查看頁面效果，當服務啟動后，也可以讓后臺開發人員查看帶數據的動態頁面效果。比如：

<div class="ui right aligned basic segment"><div class="ui orange basic label" th:text="${blog.flag}">靜態原創信息</div> </div> <h2 class="ui center aligned header" th:text="${blog.title}">這是靜態標題</h2>

類似與上面這樣，在靜態頁面時，會展示靜態信息，當服務啟動后，動態獲取數據庫中的數據后，就可以展示動態數據，th:text 標簽是用來動態替換文本的，這會在下文說明。該例子說明瀏覽器解釋 html 時會忽略 html 中未定義的標簽屬性（比如 th:text），所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示數據。

2. 依賴導入

在 Spring Boot 中使用 thymeleaf 模板需要引入依賴，可以在創建項目工程時勾選 Thymeleaf，也可以創建之后再手動導入，如下：

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

另外，在 html 頁面上如果要使用 thymeleaf 模板，需要在頁面標簽中引入：

3. Thymeleaf相關配置

因為 Thymeleaf 中已經有默認的配置了，我們不需要再對其做過多的配置，有一個需要注意一下，Thymeleaf 默認是開啟頁面緩存的，所以在開發的時候，需要關閉這個頁面緩存，配置如下。

spring:thymeleaf:cache: false #關閉緩存

否則會有緩存，導致頁面沒法及時看到更新后的效果。比如你修改了一個文件，已經 update 到 tomcat 了，但刷新頁面還是之前的頁面，就是因為緩存引起的。

4. Thymeleaf 的使用

4.1 訪問靜態頁面

這個和 Thymeleaf 沒啥關系，應該說是通用的，我把它一并寫到這里的原因是一般我們做網站的時候，都會做一個 404 頁面和 500 頁面，為了出錯時給用戶一個友好的展示，而不至于一堆異常信息拋出來。Spring Boot 中會自動識別模板目錄（templates/）下的 404.html 和 500.html 文件。我們在 templates/ 目錄下新建一個 error 文件夾，專門放置錯誤的 html 頁面，然后分別打印些信息。以 404.html 為例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body>這是404頁面 </body> </html>

我們再寫一個 controller 來測試一下 404 和 500 頁面：

@Controller @RequestMapping("/thymeleaf") public class ThymeleafController {@RequestMapping("/test404")public String test404() {return "index";}@RequestMapping("/test500")public String test500() {int i = 1 / 0;return "index";} }當我們在瀏覽器中輸入 localhost:8080/thymeleaf/test400 時，故意輸入錯誤，找不到對應的方法，就會跳轉到 404.html 顯示。
當我們在瀏覽器中輸入 localhost:8088/thymeleaf/test505 時，會拋出異常，然后會自動跳轉到 500.html 顯示。

【注】這里有個問題需要注意一下，前面的課程中我們說了微服務中會走向前后端分離，我們在 Controller 層上都是使用的 @RestController 注解，自動會把返回的數據轉成 json 格式。但是在使用模板引擎時，Controller 層就不能用 @RestController 注解了，因為在使用 thymeleaf 模板時，返回的是視圖文件名，比如上面的 Controller 中是返回到 index.html 頁面，如果使用 @RestController 的話，會把 index 當作 String 解析了，直接返回到頁面了，而不是去找 index.html 頁面，大家可以試一下。所以在使用模板時要用 @Controller 注解。

4.2 Thymeleaf 中處理對象

我們來看一下 thymeleaf 模板中如何處理對象信息，假如我們在做個人博客的時候，需要給前端傳博主相關信息來展示，那么我們會封裝成一個博主對象，比如：

public class Blogger {private Long id;private String name;private String pass;// 省去set和get }

然后在controller層中初始化一下：

@GetMapping("/getBlogger") public String getBlogger(Model model) {Blogger blogger = new Blogger(1L, "倪升武", "123456");model.addAttribute("blogger", blogger);return "blogger"; }

我們先初始化一個 Blogger 對象，然后將該對象放到 Model 中，然后返回到 blogger.html 頁面去渲染。接下來我們再寫一個 blogger.html 來渲染 blogger 信息：

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <html lang="en"> <head><meta charset="UTF-8"><title>博主信息</title> </head> <body> <form action="" th:object="${blogger}" >用戶編號：<input name="id" th:value="${blogger.id}"/><br>用戶姓名：<input type="text" name="username" th:value="${blogger.getName()}" /><br>登陸密碼：<input type="text" name="password" th:value="*{pass}" /> </form> </body> </html>

可以看出，在 thymeleaf 模板中，使用 th:object="${}" 來獲取對象信息，然后在表單里面可以有三種方式來獲取對象屬性。如下：

使用 th:value="*{屬性名}" 使用 th:value="${對象.屬性名}"，對象指的是上面使用 th:object 獲取的對象使用 th:value="${對象.get方法}"，對象指的是上面使用 th:object 獲取的對象

可以看出，在 Thymeleaf 中可以像寫 java 一樣寫代碼，很方便。我們在瀏覽器中輸入 localhost:8080/thymeleaf/getBlogger 來測試一下數據：

4.3 Thymeleaf 中處理 List

處理 List 的話，和處理上面介紹的對象差不多，但是需要在 thymeleaf 中進行遍歷。我們先在 Controller 中模擬一個 List。

@GetMapping("/getList") public String getList(Model model) {Blogger blogger1 = new Blogger(1L, "倪升武", "123456");Blogger blogger2 = new Blogger(2L, "達人課", "123456");List<Blogger> list = new ArrayList<>();list.add(blogger1);list.add(blogger2);model.addAttribute("list", list);return "list"; }

接下來我們寫一個 list.html 來獲取該 list 信息，然后在 list.html 中遍歷這個list。如下：

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <html lang="en"> <head><meta charset="UTF-8"><title>博主信息</title> </head> <body> <form action="" th:each="blogger : ${list}" >用戶編號：<input name="id" th:value="${blogger.id}"/><br>用戶姓名：<input type="text" name="password" th:value="${blogger.name}"/><br>登錄密碼：<input type="text" name="username" th:value="${blogger.getPass()}"/> </form> </body> </html>

可以看出，其實和處理單個對象信息差不多，Thymeleaf 使用 th:each 進行遍歷，${} 取 model 中傳過來的參數，然后自定義 list 中取出來的每個對象，這里定義為 blogger。表單里面可以直接使用 ${對象.屬性名} 來獲取 list 中對象的屬性值，也可以使用 ${對象.get方法} 來獲取，這點和上面處理對象信息是一樣的，但是不能使用 *{屬性名} 來獲取對象中的屬性，thymeleaf 模板獲取不到。

4.4 其他常用 thymeleaf 操作

我們來總結一下 thymeleaf 中的一些常用的標簽操作，如下：

| 標簽 | 功能 | 例子 | | ------------ | --------------------- | ------------------------------------------------------------ | | th:value | 給屬性賦值 | <input th:value="${blog.name}" /> | | th:style | 設置樣式 | th:style="'display:'+@{(${sitrue}?'none':'inline-block')} + ''" | | th:onclick | 點擊事件 | th:onclick="'getInfo()'" | | th:if | 條件判斷 | <a th:if="${userId == collect.userId}" > | | th:href | 超鏈接 | <a th:href="@{/blogger/login}">Login</a> /> | | th:unless | 條件判斷和th:if相反 | <a th:href="@{/blogger/login}" th:unless=${session.user != null}>Login</a> | | th:switch | 配合th:case | <div th:switch="${user.role}"> | | th:case | 配合th:switch | <p th:case="'admin'">administator</p> | | th:src | 地址引入 | <img alt="csdn logo" th:src="@{/img/logo.png}" /> | | th:action | 表單提交的地址 | <form th:action="@{/blogger/update}"> |

Thymeleaf 還有很多其他用法，這里就不總結了，具體的可以參考Thymeleaf的官方文檔（v3.0）。主要要學會如何在 Spring Boot 中去使用 thymeleaf，遇到對應的標簽或者方法，查閱官方文檔即可。

5. 總結

Thymeleaf 在 Spring Boot 中使用非常廣泛，本節課主要分析了 thymeleaf 的優點，以及如何在 Spring Boot 中集成并使用 thymeleaf 模板，包括依賴、配置，相關數據的獲取、以及一些注意事項等等。最后列舉了一些 thymeleaf 中常用的標簽，在實際項目中多使用，多查閱就能熟練掌握，thymeleaf 中的一些標簽或者方法不用死記硬背，用到什么去查閱什么，關鍵是要會在 Spring Boot 中集成，用的多了就熟能生巧。

課程源代碼下載地址：戳我下載

今天就說這么多，如果本文對您有一點幫助，希望能得到您一個點贊支持我一下~謝謝！

總結

以上是生活随笔為你收集整理的js文件中怎么使用thymeleaf标签_007、Spring Boot集成Thymeleaf模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux系统怎么删除打印机,解决LIN
下一篇： channelsftp的put_JSch