Thymeleaf 數組處理

1. 概述

在本快速教程中，我們將學習如何使用數組在 Thymeleaf 中進行操作。為了簡化設置，我們將使用 Spring Boot 初始化器來啓動我們的應用程序。

Spring MVC 和 Thymeleaf 的基本概念可以在這裏找到。

2. Thymeleaf 依賴

在我們的 pom.xml 文件中，我們只需要添加 SpringMVC 和 Thymeleaf 兩個依賴：

<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. 控制器

為了簡化起見，我們使用一個僅包含一個方法，用於處理 GET 請求的控制器。

它通過將數組傳遞給模型對象來響應，從而使該數組可供視圖訪問：

@Controller
public class ThymeleafArrayController {
 
    @GetMapping("/arrays")
    public String arrayController(Model model) {
        String[] continents = {
          "Africa", "Antarctica", "Asia", "Australia", 
          "Europe", "North America", "Sourth America"
        };
        
        model.addAttribute("continents", continents);

        return "continents";
    }
}

4. 視圖

在視圖頁面中，我們將通過傳遞給它的名稱（continents）訪問數組 continents，該操作由我們上述的控制器執行。

4.1. 屬性和索引

要檢查數組的長度，這是我們首先要檢查的屬性之一。檢查方法如下：

<p>...<span th:text="${continents.length}"></span>...</p>

查看上方代碼片段（來自視圖頁面），我們應該注意到使用了關鍵詞 th:text。我們將其用於打印花括號內的變量值，在本例中是數組的長度。

因此，我們通過其索引訪問數組continents的每個元素，就像我們在正常 Java 代碼中那樣：

<ol>
    <li th:text="${continents[2]}"></li>
    <li th:text="${continents[0]}"></li>
    <li th:text="${continents[4]}"></li>
    <li th:text="${continents[5]}"></li>
    <li th:text="${continents[6]}"></li>
    <li th:text="${continents[3]}"></li>
    <li th:text="${continents[1]}"></li>
</ol>

正如我們上面代碼片段中所見，每個元素都可以通過其索引訪問。我們可以在這裏瞭解更多關於 Thymeleaf 表達式的信息。

4.2. 迭代

同樣，我們可以按順序遍歷數組的元素。

在 Thymeleaf 中，以下是如何實現的：

<ul th:each="continet : ${continents}">
    <li th:text="${continent}"></li>
</ul>

當使用 `th:each 關鍵字迭代數組中的元素時，我們並不侷限於使用列表標籤。我們可以使用任何能夠向頁面上顯示文本的 HTML 標籤。例如：

<h4 th:each="continent : ${continents}" th:text="${continent}"></h4>

在上面的代碼片段中，每個元素都將分別顯示在獨立的 <h4></h4> 標籤上。

4.3. 數組函數

接下來，我們將使用實用類函數來研究數組的其他屬性。

讓我們來查看一下。首先，我們查詢數組的長度：

<p>The greatest <span th:text="${#arrays.length(continents)}"></span> continents.</p>

然後檢查歐洲是否是名為 continents 的數組中的一個元素。

<p>Europe is a continent: <span th:text="${#arrays.contains(continents, 'Europe')}"></span>.</p>

最後，我們檢查數組 continents 是否為空。

<p>Array of continents is empty <span th:text="${#arrays.isEmpty(continents)}"></span>.</p>

4.4. 列表函數

類似於 #arrays.length 對數組的用法，我們也有 #lists.size 實用方法。然而，#list.size 與數組不同，因為它也適用於列表。

對於列表，我們使用不同的控制器來響應 GET 請求，例如，端點 /lists/size 返回列表的大小：

@Controller
@RequestMapping("/lists")
public class ListsController {

    @GetMapping("/size")
    public String usingSize(Model model) {
        model.addAttribute("myList", getColors());
        return "lists/size";
    }
}

然後我們將其在我們的模板中使用，並引用myList 模型屬性：

<span th:text="${#lists.size(myList)}"></span>

我們可以使用 JUnit 測試來驗證列表的大小：

@Test
public void whenCalledSize_ThenReturnsSize() throws Exception {
    mockMvc.perform(MockMvcRequestBuilders.get("/lists/size"))
      .andExpect(status().isOk())
      .andExpect(content().string(containsString("size: <span>4</span>")));
}

#lists.size 期望值已初始化且非 null。如果不確定，可以在模板中檢查是否為 null：

<p th:if="${myList!= null}" th:text="${#lists.size(myList)}">List Size</p>
<p th:if="${myList == null}">List is Null</p>

5. 結論

在本文中，我們學習瞭如何使用 Thymeleaf 檢查數組的長度並使用索引訪問其元素。我們還學習瞭如何在 Thymeleaf 中迭代數組的元素。

最後，我們看到了如何使用實用函數來檢查數組的其他屬性。

知識庫 / Spring / Spring MVC RSS 訂閱