Что такое Тимелеаф? Как использовать Thymeleaf в приложении Spring Boot

Вы можете использовать Thymeleaf для обработки 6 типов шаблонов: HTML, XML, текст, JavaScript, CSS и RAW. Thymeleaf рассматривает каждый шаблон как режим шаблона, где HTML является наиболее распространенным.

Инициализируйте Thymeleaf в своем приложении.

У вас есть два способа добавить Thymeleaf в приложение Spring Boot. Вы можете выбрать Thymeleaf в качестве зависимости при создании шаблона с использованием инициализатора Spring. У вас также есть возможность добавить его в файл спецификации сборки в зависимостях.

Если вы выбрали один из вариантов проекта Gradle, этот файл содержит зависимости build.gradle. Однако если вы выберете Maven, этот файл будет pom.xml.

Файл pom.xml будет содержать следующие зависимости:

org.springframework.boot

Файл build.gradle будет содержать следующие зависимости:

зависимости {реализация ‘org.springframework.boot:spring-boot-starter-thymeleaf’}

Добавив Thymeleaf в свое приложение Spring, вы получите доступ к его основной библиотеке, что позволит вам использовать стандартный диалект Spring Thymeleaf. Стандартный диалект Spring содержит уникальные свойства и синтаксис, которые вы можете использовать для добавления различных функций в макет.

Использование Thymeleaf в Spring Boot

При использовании Thyemleaf в приложении Spring первым шагом является создание документа-шаблона. В этом примере приложения примером документа является HTML. Вы всегда создаете шаблоны Thymeleaf в каталоге шаблонов Spring Boot, который доступен в исходном файле.

Файл home.html

Общий веб-сайт

Приведенный выше шаблон Thymeleaf представляет собой обычный шаблон HTML5 с внешним атрибутом (xmlns:th). Целью xmlns:th является предоставление области действия атрибуту th:*, который вы будете использовать в своем HTML-документе. Другие атрибуты и теги в шаблоне Thymeleaf — это традиционные теги и атрибуты HTML.

Создать заголовок

Одним из первых и наиболее важных аспектов любого веб-сайта или приложения является заголовок. Он обозначает содержимое приложения с помощью логотипа и упрощает навигацию по приложению. Базовый заголовок с логотипом и некоторыми навигационными ссылками.

1. Дом
2. О
3. Услуги

Thymeleaf позволяет добавить приведенный выше заголовок на любую страницу вашего веб-приложения, используя атрибут th:insert. th:insert и th:replace принимают то, что Thymeleaf называет значением дробного выражения. Выражения сегментов позволяют размещать маркеры в любом месте макета.

Вставьте приведенную выше разметку в верхнюю часть тега home.html, который вставит разметку заголовка в верхнюю часть домашней страницы. Дробное выражение состоит из нескольких компонентов, из которых два необязательных и два обязательных:

1. Тильда (~) необязательна.
2. Пара фигурных скобок ({}), которые не являются обязательными.
3. Имя шаблона, содержащего разметку, которую вы хотите вставить (header.html).
4. CSS-селектор разметки, которую вы хотите вставить (#nav).

Следующая разметка дает тот же результат, что и приведенная выше:

Заполните форму содержанием

Thymeleaf позволяет использовать в шаблонах 5 типов выражений:

1. Дробное выражение (~{…})
2. Выражение сообщения (#{…})
3. Выражение URL-адреса ссылки (@{…})
4. Выражение переменной (${…})
5. Выражение переменной выбора (*{…})

Выражения объявлений позволяют добавлять в макет внешние фрагменты текста. С помощью этого выражения вы можете легко заменить или повторно использовать текст в макете. При использовании выражений сообщений всегда необходимо помещать внешний текст в файл .properties в каталоге ресурса.

В этом простом приложении это файл messages.properties, который содержит следующий текст:

Placeholder.text=Lorem ipsum, скорбь сидит амет консектетур adipisicing элита. Долорем порро нон, что мешает трудиться.

Обратите внимание, что приведенный выше текст (или сообщение) имеет специальный ключ (placeholder.text). Это связано с тем, что каждый файл сообщений может содержать различную коллекцию сообщений. Для этого вам понадобится ключ для вставки определенного сообщения в макет.

Вставка приведенной выше разметки в тело HTML-файла эффективно отобразит текст-заполнитель в виде абзаца в области просмотра. В отличие от выражений фрагментов, каждый аспект выражений сообщений является обязательным. Выражение сообщения требует:

1. Цифровой символ (#).
2. Пара фигурных скобок ({}).
3. Ключ содержит сообщение, которое вы хотите вставить (placeholder.text).

Стилизация шаблона

Еще один важный файл в папке ресурсов — статический файл. В этом файле хранятся ваши CSS-файлы и любые изображения, которые вы планируете использовать в своем приложении. Чтобы связать внешний CSS-файл с HTML-шаблоном Thymeleaf, вам нужно будет использовать выражение URL-адреса ссылки. Выражение привязки URL-адреса обрабатывает как относительные, так и абсолютные URL-адреса.

Вставка приведенной выше разметки в файл HTML позволит вам стилизовать шаблон с помощью файла style.css. Этот файл доступен в папке css в статическом разделе файла ресурсов из примера приложения. Вы всегда должны присваивать выражение URL-адреса ссылки атрибуту th:href.

Thymeleaf предоставляет несколько других свойств, которые можно использовать для улучшения дизайна макета, например th:style, который добавляет изображение в макет.

Переменное выражение

Выражения переменных являются наиболее распространенными и, возможно, самыми сложными выражениями, используемыми Thymeleaf. Выражения переменных Thymeleaf позволяют собирать данные из контекста приложения или объекта внутри приложения и включать эти данные в шаблон. В зависимости от источника данных, который вы хотите предоставить вашему представлению, вы можете использовать два типа переменных выражений.

Регулярное выражение использует знак доллара и позволяет собирать данные из контекста приложения (то есть данных, связанных с различными задачами, выполняемыми в приложении). Например, если вы хотите собрать пользовательские данные из метода, более реалистичным выбором будет выражение переменной со знаком доллара. Если вы выполните пример проекта и перейдете к нему в браузере, вы увидите следующий метод:

После закрытия модального окна или отправки имени приложение перейдет на домашнюю страницу. На домашней странице вы увидите обычную веб-страницу, на которой отображается слово «Добро пожаловать», за которым следует строка, которую вы только что отправили в модальном окне.

В примере приложения для завершения этого процесса используются выражения переменных. Простая форма в файле modal.html имеет следующую разметку:

Представлять на рассмотрение

Когда пользователь отправляет эту форму, он активирует атрибут th:action со значением URL-адреса статьи, который вы можете найти в классе WebController.

@PostMapping(“/home”) public StringprocessName(String userName, Model model) { model.addAttribute(“userName”, userName); вернуться домой”; }

МетодprocessName() принимает строку, которую пользователь предоставляет методу, а затем присваивает эту строку переменной с именем userName. Затем, используя выражение переменной, контроллер вводит переменную имени пользователя в макет.

В выражениях переменных выбора используется звездочка, и это наиболее полезно при работе с более сложными приложениями. Например, приложение, требующее входа пользователя в систему, может использовать выражение переменной выбора. Вы можете получить имя пользователя из объекта пользователя и вставить его в макет.

Выше описано, как использовать приложение Thymeleaf в Spring. Надеюсь, статья окажется для вас полезной.