Лекции
Начать
Начать обучение
JavaRush /Курсы /Модуль 5. Spring /Шаблонизаторы в Spring MVC: Thymeleaf

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

Модуль 5. Spring
7 уровень , 6 лекция
Открыта

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

*Название "Thymeleaf" произошло от слова *thyme (чабрец) и несёт посыл "легкости и утонченности" в шаблоны.

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

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

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

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

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

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

Telegram 

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

Используем Java 9+ метод List.of(...) для упрощения.

Шаблон (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>
Используем th:action и th:field для автоматической привязки к модели через объект student.

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

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

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

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

Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ