У цій лекції ми звернемо увагу на практичне застосування Thymeleaf у додатку Spring MVC. Ми створимо динамічні веб-сторінки за допомогою Thymeleaf, а також навчимося генерувати HTML-сторінки з даними, які отримані з нашого контролера. Готуйтеся, сьогодні буде багато коду, трошки магії і трохи про те, як веб-сервер робить "фокуси", перетворюючи запити на красиві сторінки.
Підключення Thymeleaf у Spring MVC проект
Щоб почати використовувати Thymeleaf, треба додати відповідну залежність у наш проект. Ми припускаємо, що ви використовуєте Maven. Якщо ваш проект на Gradle, додайте аналогічну залежність.
Додавання Thymeleaf у pom.xml
<dependencies>
<!-- Spring Boot Starter for Thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>3.1.0</version> <!-- Використовуйте актуальну версію -->
</dependency>
</dependencies>
Після цього Maven скачає всі необхідні бібліотеки, і ваш проект буде готовий до роботи з Thymeleaf.
Налаштування Thymeleaf
Spring Boot автоматично налаштовує Thymeleaf для роботи з шаблонами, які потрібно розмістити в папці resources/templates. Якщо ви створюєте проект на Spring Framework без Spring Boot, доведеться самостійно прописати конфігурацію для обробки шаблонів.
Для спрощення ми використовуємо Spring Boot, тож вся конфігурація вже готова "з коробки".
Перша аплікація з Thymeleaf
Крок 1: Створимо контролер
Почнемо зі створення контролера. Наприклад, ми хочемо вивести список студентів на веб-сторінці.
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.List;
@Controller
public class StudentController {
@GetMapping("/students")
public String getStudents(Model model) {
// Створюємо список студентів
List<String> students = Arrays.asList("Іван Іванов", "Марія Петрова", "Олексій Сидоров");
// Додаємо список у модель
model.addAttribute("students", students);
// Повертаємо ім'я шаблона (students.html)
return "students";
}
}
Що тут відбувається:
- Ми створимо ендпоінт
/students, який обробляє GET-запити. - У методі створюється список студентів і передається в об'єкт
Model. Цей об'єкт дозволяє передавати дані з контролера в шаблон. - Метод повертає ім'я файлу шаблона (
students.html). Spring MVC автоматично шукає шаблон у папціresources/templates.
Крок 2: Створимо шаблон students.html
Створіть у папці resources/templates файл students.html. У ньому буде HTML з невеличкими елементами Thymeleaf.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Список студентів</title>
</head>
<body>
<h1>Список студентів</h1>
<ul>
<!-- Thymeleaf-вираз для відображення даних -->
<li th:each="student : ${students}" th:text="${student}"></li>
</ul>
</body>
</html>
Пояснення:
xmlns:th="http://www.thymeleaf.org"- декларація простору імен для Thymeleaf.th:each="student : ${students}"- цикл, у якому ми перебираємо кожного студента зі спискуstudents.th:text="${student}"- виводимо поточного студента в HTML.
Крок 3: Запуск аплікації
Запустіть Spring Boot аплікацію. Перейдіть у браузері на http://localhost:8080/students. Ви побачите динамічно згенеровану сторінку зі списком студентів.
Робота з динамічними даними
Thymeleaf підтримує багато виразів для роботи з даними. Ось кілька прикладів:
Вирази Thymeleaf
| Синтаксис | Опис |
|---|---|
${} |
Вираз для доступу до змінних моделі (${student} для доступу до об'єкта студента) |
th:text |
Встановлює текст для елемента (<p> -> <p>Текст</p>) |
th:href |
Задає атрибут посилання (<a> -> <a href="URL">) |
th:if, th:unless |
Умови відображення HTML (th:if="${isLoggedIn}") |
Шаблон з динамічними посиланнями
Ось приклад, де ми додаємо посилання для кожного студента:
<ul>
<li th:each="student, iterStat : ${students}">
<a th:href="@{'/students/' + ${iterStat.index}}" th:text="${student}"></a>
</li>
</ul>
Тут iterStat.index використовується для додавання індексу елемента в посилання.
Практика: створення інтерфейсу для сутностей
Тепер давайте зробимо server-side рендеринг для сутності, яка була додана раніше в нашому додатку.
Крок 1: Створюємо сутність Book
package com.example.demo.model;
public class Book {
private String title;
private String author;
public Book(String title, String author) {
this.title = title;
this.author = author;
}
public String getTitle() {
return title;
}
public String getAuthor() {
return author;
}
}
Крок 2: Контролер для книжок
package com.example.demo.controller;
import com.example.demo.model.Book;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;
@Controller
public class BookController {
@GetMapping("/books")
public String getBooks(Model model) {
// Список книг
List<Book> books = List.of(
new Book("Війна і мир", "Лев Толстой"),
new Book("Злочин і кара", "Федір Достоєвський"),
new Book("Майстер і Маргарита", "Михайло Булгаков")
);
model.addAttribute("books", books);
return "books";
}
}
Крок 3: Шаблон для книжок books.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Список книг</title>
</head>
<body>
<h1>Список книг</h1>
<table>
<tr>
<th>Назва</th>
<th>Автор</th>
</tr>
<tr th:each="book : ${books}">
<td th:text="${book.title}"></td>
<td th:text="${book.author}"></td>
</tr>
</table>
</body>
</html>
Поради та загальні помилки
- Правильно вказуйте ім'я шаблона. Коли повертається рядок з контролера, вона має відповідати імені файлу в папці
templates. Якщо файл відсутній, ви отримаєте помилкуTemplate not found. - Простір імен Thymeleaf. Не забувайте додавати
xmlns:th="http://www.thymeleaf.org"у кореневий елемент HTML. Без цього Thymeleaf-директиви не будуть працювати. - Робота з колекціями. Якщо передаєте колекцію в модель, переконайтеся, що вона не
null. В іншому випадку ви отримаєте помилку під час ітерації.
Тепер у вас є всі інструменти для створення динамічно згенерованих HTML-сторінок з Thymeleaf. Використовуйте ці знання для покращення вашого додатку! 🎉
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ