1. 引言
在本教程中，我們將探討 Thymeleaf 中的變量。我們將創建一個 Spring Boot 示例，該示例將檢索一份 Baeldung 文章列表並在 Thymeleaf HTML 模板中顯示這些文章。
2. Maven 依賴
為了使用 Thymeleaf，我們需要添加以下 Maven 依賴：spring-boot-starter-thymeleaf 和 spring-boot-starter-web。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>3. Web 控制器
首先，我們將創建一個帶有 GET 端點的 Web 控制器，該端點返回一個包含 Baeldung 文章列表的頁面。
該使用 @GetMapping</em/> 標註的方法將接收一個參數——Model</em/>。它包含所有可以進一步在 Thymeleaf 模板中使用的全局變量。在我們的例子中，模型將僅包含一個參數——文章列表。
Article</em/> 類將包含兩個 String</em/> 字段，name</em/> 和 url</em/>：
public class Article {
private String name;
private String url;
// constructor, getters and setters
}我們的控制器方法的返回值應為所需的 Thymeleaf 模板名稱。該名稱應與位於 src/resource/template 目錄下的 HTML 文件對應。 在我們的例子中，它將是 src/resource/template/articles-list.html。
讓我們快速瞭解一下我們的 Spring 控制器：
@Controller
@RequestMapping("/api/articles")
public class ArticlesController {
@GetMapping
public String allArticles(Model model) {
model.addAttribute("articles", fetchArticles());
return "articles-list";
}
private List<Article> fetchArticles() {
return Arrays.asList(
new Article(
"Introduction to Using Thymeleaf in Spring",
"https://www.baeldung.com/thymeleaf-in-spring-mvc"
),
// a few other articles
);
}
}運行應用程序後，文章頁面將位於 http://localhost:8080/articles。
4. Thymeleaf 模板
現在，讓我們進入 Thymeleaf HTML 模板。它應該具有標準的 HTML 文檔結構，只需添加 Thymeleaf 命名空間定義：
<html xmlns:th="http://www.thymeleaf.org">我們將在此作為模板，在後續示例中使用，其中我們將僅替換 在 Thymeleaf 模板中，有兩 種方式可以定義變量。第一種方法是在迭代數組時，選取單個元素： 因此，我們會得到一個包含多個 另一種方法是基於另一個變量定義一個新的變量。例如，我們可以獲取 我們也可以創建一個新的變量，僅存儲文章的名稱： 在上述示例中，${article.name} 和 ${articleName} 片段可替換。 此外，還可以定義多個變量。例如，我們可以創建兩個單獨的變量來存儲文章名稱和 URL： 傳遞給控制器中 Model 的變量具有全局作用域。這意味着它們可以在我們 HTML 模板的任何位置使用。 另一方面，在 HTML 模板中定義的變量具有局部作用域。 它們只能在它們被定義的元素的範圍內使用。 例如，以下代碼在 另一方面，當我們嘗試在另一個 編譯時我們會遇到異常，提示 firstArticle 為 null。 這是因為 如果仍然需要在 還可以覆蓋給定作用域中變量的值： 在上述示例中，我們重新定義了 articles 變量，使其僅包含兩個首元素。 請注意，在 mainDiv 之外，articles 變量仍將保持在控制器中傳入的原始值。 在本教程中，我們學習瞭如何在 Thymeleaf 中定義和使用變量。<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Variables</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<main>
...
</main>
</body>
</html>5. 定義變量
<div th:each="article : ${articles}">
<a th:text="${article.name}" th:href="${article.url}"></a>
</div><div> 元素的 <div>，這些元素對應於 articles 變量中的文章數量。articles 數組的第一個元素：<div th:with="firstArticle=${articles[0]}">
<a th:text="${firstArticle.name}" th:href="${firstArticle.url}"></a>
</div><div th:each="article : ${articles}", th:with="articleName=${article.name}">
<a th:text="${articleName}" th:href="${article.url}"></a>
</div><div th:each="article : ${articles}" th:with="articleName=${article.name}, articleUrl=${article.url}">
<a th:text="${articleName}" th:href="${articleUrl}"></a>
</div>6. 變量作用域
<em >a</em > 元素在 <em >firstDiv</em > 元素內時是正確的：<div id="firstDiv" th:with="firstArticle=${articles[0]}">
<a th:text="${firstArticle.name}" th:href="${firstArticle.url}"></a>
</div>div 中使用 firstArticle 時：<div id="firstDiv" th:with="firstArticle=${articles[0]}">
<a th:text="${firstArticle.name}" th:href="${firstArticle.url}"></a>
</div>
<div id="secondDiv">
<h2 th:text="${firstArticle.name}"></h2>
</div>org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'name' cannot be found on null<h2> 元素試圖使用在 firstDiv 中定義的變量，導致該變量作用域超出範圍。secondDiv 中使用 firstArticle 變量，則需要在 secondDiv 中重新定義它，或者將這兩個 div 標籤包裹在一個共同的元素中，並在該元素中定義 firstArticle。7. 修改變量的值
<div id="mainDiv" th:with="articles = ${ { articles[0], articles[1] } }">
<div th:each="article : ${articles}">
<a th:text="${article.name}" th:href="${article.url}"></a>
</div>
</div>8. 結論
