Узнайте, как интегрировать этот механизм шаблонов в ваши приложения Spring.

Thymeleaf — это шаблонизатор Java. Он разрабатывает шаблоны как для веб-приложений, так и для автономных приложений. Этот механизм шаблонов использует концепцию Natural Templates для внедрения логики в ваш макет без ущерба для вашего дизайна. С Thymeleaf вы сможете контролировать, как приложение будет обрабатывать созданные вами шаблоны.

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

Инициализация Thymeleaf в вашем приложении

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

Если вы выбрали один из вариантов проекта Gradle, файл, содержащий зависимости, будет

instagram viewer
build.gradle файл. Однако, если вы выбрали Maven, этот файл будет pom.xml.

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

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Пока ваш build.gradle файл должен содержать следующий раздел зависимостей:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Пример приложения, использованный в статье, доступен по этой ссылке. Репозиторий GitHub и вы можете бесплатно использовать его по лицензии MIT.

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

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

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

Файл home.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

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

Создание заголовка

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

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

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

<divth: insert="~{header:: #nav}">div>

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

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

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

"header:: #nav">

Заполнение тела шаблона

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

  • Фрагментное выражение (~{…})
  • Выражение сообщения (#{…})
  • Выражение URL-адреса ссылки (@{…})
  • Переменное выражение (${…})
  • Выражение переменной выбора (*{…})

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

Для этого примера приложения этот файл сообщения.свойства, который содержит следующий фрагмент текста:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

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

<pth: text="#{placeholder.text}">p>

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

  • Знак номера (#).
  • Пара фигурных скобок ({}).
  • Ключ, содержащий сообщение, которое вы хотите вставить (заполнитель.текст).

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

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

<linkrel="stylesheet"th: href="@{/css/style.css}" />

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

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

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

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

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

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

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

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

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

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

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

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

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

<h1>Welcome <spanth: text="${userName}">span>!h1>

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

Альтернативный шаблон и параметры стиля

Хотя Thymeleaf является более популярным вариантом шаблона для приложений Spring Boot, существует несколько других, не менее жизнеспособных вариантов. К ним относятся страницы JavaServer (JSP), шаблоны на основе Groovy, шаблоны FreeMarker и шаблоны Mustache. Помимо создания собственного стиля CSS, вы также можете использовать платформу CSS для стилизации вашего макета.