0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>13 сен 2024</li>
2
<ul><li>13 сен 2024</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как работать с популярным веб-шаблонизатором.</p>
4
</ul><p>Рассказываем, как работать с популярным веб-шаблонизатором.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>При загрузке веб-приложения пользователи часто видят на экране разные данные. Например, заходя в свой личный кабинет в соцсети, пользователь будет видеть персональную информацию: никнейм, имя, возраст, электронную почту и аватарку. Эти данные загружаются из базы на сервере и динамически выводятся пользователю в момент загрузки HTML-страницы.</p>
7
<p>При загрузке веб-приложения пользователи часто видят на экране разные данные. Например, заходя в свой личный кабинет в соцсети, пользователь будет видеть персональную информацию: никнейм, имя, возраст, электронную почту и аватарку. Эти данные загружаются из базы на сервере и динамически выводятся пользователю в момент загрузки HTML-страницы.</p>
8
<p>С базой данных веб-приложение "общается" на стороне сервера, например, с помощью Java. Далее информация передаётся клиенту, и после этого её надо правильно вывести на экран пользователя. Чтобы упростить разработчикам задачу и не заставлять выводить все данные вручную, придумали шаблонизаторы. Благодаря им можно быстро раскидать информацию по нужным полям веб-страницы и сэкономить время на вёрстке.</p>
8
<p>С базой данных веб-приложение "общается" на стороне сервера, например, с помощью Java. Далее информация передаётся клиенту, и после этого её надо правильно вывести на экран пользователя. Чтобы упростить разработчикам задачу и не заставлять выводить все данные вручную, придумали шаблонизаторы. Благодаря им можно быстро раскидать информацию по нужным полям веб-страницы и сэкономить время на вёрстке.</p>
9
<p>В этой статье рассказываем о популярном шаблонизаторе Thymeleaf ("таймлиф") и на примерах показываем, как он работает.</p>
9
<p>В этой статье рассказываем о популярном шаблонизаторе Thymeleaf ("таймлиф") и на примерах показываем, как он работает.</p>
10
<p><strong>Содержание</strong></p>
10
<p><strong>Содержание</strong></p>
11
<ul><li><a>Что такое Thymeleaf и для чего он нужен</a></li>
11
<ul><li><a>Что такое Thymeleaf и для чего он нужен</a></li>
12
<li><a>Шаблоны Thymeleaf</a></li>
12
<li><a>Шаблоны Thymeleaf</a></li>
13
<li><a>Диалекты Thymeleaf</a></li>
13
<li><a>Диалекты Thymeleaf</a></li>
14
<li><a>Конфигурации Thymeleaf</a></li>
14
<li><a>Конфигурации Thymeleaf</a></li>
15
</ul><p><strong>Thymeleaf</strong>- это шаблонизатор, позволяющий в реальном времени заменять определённые конструкции в коде данными с сервера. Это упрощает вёрстку и работу с данными, так как можно один раз написать шаблон и переиспользовать его несколько раз.</p>
15
</ul><p><strong>Thymeleaf</strong>- это шаблонизатор, позволяющий в реальном времени заменять определённые конструкции в коде данными с сервера. Это упрощает вёрстку и работу с данными, так как можно один раз написать шаблон и переиспользовать его несколько раз.</p>
16
<p>Задолго до появления Thymeleaf разработчики использовали технологию JSP (JavaServer Pages) с более сложной структурой. Из-за этого программисты тратили много времени на создание самих шаблонов.</p>
16
<p>Задолго до появления Thymeleaf разработчики использовали технологию JSP (JavaServer Pages) с более сложной структурой. Из-за этого программисты тратили много времени на создание самих шаблонов.</p>
17
<p>Thymeleaf работает с языком программирования Java и обрабатывает не только веб-страницы, в отличие от того же JSP. Он работает с шестью видами шаблонов: HTML, XML, CSS, JavaScript, RAW и обычным текстом. С ними можно работать в нескольких режимах (template mode):</p>
17
<p>Thymeleaf работает с языком программирования Java и обрабатывает не только веб-страницы, в отличие от того же JSP. Он работает с шестью видами шаблонов: HTML, XML, CSS, JavaScript, RAW и обычным текстом. С ними можно работать в нескольких режимах (template mode):</p>
18
<ul><li><strong>Разметочный шаблон (markup template)</strong>поддерживает HTML и XML.</li>
18
<ul><li><strong>Разметочный шаблон (markup template)</strong>поддерживает HTML и XML.</li>
19
<li><strong>Текстовый шаблон (textual template)</strong>поддерживает CSS и JavaScript.</li>
19
<li><strong>Текстовый шаблон (textual template)</strong>поддерживает CSS и JavaScript.</li>
20
<li><strong>Пустой шаблон (no-op template)</strong>поддерживает RAW-файлы.</li>
20
<li><strong>Пустой шаблон (no-op template)</strong>поддерживает RAW-файлы.</li>
21
</ul><p>Шаблоны Thymeleaf отвечают за отображение данных и управление динамическим контентом. С их помощью разработчики могут встраивать выражения и директивы прямо в HTML-код, облегчая процесс создания динамических страниц.</p>
21
</ul><p>Шаблоны Thymeleaf отвечают за отображение данных и управление динамическим контентом. С их помощью разработчики могут встраивать выражения и директивы прямо в HTML-код, облегчая процесс создания динамических страниц.</p>
22
<p>Важно понимать, что Thymeleaf использует собственный синтаксис и работает с данными из объектов, которые передаёт сервер. Эти объекты называются моделями. Например, у нас есть Java-код на сервере, который выполняется, когда пользователь заходит в наше веб-приложение:</p>
22
<p>Важно понимать, что Thymeleaf использует собственный синтаксис и работает с данными из объектов, которые передаёт сервер. Эти объекты называются моделями. Например, у нас есть Java-код на сервере, который выполняется, когда пользователь заходит в наше веб-приложение:</p>
23
@Controller public class HelloController { @GetMapping("/") public String getHello(Model model){ // Добавляем в модель строковые данные String message = "Hello World!"; model.addAttribute("message", message); // Отдаём HTML-страницу hello.html пользователю return "hello"; } }<p>Если пользователь выполнил вход, то код вернёт HTML-страницу hello.html и встроит в неё модель message, в которой содержится строка Hello World!. Она и должна выводиться на экран пользователя.</p>
23
@Controller public class HelloController { @GetMapping("/") public String getHello(Model model){ // Добавляем в модель строковые данные String message = "Hello World!"; model.addAttribute("message", message); // Отдаём HTML-страницу hello.html пользователю return "hello"; } }<p>Если пользователь выполнил вход, то код вернёт HTML-страницу hello.html и встроит в неё модель message, в которой содержится строка Hello World!. Она и должна выводиться на экран пользователя.</p>
24
<p>Если бы мы разрабатывали сайт с помощью классической вёрстки, то в HTML-файле использовали бы парный тег <h1> для вывода текста:</p>
24
<p>Если бы мы разрабатывали сайт с помощью классической вёрстки, то в HTML-файле использовали бы парный тег <h1> для вывода текста:</p>
25
<h1>Hello World!</h1><p>В таком случае веб-приложение всегда будет выводить одно и то же сообщение. Если вдруг надо будет приветствовать пользователя по имени, то придётся создавать новую HTML-страницу и переписывать код на стороне сервера.</p>
25
<h1>Hello World!</h1><p>В таком случае веб-приложение всегда будет выводить одно и то же сообщение. Если вдруг надо будет приветствовать пользователя по имени, то придётся создавать новую HTML-страницу и переписывать код на стороне сервера.</p>
26
<p>Используя шаблоны Thymeleaf, можно на одну и ту же страницу выводить разные данные с сервера. Но при этом придётся слегка модифицировать код на странице:</p>
26
<p>Используя шаблоны Thymeleaf, можно на одну и ту же страницу выводить разные данные с сервера. Но при этом придётся слегка модифицировать код на странице:</p>
27
<h1 th:text="${message}"/><p>Атрибут th:text указывает на то, что здесь будет задействован шаблонизатор, а значение внутри фигурных скобок с символом доллара ($) сообщает, что нужно обратиться к переменной message и вывести её значение в этом месте.</p>
27
<h1 th:text="${message}"/><p>Атрибут th:text указывает на то, что здесь будет задействован шаблонизатор, а значение внутри фигурных скобок с символом доллара ($) сообщает, что нужно обратиться к переменной message и вывести её значение в этом месте.</p>
28
<p>Изменим на сервере содержимое переменной на Hello Jack:</p>
28
<p>Изменим на сервере содержимое переменной на Hello Jack:</p>
29
// Первый аргумент: Имя переменной // Второй аргумент: Значение переменной model.addAttribute("message", "Hello Jack");<p>Теперь, когда пользователь зайдёт на нашу страницу, он увидит уже другое сообщение. При этом разработчику не пришлось создавать новую HTML-страницу и переписывать логику на сервере.</p>
29
// Первый аргумент: Имя переменной // Второй аргумент: Значение переменной model.addAttribute("message", "Hello Jack");<p>Теперь, когда пользователь зайдёт на нашу страницу, он увидит уже другое сообщение. При этом разработчику не пришлось создавать новую HTML-страницу и переписывать логику на сервере.</p>
30
<p>В реальных проектах разработчики используют более сложные шаблоны. Представьте, что код на стороне сервера идентифицирует пользователя, ищет в базе информацию о нём и выводит эти данные на веб-страницу. Для каждого пользователя это будет уникальный набор данных, но для вывода можно использовать один и тот же шаблон.</p>
30
<p>В реальных проектах разработчики используют более сложные шаблоны. Представьте, что код на стороне сервера идентифицирует пользователя, ищет в базе информацию о нём и выводит эти данные на веб-страницу. Для каждого пользователя это будет уникальный набор данных, но для вывода можно использовать один и тот же шаблон.</p>
31
<p>Для разных типов данных в Thymeleaf есть свои выражения для вывода:</p>
31
<p>Для разных типов данных в Thymeleaf есть свои выражения для вывода:</p>
32
<ul><li>Переменные: ${message}</li>
32
<ul><li>Переменные: ${message}</li>
33
<li>Переменные выбора объекта: *{object.variable}</li>
33
<li>Переменные выбора объекта: *{object.variable}</li>
34
<li>Сообщения: #{error}</li>
34
<li>Сообщения: #{error}</li>
35
<li>URL: @{/link}</li>
35
<li>URL: @{/link}</li>
36
<li>Фрагменты: ~{template}</li>
36
<li>Фрагменты: ~{template}</li>
37
</ul><p>Разберём ещё один пример с передачей шаблона объекта пользователю - переменными выбора. Допустим, на сервере есть класс-модель, предоставляющая информацию о пользователе:</p>
37
</ul><p>Разберём ещё один пример с передачей шаблона объекта пользователю - переменными выбора. Допустим, на сервере есть класс-модель, предоставляющая информацию о пользователе:</p>
38
public class User { String username; // Имя пользователя String email; // Email пользователя // Конструктор, принимающий значения переменных public Person(String username, String email) { this.username = username; this.email = email; } }<p>В классе-контроллере, отвечающем за передачу данных пользователю, мы создаём объект пользователя с именем и адресом электронной почты и добавляем его в модель:</p>
38
public class User { String username; // Имя пользователя String email; // Email пользователя // Конструктор, принимающий значения переменных public Person(String username, String email) { this.username = username; this.email = email; } }<p>В классе-контроллере, отвечающем за передачу данных пользователю, мы создаём объект пользователя с именем и адресом электронной почты и добавляем его в модель:</p>
39
@Controller public class UserController { @GetMapping("/user") public String getUser(Model model){ // Создаём нового пользователя и добавляем его в модель User user = new User("Jack", "jack@test.ru") model.addAttribute("user", user); // Отдаём HTML-страницу user.html пользователю return "user"; } }<p>В HTML-коде, чтобы вывести значения переменных передаваемого объекта User, используем следующий шаблон:</p>
39
@Controller public class UserController { @GetMapping("/user") public String getUser(Model model){ // Создаём нового пользователя и добавляем его в модель User user = new User("Jack", "jack@test.ru") model.addAttribute("user", user); // Отдаём HTML-страницу user.html пользователю return "user"; } }<p>В HTML-коде, чтобы вывести значения переменных передаваемого объекта User, используем следующий шаблон:</p>
40
<ul th:object="${user}"> <li>Имя: <span th:text="*{username}"></span></li> <li>Email: <span th:text="*{email}"></span></li> </ul><p>С помощью атрибута th:object мы обращаемся к переменной-объекту, который был передан с сервера. А с помощью конструкции *{variable_name} мы напрямую запрашиваем значения переменных этого объекта.</p>
40
<ul th:object="${user}"> <li>Имя: <span th:text="*{username}"></span></li> <li>Email: <span th:text="*{email}"></span></li> </ul><p>С помощью атрибута th:object мы обращаемся к переменной-объекту, который был передан с сервера. А с помощью конструкции *{variable_name} мы напрямую запрашиваем значения переменных этого объекта.</p>
41
<p>Таким образом можно передать информацию о любом пользователе из базы данных и отобразить их на веб-странице. При этом информация будет динамически меняться в зависимости от того, кто запрашивает данные.</p>
41
<p>Таким образом можно передать информацию о любом пользователе из базы данных и отобразить их на веб-странице. При этом информация будет динамически меняться в зависимости от того, кто запрашивает данные.</p>
42
<p><strong>Диалекты Thymeleaf</strong> - это своеобразные плагины, с помощью которых можно расширять возможности шаблонизатора, добавлять собственные атрибуты и выражения. По умолчанию Thymeleaf предоставляет разработчикам стандартный диалект (standard dialect), включающий в себя выражения, которые мы уже рассмотрели выше (th:text, th:object). Но существуют и другие конструкции, например:</p>
42
<p><strong>Диалекты Thymeleaf</strong> - это своеобразные плагины, с помощью которых можно расширять возможности шаблонизатора, добавлять собственные атрибуты и выражения. По умолчанию Thymeleaf предоставляет разработчикам стандартный диалект (standard dialect), включающий в себя выражения, которые мы уже рассмотрели выше (th:text, th:object). Но существуют и другие конструкции, например:</p>
43
<ul><li>th:if - обработка логических выражений;</li>
43
<ul><li>th:if - обработка логических выражений;</li>
44
<li>th:each - перечисление коллекций;</li>
44
<li>th:each - перечисление коллекций;</li>
45
<li>th:error - выведение ошибок.</li>
45
<li>th:error - выведение ошибок.</li>
46
</ul><p>Для большинства задач вывода данных на веб-страницы и изучения Thymeleaf хватит возможностей стандартного диалекта. Но важно понимать, что есть и другие функции, которые могут ускорить работу над проектом. Подробнее о диалектах можно узнать из <a>официальной документации</a>Thymeleaf.</p>
46
</ul><p>Для большинства задач вывода данных на веб-страницы и изучения Thymeleaf хватит возможностей стандартного диалекта. Но важно понимать, что есть и другие функции, которые могут ускорить работу над проектом. Подробнее о диалектах можно узнать из <a>официальной документации</a>Thymeleaf.</p>
47
<p>Перед тем как использовать Thymeleaf, его нужно подключить к проекту и настроить. При этом важно помнить, что шаблонизатор работает с бэкендом на Java и фреймворке Spring.</p>
47
<p>Перед тем как использовать Thymeleaf, его нужно подключить к проекту и настроить. При этом важно помнить, что шаблонизатор работает с бэкендом на Java и фреймворке Spring.</p>
48
<p>Раньше для настройки Thymeleaf требовалось очень много времени и кода. Часто настройка шаблонизатора могла доходить до конфигурации в отдельном XML-файле со своими дескрипторами и атрибутами, а также до подключения системы сборки, например Maven.</p>
48
<p>Раньше для настройки Thymeleaf требовалось очень много времени и кода. Часто настройка шаблонизатора могла доходить до конфигурации в отдельном XML-файле со своими дескрипторами и атрибутами, а также до подключения системы сборки, например Maven.</p>
49
<p>Позже появилась технология Spring Boot, и настройка стала занимать меньше времени. Для подключения Thymeleaf достаточно выбрать шаблонизатор при инициализации проекта, а фреймворк Spring сделает всё остальное.</p>
49
<p>Позже появилась технология Spring Boot, и настройка стала занимать меньше времени. Для подключения Thymeleaf достаточно выбрать шаблонизатор при инициализации проекта, а фреймворк Spring сделает всё остальное.</p>
50
<p>Все необходимые настройки при этом автоматически пропишутся в файле application.properties. Содержимое файла можно менять вручную, чтобы подготовить шаблонизатор под нестандартные условия.</p>
50
<p>Все необходимые настройки при этом автоматически пропишутся в файле application.properties. Содержимое файла можно менять вручную, чтобы подготовить шаблонизатор под нестандартные условия.</p>
51
<p>Параметры, которые можно менять:</p>
51
<p>Параметры, которые можно менять:</p>
52
<ul><li>prefix - указывает на папку, в которой хранятся HTML-шаблоны.</li>
52
<ul><li>prefix - указывает на папку, в которой хранятся HTML-шаблоны.</li>
53
</ul>spring.thymeleaf.prefix=classpath:/templates/<ul><li>suffix - устанавливает расширение файлов, в которых хранятся шаблоны.</li>
53
</ul>spring.thymeleaf.prefix=classpath:/templates/<ul><li>suffix - устанавливает расширение файлов, в которых хранятся шаблоны.</li>
54
</ul>spring.thymeleaf.suffix=.html<ul><li>mode - выбор режима обработки шаблонов (HTML, XML, CSS, RAW, JAVASCRIPT, TEXT).</li>
54
</ul>spring.thymeleaf.suffix=.html<ul><li>mode - выбор режима обработки шаблонов (HTML, XML, CSS, RAW, JAVASCRIPT, TEXT).</li>
55
</ul>spring.thymeleaf.mode=HTML<ul><li>enabled - с помощью этого параметра можно включить или выключить Thymeleaf в проекте.</li>
55
</ul>spring.thymeleaf.mode=HTML<ul><li>enabled - с помощью этого параметра можно включить или выключить Thymeleaf в проекте.</li>
56
</ul>spring.thymeleaf.enabled=true<ul><li>encoding - устанавливает кодировку шаблонов.</li>
56
</ul>spring.thymeleaf.enabled=true<ul><li>encoding - устанавливает кодировку шаблонов.</li>
57
</ul>spring.thymeleaf.encoding=UTF-8<ul><li>Thymeleaf<strong></strong>- популярный шаблонизатор с собственным синтаксисом, поддержкой Java и шести форматов, включая HTML, CSS и JavaScript. Шаблонизатор<strong></strong>- это ПО для динамического вывода данных на веб-странице.</li>
57
</ul>spring.thymeleaf.encoding=UTF-8<ul><li>Thymeleaf<strong></strong>- популярный шаблонизатор с собственным синтаксисом, поддержкой Java и шести форматов, включая HTML, CSS и JavaScript. Шаблонизатор<strong></strong>- это ПО для динамического вывода данных на веб-странице.</li>
58
<li>Thymeleaf удобно применять в связке с фреймворком Spring.</li>
58
<li>Thymeleaf удобно применять в связке с фреймворком Spring.</li>
59
<li>Шаблоны Thymeleaf - это HTML-файлы, в которые встраиваются необходимые данные с сервера.</li>
59
<li>Шаблоны Thymeleaf - это HTML-файлы, в которые встраиваются необходимые данные с сервера.</li>
60
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
60
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>