1. Введение
Thymeleaf — это механизм шаблонов Java для обработки и создания HTML, XML, JavaScript, CSS и обычного текста. Чтобы познакомиться с Thymeleaf и Spring, ознакомьтесь с этой статьей .
В этой статье мы обсудим новые функции Thymeleaf 3.0 в Spring MVC с приложением Thymeleaf. Версия 3 содержит новые функции и множество внутренних улучшений. Чтобы быть более конкретным, мы рассмотрим темы естественной обработки и встраивания Javascript.
Thymeleaf 3.0 включает три новых режима текстовых шаблонов: TEXT
, JAVASCRIPT
и CSS
, которые предназначены для обработки простых шаблонов, шаблонов JavaScript и CSS соответственно.
2. Зависимости Maven
Во-первых, давайте посмотрим на конфигурации, необходимые для интеграции Thymeleaf с Spring; В наших зависимостях требуется библиотека thymeleaf-spring :
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
Обратите внимание, что для проекта Spring 4 вместо тимелеаф-спринг5
необходимо использовать библиотеку тимелеаф-спринг4
. Последнюю версию зависимостей можно найти здесь .
3. Конфигурация Java Thymeleaf
Во-первых, нам нужно настроить новый механизм шаблонов, представления и преобразователи шаблонов. Для этого нам нужно обновить класс конфигурации Java, созданный
Для этого нам нужно обновить класс конфигурации Java, созданный здесь . В дополнение к новым типам распознавателей наши шаблоны реализуют интерфейс Spring ApplicationContextAware
:
@Configuration
@EnableWebMvc
@ComponentScan({ "com.foreach.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {
private ApplicationContext applicationContext;
// Java setter
@Bean
public ViewResolver htmlViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
resolver.setContentType("text/html");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.html"));
return resolver;
}
@Bean
public ViewResolver javascriptViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
resolver.setContentType("application/javascript");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.js"));
return resolver;
}
@Bean
public ViewResolver plainViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
resolver.setContentType("text/plain");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.txt"));
return resolver;
}
}
Как мы могли заметить выше, мы создали три разных распознавателя представлений — один для представлений HTML, один для файлов Javascript и один для обычных текстовых файлов. Thymeleaf различает их, проверяя расширения имен файлов — .html
, .js
и .txt
соответственно.
Мы также создали статический класс ArrayUtil
, чтобы использовать метод array()
, который создает требуемый массив String[]
с именами представлений.
В следующей части этого класса нам нужно настроить механизм шаблонов:
private ISpringTemplateEngine templateEngine(ITemplateResolver templateResolver) {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
return engine;
}
Наконец, нам нужно создать три отдельных преобразователя шаблонов:
private ITemplateResolver htmlTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/views/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
private ITemplateResolver javascriptTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/js/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
return resolver;
}
private ITemplateResolver plainTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/txt/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.TEXT);
return resolver;
}
Обратите внимание, что для тестирования лучше использовать некэшируемые шаблоны, поэтому рекомендуется использовать метод setCacheable(false)
.
Шаблоны Javascript будут храниться в папке /WEB-INF/js/
, текстовые файлы в папке /WEB-INF/txt/
, и, наконец, путь к файлам HTML — /WEB-INF/html
.
4. Конфигурация контроллера Spring
Чтобы протестировать нашу новую конфигурацию, мы создали следующий контроллер Spring:
@Controller
public class InliningController {
@RequestMapping(value = "/html", method = RequestMethod.GET)
public String getExampleHTML(Model model) {
model.addAttribute("title", "ForEach");
model.addAttribute("description", "<strong>Thymeleaf</strong> tutorial");
return "inliningExample.html";
}
@RequestMapping(value = "/js", method = RequestMethod.GET)
public String getExampleJS(Model model) {
model.addAttribute("students", StudentUtils.buildStudents());
return "studentCheck.js";
}
@RequestMapping(value = "/plain", method = RequestMethod.GET)
public String getExamplePlain(Model model) {
model.addAttribute("username", SecurityContextHolder.getContext()
.getAuthentication().getName());
model.addAttribute("students", StudentUtils.buildStudents());
return "studentsList.txt";
}
}
В примере с HTML-файлом мы покажем, как использовать новую функцию встраивания с экранированием HTML-тегов и без них.
Для примера JS мы создадим запрос AJAX, который загрузит файл js с информацией о студентах. Обратите внимание, что мы используем простой метод buildStudents()
внутри класса StudentUtils
из этой статьи .
Наконец, в примере с открытым текстом мы покажем информацию об ученике в виде текстового файла. Типичный пример использования режима обычного текстового шаблона может быть использован для отправки электронной почты с открытым текстом.
В качестве дополнительной функции мы будем использовать SecurityContextHolder
для получения зарегистрированного имени пользователя.
5. Файлы примеров Html/Js/текста
В последней части этого руководства мы создадим три разных типа файлов и протестируем использование новых функций Thymeleaf. Начнем с HTML-файла:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Inlining example</title>
</head>
<body>
<p>Title of tutorial: [[${title}]]</p>
<p>Description: [(${description})]</p>
</body>
</html>
В этом файле мы используем два разных подхода. Чтобы отобразить заголовок, мы используем экранированный синтаксис, который удалит все теги HTML, в результате чего будет отображаться только текст. В случае описания мы используем неэкранированный синтаксис, чтобы сохранить теги HTML. Окончательный результат будет выглядеть так:
<p>Title of tutorial: ForEach</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>
который, конечно, будет проанализирован нашим браузером, отображая слово Thymeleaf жирным шрифтом.
Далее мы приступаем к тестированию функций шаблона js:
var count = [[${students.size()}]];
alert("Number of students in group: " + count);
Атрибуты в режиме шаблона JAVASCRIPT
не будут экранированы JavaScript. Это приведет к созданию js-оповещения. Мы загружаем это оповещение с помощью jQuery AJAX в файл listStudents.html:
<script>
$(document).ready(function() {
$.ajax({
url : "/spring-thymeleaf/js",
});
});
</script>
Последняя, но не менее важная функция, которую мы хотим протестировать, — это генерация простого текстового файла. Мы создали файл studentList.txt со следующим содержимым:
Dear [(${username})],
This is the list of our students:
[# th:each="s : ${students}"]
- [(${s.name})]. ID: [(${s.id})]
[/]
Thanks,
The ForEach University
Обратите внимание, что, как и в случае с режимами шаблона разметки, стандартные диалекты включают только один обрабатываемый элемент ( [# …])
и набор обрабатываемых атрибутов ( th:text, th:utext, th:if, th:unless, th:each).
, так далее.). Результатом будет текстовый файл, который мы можем использовать, например, в электронной почте, как было упомянуто в конце Раздела 3.
Как проверить? Мы предлагаем сначала поиграть с браузером, а затем также проверить существующий тест JUnit.
6. Лист тимьяна в Spring Boot
Spring Boot
обеспечивает автоматическую настройку Thymeleaf
, добавляя зависимость spring-boot-starter-thymeleaf
:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.3.3.RELEASE</version>
</dependency>
Никакой явной конфигурации не требуется. По умолчанию файлы HTML должны размещаться в папке ресурсов/шаблонов
.
7. Заключение
В этой статье мы обсудили новые функции, реализованные в инфраструктуре Thymeleaf, с акцентом на версию 3.0.
Полную реализацию этого руководства можно найти в проекте GitHub — это проект на основе Eclipse, который легко протестировать в любом современном интернет-браузере.
Наконец, если вы планируете перенести проект с версии 2 на эту последнюю версию, ознакомьтесь с руководством по миграции . И обратите внимание, что ваши существующие шаблоны Thymeleaf почти на 100% совместимы с Thymeleaf 3.0, поэтому вам нужно будет внести лишь несколько изменений в свою конфигурацию.