Минималистская интеграция с Spring Boot, шаблон страницы Thymeleaf

Spring Boot
Минималистская интеграция с Spring Boot, шаблон страницы Thymeleaf

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

В ранней версии Spring Boot Velocity также поддерживался в качестве шаблона страницы. Теперь Velocity больше не поддерживается в Spring Boot. Шаблоны страниц в основном поддерживают Thymeleaf и Freemarker. Конечно, как самый простой шаблон страницы в Java, Jsp, Spring Boot также поддерживает его, просто его использование более проблематично.

Song Ge намерен представить вам эти три технологии шаблонов страниц в трех статьях.

Сегодня мы рассмотрим основные консолидации Spring Boot Thymeleaf!

Введение в Тимелеаф

Thymeleaf — это механизм шаблонов Java нового поколения, который похож на традиционные механизмы шаблонов Java, такие как Velocity и FreeMarker, но в отличие от традиционных механизмов шаблонов Java, Thymeleaf поддерживает прототипы HTML.

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

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

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

Интегрировать

  • Создать проект

Интегрировать Thymeleaf в Spring Boot очень просто, просто добавьте Thymeleaf при создании проекта:

После завершения создания зависимости pom.xml выглядят следующим образом:

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

Конечно, Thymeleaf можно использовать не только в Spring Boot, но и в других местах, но Spring Boot предоставляет полный набор решений для автоматической настройки Thymeleaf.Свойства этого набора классов конфигурации находятся вorg.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties, часть исходного кода выглядит следующим образом:

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
        private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
        public static final String DEFAULT_SUFFIX = ".html";
        private boolean checkTemplate = true;
        private boolean checkTemplateLocation = true;
        private String prefix = DEFAULT_PREFIX;
        private String suffix = DEFAULT_SUFFIX;
        private String mode = "HTML";
        private Charset encoding = DEFAULT_ENCODING;
        private boolean cache = true;
        //...
}
  1. сначала через@ConfigurationPropertiesобратите внимание, будетapplication.propertiesс префиксомspring.thymeleafКонфигурация привязана к свойствам этого класса.
  2. первые триstaticПеременные определяют формат кодирования по умолчанию, префиксы преобразователя представления, суффиксы и т. д.
  3. Из первых трех строк конфигурации видно, чтоThymeleafРасположение шаблонов по умолчанию:resources/templatesкаталог, суффикс по умолчаниюhtml.
  4. Эти конфигурации, если разработчик их не предоставляет сам, используют дефолтные, а если они сами их предоставляют, то используют дефолтные в конфигураторе.application.propertiesКитай и Израильspring.thymeleafНачните соответствующую настройку.

Как мы только что упомянули, класс автоматической настройки, предоставляемый Spring Boot для Thymeleaf,org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration, часть исходного кода выглядит следующим образом:

@Configuration
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {
}

Как видите, в этом классе конфигурации автоматизации сначала импортируйтеThymeleafProperties,Потом@ConditionalOnClassАннотация указывает, что когда текущая система существуетTemplateModeа такжеSpringTemplateEngineкласс, вступит в силу текущий класс автоматической конфигурации, то есть до тех пор, пока проект вводитThymeleafсвязанные зависимости, эта конфигурация вступит в силу.

Эти конфигурации по умолчанию можно использовать напрямую без каких-либо изменений. Если у разработчиков есть особые потребности, они могут настроить свойства, начинающиеся с spring.thymeleaf в application.properties.

  • Создать контроллер

Затем мы можем создать контроллер, Фактически, после введения зависимости Thymeleaf мы не можем выполнять настройку. Недавно созданный IndexController выглядит следующим образом:

@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model) {
        List<User> users = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            User u = new User();
            u.setId((long) i);
            u.setName("javaboy:" + i);
            u.setAddress("深圳:" + i);
            users.add(u);
        }
        model.addAttribute("users", users);
        return "index";
    }
}
public class User {
    private Long id;
    private String name;
    private String address;
    //省略 getter/setter
}

существуетIndexControllerВозвращает имя логического представления + данные, и имя логического представленияindex, то есть нам нужноresources/templatesКаталог с именемindex.htmlизThymeleafфайл шаблона.

  • Создать лист тимьяна
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>地址</td>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>
</body>
</html>

существуетThymeleafв, черезth:eachИнструкции по обходу коллекции, данные отображаются черезth:textинструкции по выполнению,

Уведомлениеindex.htmlимпортировать вверхуthymeleafпространство имен.

После завершения настройки вы можете запустить проект, получить доступ к интерфейсу /index и увидеть данные в коллекции:

Кроме того,Thymeleafподдержка вjsнепосредственно изModelпеременные в . Например, вIndexControllerимеет переменнуюusername:

@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model) {
        model.addAttribute("username", "李四");
        return "index";
    }
}

В шаблоне страницы вы можете получить эту переменную прямо в js:

<script th:inline="javascript">
    var username = [[${username}]];
    console.log(username)
</script>

Эта функция является одной из особенностей Thymeleaf.

Рендеринг вручную

Ранее мы сказали, что нужно вернуть шаблон Thymeleaf, мы также можем отобразить шаблон Thymeleaf вручную, что обычно полезно при отправке электронных писем.Например, я создаю новый шаблон электронной почты в каталоге resources/templates следующим образом:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello 欢迎 <span th:text="${username}"></span>加入 XXX 集团，您的入职信息如下：</p>
<table border="1">
    <tr>
        <td>职位</td>
        <td th:text="${position}"></td>
    </tr>
    <tr>
        <td>薪水</td>
        <td th:text="${salary}"></td>
    </tr>
</table>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/6/12/16b494107e529c34~tplv-t2oaga2asx-image.image" alt="">
</body>
</html>

В этом HTML-шаблоне есть несколько переменных.Мы хотим преобразовать этот HTML-шаблон в строку String, а затем отправить эту строку по электронной почте, так как же отобразить ее вручную?

@Autowired
TemplateEngine templateEngine;
@Test
public void test1() throws MessagingException {
    Context context = new Context();
    context.setVariable("username", "javaboy");
    context.setVariable("position", "Java工程师");
    context.setVariable("salary", 99999);
    String mail = templateEngine.process("mail", context);
    //省略邮件发送
}
  1. При рендеринге нам нужно сначала внедрить объект templateEngine, который настроен в классе автоматической конфигурации Thymeleaf (т.е. после того, как мы введем зависимый от Thymeleaf этот экземпляр).
  2. Затем создайте объект Context для хранения переменных.
  3. Вызовите метод процесса для рендеринга, возвращаемое значение этого метода — отображаемая строка HTML, а затем мы отправляем эту строку.

Это несколько ключевых моментов Spring Boot для интеграции Thymeleaf.Для получения дополнительной информации о самом шаблоне страницы Thymeleaf вы можете обратиться к документации Thymeleaf:www.thymeleaf.org.

Суммировать

Эта статья в основном кратко описывает несколько проблем при интеграции Spring Boot и Thymeleaf.Это относительно просто.Вы можете прочитать официальную документацию Thymeleaf, чтобы узнать больше об использовании Thymeleaf. Я загрузил кейс этой статьи на GitHub, добро пожаловать в звезду:GitHub.com/Len VE/Java не…

Если у вас есть какие-либо вопросы по этой статье, пожалуйста, оставьте сообщение для обсуждения. Обратите внимание на общедоступную учетную запись [Jiangnan A Little Rain], сосредоточьтесь на технологиях с полным стеком, таких как Spring Boot + микросервисы и разделение интерфейса и сервера, делитесь регулярными видеоуроками, отвечайте на Java после того, как уделите внимание, и получайте Сухие товары Java тщательно приготовлены Songge для вас!

Категории