Шаблонизаторы в Spring MVC: Thymeleaf

Thymeleaf — это современный Java-шаблонизатор, который предоставляет удобную и гибкую возможность создавать динамические HTML-страницы. Он интегрируется с Spring MVC и поддерживает двухсторонний рендеринг: HTML-файлы могут использоваться как статичные шаблоны (например, для тестирования фронтенда) и как динамически генерируемые страницы на сервере.

Thymeleaf — умный помощник в веб-разработке

Знаете, почему разработчики так любят Thymeleaf? Он делает HTML-код живым и динамичным. Представьте: вы пишете обычный HTML и просто добавляете к нему специальные атрибуты — вот и весь секрет. Даже если сервер не работает, браузер всё равно покажет ваш код без ошибок.

А ещё Thymeleaf хорош тем, что подойдёт для любого проекта. Неважно, что вы делаете, простую страничку или сложный портал. И да, со Spring он дружит прямо из коробки!

Хотите понять, как это работает? Это похоже на создание игры. У вас есть HTML-шаблон — это как каркас игры. А данные — как игровые ресурсы. Thymeleaf берёт этот каркас и оживляет его, прямо как игровой движок. Он размещает данные там, где нужно, добавляет эффекты и превращает простой код в полноценную динамичную страницу.

Подключение Thymeleaf в проект Spring MVC

Зависимости Maven. Для начала нужно подключить Thymeleaf к вашему проекту. Добавим в pom.xml следующую зависимость:

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

Если вы используете Gradle, добавьте следующую строку в build.gradle:

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Структура проекта. После подключения Thymeleaf в проекте появится новый каталог для шаблонов. По умолчанию это:

src/main/resources/templates

Все ваши HTML-шаблоны должны быть сохранены именно в этом каталоге. Spring Boot автоматически "увидит" их и подгрузит.

Основы синтаксиса Thymeleaf

Расширение HTML с помощью атрибутов. Thymeleaf использует собственные атрибуты, которые начинаются с th:. Например:

• th:text — для отображения текста.
• th:href — для ссылок.
• th:each — для циклов.
• th:if/th:unless — для условий.

Простейший пример

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Привет, Thymeleaf!</title>
</head>
<body>
  <h1>Добро пожаловать, <span th:text="${username}"></span>!</h1>
</body>
</html>

Здесь th:text="${username}" заменит содержимое span на значение переменной username, переданной из контроллера.

Подключение данных из контроллера

Создадим простой контроллер, который передаст данные в шаблон.

@Controller
public class WelcomeController {

    @GetMapping("/")
    public String welcome(Model model) {
        model.addAttribute("username", "Джун Программер");
        return "welcome"; // указывает на шаблон welcome.html
    }
}

Обратите внимание:

• Мы используем объект Model, чтобы передать данные в шаблон.
• Возвращаемое значение return "welcome"; указывает на файл welcome.html в папке templates.

Пример HTML-шаблона (welcome.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Добро пожаловать</title>
</head>
<body>
  <h1>Привет, <span th:text="${username}"></span>!</h1>
</body>
</html>

Если вы откроете браузер, то увидите:

Привет, Джун Программер!

Динамические таблицы с Thymeleaf

Сделаем что-то посложнее. Например, выведите список студентов в виде таблицы.

Контроллер

@Controller
public class StudentController {

    @GetMapping("/students")
    public String listStudents(Model model) {
        List<String> students = List.of("Анна", "Иван", "Мария", "Сергей");
        model.addAttribute("students", students);
        return "students"; // шаблон students.html
    }
}

Шаблон (students.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Список студентов</title>
</head>
<body>
  <h1>Список студентов</h1>
  <table border="1">
    <thead>
    <tr>
      <th>Имя</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="student : ${students}">
      <td th:text="${student}"></td>
    </tr>
    </tbody>
  </table>
</body>
</html>

Здесь:

• th:each="student : ${students}" — выполняет цикл по коллекции students.
• Внутри цикла мы выводим имя студента через th:text="${student}".

Результат в браузере:

Список студентов
-------------------
Имя
Анна
Иван
Мария
Сергей

Условия в Thymeleaf

Иногда нужно показывать или скрывать элементы в зависимости от условий.

Пример использования th:if и th:unless

<p th:if="${isAdmin}">Добро пожаловать, администратор!</p>
<p th:unless="${isAdmin}">Добро пожаловать, пользователь!</p>

В контроллере:

model.addAttribute("isAdmin", true);

Результат. Если isAdmin = true, вы увидите:

Добро пожаловать, администратор!

Создание гиперссылок

Thymeleaf позволяет легко создавать гиперссылки с использованием пути.

Пример

<a th:href="@{/students}">Список студентов</a>

Вывод:

<a href="/students">Список студентов</a>

Использование @{} также применимо для динамических параметров:

<a th:href="@{/student/{id}(id=${studentId})}">Просмотр студента</a>

Интеграция форм с Thymeleaf

Thymeleaf поддерживает работу с HTML-формами. Это особенно полезно для сбора данных от пользователей.

Пример контроллера

@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("student", new Student());
        return "form";
    }

    @PostMapping("/form")
    public String processForm(@ModelAttribute Student student) {
        System.out.println("Получен студент: " + student);
        return "form-success";
    }
}

Шаблон формы (form.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Форма</title>
</head>
<body>
  <form action="#" th:action="@{/form}" th:object="${student}" method="post">
    Имя: <input type="text" th:field="*{name}"><br>
    Возраст: <input type="number" th:field="*{age}"><br>
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

Полезные советы и типичные ошибки

Большинство ошибок в использовании Thymeleaf связаны с:

1. Отсутствием зависимостей. Проверьте, включена ли зависимость spring-boot-starter-thymeleaf.
2. Неверной структурой каталога. Убедитесь, что HTML-шаблоны находятся в папке resources/templates.
3. Ошибка в синтаксисе Thymeleaf. Проверьте правильность написания атрибутов th:*.

Для более глубокого изучения заходите в официальную документацию Thymeleaf.