Перейти к основному содержимому

Работа с массивами в Thymeleaf

· 3 мин. чтения

1. Обзор

В этом кратком руководстве мы увидим, как мы можем использовать массивы в Thymeleaf. Для простоты настройки мы собираемся использовать инициализатор spring-boot для начальной загрузки нашего приложения.

Основы Spring MVC и Thymeleaf можно найти здесь .

2. Зависимость от листьев тимьяна

В нашем файле 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. Вид

На странице просмотра мы собираемся получить доступ к массиву континентов по имени, которое мы передаем (континенты) из нашего контроллера выше .

4.1. Свойства и индексы

Одним из первых свойств, которые мы собираемся проверить, является длина массива. Вот как мы можем это проверить:

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

И глядя на приведенный выше фрагмент кода со страницы просмотра, мы должны заметить использование ключевого слова th:text . Мы использовали его для вывода значения переменной внутри фигурных скобок, в данном случае длины массива.

Следовательно, мы получаем доступ к значению каждого элемента массива континентов по его индексу точно так же, как мы это делаем в нашем обычном 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>

<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>

Сначала мы запрашиваем длину массива, а затем проверяем, является ли Европа элементом массива континентов.

Наконец, мы проверяем, пуст ли массив континентов .

5. Вывод

В этой статье мы узнали, как работать с массивом в Thymeleaf , проверяя его длину и обращаясь к его элементам с помощью индекса. Мы также научились перебирать его элементы в Thymeleaf.

Наконец, мы видели использование служебных функций для проверки других свойств массива.

И, как всегда, полный исходный код этой статьи можно найти на Github .