1. Overview

1.概述

In this quick tutorial, we’re going to see how we can use arrays in Thymeleaf. For easy setup, we’re going to use a spring-boot initializer to bootstrap our application.

在这个快速教程中，我们将看到如何在Thymeleaf中使用数组。为了便于设置，我们将使用spring-boot初始化器来引导我们的应用程序。

The basics of Spring MVC and Thymeleaf can be found here.

Spring MVC和Thymeleaf的基础知识可以在这里找到。

2. Thymeleaf Dependency

2.百里香依赖症

In our pom.xml file, the only dependencies we need to add are SpringMVC and 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. The Controller

3.控制器

For simplicity, let’s use a controller with only one method which handles GET requests.

为了简单起见，让我们使用一个只有一个方法的控制器，处理GET请求。

This responds by passing an array to the model object which will make it accessible to the view:

这通过向模型对象传递一个数组来响应，这将使它能够被视图访问。

@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. The View

4.观点

In the view page, we’re going to access the array continents by the name we pass it with (continents) from our controller above.

在视图页面中，我们将通过从我们上面的控制器中传递的名称（continents）访问数组continents。

4.1. Properties and Indexes

4.1.属性和索引

One of the first property we’re going to inspect is the length of the array. This is how we can check it:

我们要检查的第一个属性之一是数组的长度。我们可以这样来检查它。

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

And looking at the snippet of code above, which is from the view page, we should notice the use of the keyword th:text. We used it to print the value of the variable inside the curly braces, in this case, the length of the array.

看看上面的代码片段，这是来自视图页面，我们应该注意到关键字th:text的使用。我们用它来打印大括号内的变量的值，在这种情况下，就是数组的长度。

Consequently, we access the value of each element of the array continents by its index just like we use to do within our normal Java code:

因此，我们通过索引访问数组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>

As we’ve seen in the above code fragment, each element is accessible through its index. We can go here to learn more about expressions in Thymeleaf.

正如我们在上面的代码片段中所看到的，每个元素都可以通过其索引进行访问。我们可以去这里了解更多关于Thymeleaf中的表达式。

4.2. Iteration

4.2.迭代

Similarly, we can iterate over the elements the array sequentially.

同样地，我们可以依次迭代数组中的元素。

In Thymeleaf, here’s how we can achieve that:

在Thymeleaf，我们可以通过以下方式实现这一目标。

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

When using th:each keyword to iterate over the element of an array, we’re not restricted to using list tags only. We can use any HTML tag capable of displaying text on the page. For example:

当使用th:each关键字来迭代一个数组的元素时，我们并不限于只使用列表标签。我们可以使用任何能够在页面上显示文本的HTML标签。比如说。

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

In the above code snippet, each element is going to be displayed on its own separate <h4></h4> tag.

在上面的代码片段中，每个元素都将被显示在它自己单独的<h4></h4>标签上。

4.3. Utility Functions

4.3.实用功能

Finally, we’re going to employ the use of utility class functions to examine some other properties of the array.

最后，我们将采用实用类函数的使用来检查数组的一些其他属性。

Let’s take a look at this:

让我们来看看这个。

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

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

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

We query the length of the array first, and then check whether Europe is an element of the array continents.

我们首先查询数组的长度，然后检查Europe是否是数组continents.中的一个元素。

Lastly, we check that the array continents is empty or not.

最后，我们检查数组大陆是否为空。

5. Conclusion

5.总结

In this article, we’ve learned how to work with an array in Thymeleaf by checking its length and accessing its elements using an index. We have also learned how to iterate over its elements within Thymeleaf.

在这篇文章中，我们已经学会了如何在Thymeleaf中通过检查其长度和使用索引访问其元素来处理数组。我们还学习了如何在Thymeleaf中对其元素进行迭代。

Lastly, we have seen the use of utility functions to inspect other properties of an array.

最后，我们已经看到使用实用函数来检查数组的其他属性。

And, as always, the complete source code of this article can be found over on Github.

而且，像往常一样，本文的完整源代码可以在Github上找到over。