JavaRush /Курси /Модуль 5. Spring /Шаблонізатори в Spring MVC: Thymeleaf

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

Модуль 5. Spring

Рівень 7 , Лекція 6

Відкрита

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

*Назва "Thymeleaf" походить від слова *thyme (чебрець) і несе посил "легкості й вишуканості" у шаблони.

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

Використовуємо 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 пов'язані з:

Відсутністю залежностей. Перевірте, чи додано залежність spring-boot-starter-thymeleaf.
Неправильною структурою каталогу. Переконайтесь, що HTML-шаблони знаходяться в папці resources/templates.
Помилкою в синтаксисі Thymeleaf. Перевірте правильність написання атрибутів th:*.

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

Попередня Попередня лекція

Наступна Наступна лекція

Коментарі

ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ