Базовое руководство по Spring Boot 2.x: разработка веб-страниц с помощью Thymeleaf

пройти черезЭта серия уроковПервые несколько глав (разработка API, доступ к данным). У нас уже есть полноценная серверная служба, которая обеспечивает хранение данных и предоставляет HTTP-интерфейсы. Опираясь на эти навыки, мы уже можем сотрудничать с фронтенд-разработчиками для выполнения некоторых веб-проектов с разделением фронтенда и бэкэнда, или некоторых небольших программ, или разработки приложений, таких как App.

Для веб-проектов режим разделения клиентской и серверной частей в настоящее время является наиболее популярным, в основном из-за улучшения инфраструктуры клиентской части и растущей зрелости схем разделения клиентской и серверной частей. Этот режим реализации помогает группе разработчиков веб-продуктов лучше разделить задачи и позволяет разработчикам больше сосредоточиться на технологии разработки с одной стороны. Таким образом, в этом руководстве приоритетом является введение в разработку API, а не разработку веб-страницы. Тем не менее, веб-страницами в традиционном режиме можно управлять в рамках одного проекта.Если навыки разработчика позволяют охватить весь стек, также хорошим выбором будет прямое использование традиционного механизма шаблонов для разработки. Особенно для некоторых старых команд они хорошо знакомы с механизмами шаблонов, которые могут значительно сократить затраты на обучение и напрямую использовать Spring Boot для разработки веб-приложений.

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

Доступ к статическим ресурсам

Когда мы разрабатываем веб-приложения, нам нужно ссылаться на большое количество статических ресурсов, таких как js, css и изображения. По умолчанию Spring Boot предоставляет местоположение каталога статических ресурсов, которое необходимо поместить в путь к классам, а имя каталога должно соответствовать следующим правилам:

• /static
• /public
• /resources
• /META-INF/resources

Пример: мы можемsrc/main/resources/Создано в каталогеstaticи поместите файл изображения в это место. После запуска программы попробуйте получить доступhttp://localhost:8080/D.jpg. Если изображение отображается, конфигурация выполнена успешно.

отображать веб-страницы

В предыдущем примере мы прошли@RestControllerдля обработки запроса, поэтому возвращаемый контент является объектом json. Итак, если вам нужно отобразить html-страницу, как это сделать?

шаблонизатор

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

Spring Boot предоставляет следующие механизмы шаблонов для модулей автоматической настройки:

• Thymeleaf
• FreeMarker
• Groovy

Когда вы используете любой из вышеперечисленных механизмов шаблонов, их пути конфигурации шаблонов по умолчанию:src/main/resources/templates. Конечно, этот путь также можно изменить.Как его изменить, можно запросить и изменить в свойствах конфигурации последующих механизмов шаблонов.

Пополнить: Spring Boot рекомендует с самого начала использовать шаблонизатор, избегая JSP. В то же время с итерацией версий Spring Boot некоторые старые шаблонизаторы постепенно исключаются.

Thymeleaf

Thymeleaf — это механизм шаблонов, который мы будем использовать в этой статье. Это механизм шаблонов XML/XHTML/HTML5, который можно использовать для разработки приложений в веб-средах и не в веб-средах. Это библиотека Java с открытым исходным кодом под лицензией Apache License 2.0, созданная Даниэлем Фернандесом, автором библиотеки шифрования Java Jasypt.

Thymeleaf предоставляет дополнительный модуль для интеграции Spring MVC.При разработке приложений вы можете использовать Thymeleaf для полной замены JSP или других механизмов шаблонов, таких как Velocity, FreeMarker и т. д. Основная цель Thymeleaf — предоставить способ создания правильно сформированного шаблона, который правильно отображается в браузере и, следовательно, может также использоваться для статического моделирования. Вы можете использовать его для создания проверенных шаблонов XML и HTML. Вместо написания логики или кода разработчики могут просто добавить в шаблон атрибуты тегов. Затем эти атрибуты тегов выполняют предварительно определенную логику в DOM (объектная модель документа).

Пример шаблона:

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

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

Попробуйте руки

первый шаг: Создайте новое приложение Spring Boot вpom.xmlДобавьте необходимые модули двигателя шаблона, такие как использованиеthymeleafЕсли это так, просто импортируйте следующие зависимости:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

второй шаг: Создайте традиционный контроллер Spring MVC для обработки запроса корневого пути и отображения решения на странице индекса Конкретная реализация выглядит следующим образом.

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(ModelMap map) {
        map.addAttribute("host", "http://blog.didispace.com");
        return "index";
    }

}

Короткое описание:

• При рендеринге на страницу индекса добавьте один на страницу через ModelMaphostпараметр, значение которогоhttp://blog.didispace.com
• returnЗначение index представляет имя используемой страницы шаблона, по умолчанию оно будет соответствоватьsrc/main/resources/templates/в каталогеindex.htmlстраница шаблона

третий шаг: В соответствии с шаблоном, который необходимо сопоставить на предыдущем шаге, перейдите по пути к шаблону.src/main/resources/templatesСоздайте новый файл шаблонаindex.html, содержание следующее:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
</body>
</html>

В тело страницы включен тег h1 с атрибутом Thymeleaf, и содержимое заметки будет привязаноhostзначение параметра.

Из-за природы связывания Thymeleaf через свойства. Эта страница шаблона отличается от других шаблонизаторов.Откройте html-страницу непосредственно через браузер.Он может работать нормально и будет напрямую отображать заголовок Hello World. Это полезно для проверки правильности стилей внешнего интерфейса в незапускаемой среде при разработке страницы.

Если после запуска программы доступhttp://localhost:8080/, на приведенной выше странице будет отображаться значение хоста в контроллере:http://blog.didispace.com, чтобы добиться логического разделения данных без разрушения содержимого самого HTML.

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

Параметры конфигурации для Thymeleaf

Если вам нужно изменить конфигурацию по умолчанию, просто скопируйте свойства, которые нужно изменить ниже, вapplication.properties, и измените его на требуемое значение:

# Enable template caching.
spring.thymeleaf.cache=true 
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true 
# Content-Type value.
spring.thymeleaf.content-type=text/html 
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true 
# Template encoding.
spring.thymeleaf.encoding=UTF-8 
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names= 
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5 
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/ 
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html  spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.

Вот несколько часто используемых конфигураций:

Q: Я не хочу перезапускать каждый раз, когда я изменяю страницу

А: изменитьspring.thymeleaf.cacheпараметр, установленный наfalse

В: Я не хочу использовать каталог шаблонов для хранения файлов шаблонов.

А: изменитьspring.thymeleaf.prefixпараметр, установите в каталог, где вы хотите разместить файл шаблона

В: Не хотите использовать индекс в качестве расширения файлов шаблонов

А: изменитьspring.thymeleaf.suffixпараметр, установите расширение, которое вы хотите использовать

В: Строгая проверка HTML5 раздражает.

А: изменитьspring.thymeleaf.modeпараметр, установленный наLEGACYHTML5

Больше бесплатных руководств из этой серии«Нажмите, чтобы войти в общий каталог»

пример кода

Примеры этой статьи можно найти в следующем репозиторииchapter4-1содержание:

• Гитхаб:GitHub.com/first87112/sp…
• Гостиница:git ee.com/brother space/S…

Если вы считаете, что эта статья хороша, добро пожаловатьStarПоддержите, ваше внимание - движущая сила моего упорства!

Добро пожаловать, чтобы обратить внимание на мой общедоступный номер: Programmer DD, получить эксклюзивные учебные ресурсы и ежедневный толчок галантерейных товаров.

Если вас интересует мой рекомендуемый контент, вы также можете подписаться на мой блог:didispace.com