Рубрики
Без рубрики

Spring MVC + Thymeleaf 3.0: Новые функции

Краткое и практическое руководство по использованию новых функций Thymeleaf 3 с Spring

Автор оригинала: baeldung.

1. введение

Thymeleaf – это Java-шаблонный движок для обработки и создания HTML, XML, JavaScript, CSS и обычного текста. Для вступления к Thymeleaf и Spring взгляните на эту статью .

В этой статье мы обсудим новые возможности Thymeleaf 3.0 в Spring MVC с приложением Thymeleaf. Версия 3 поставляется с новыми функциями и многими улучшениями под капотом. Чтобы быть более конкретным, мы рассмотрим темы естественной обработки и встраивания Javascript.

Thymeleaf 3.0 включает в себя три новых режима текстовых шаблонов: TEXT , JAVASCRIPT и CSS , которые предназначены для обработки шаблонов plain, JavaScript и CSS соответственно.

2. Зависимости Maven

Во-первых, давайте посмотрим конфигурации, необходимые для интеграции Thymeleaf с Spring; thymeleaf-spring библиотека требуется в наших зависимостях:


    org.thymeleaf
    thymeleaf
    3.0.11.RELEASE


    org.thymeleaf
    thymeleaf-spring5
    3.0.11.RELEASE

Обратите внимание, что для проекта Spring 4 библиотека thymeleaf-spring4 должна использоваться вместо thymeleaf-spring 5 . Последнюю версию зависимостей можно найти здесь .

3. Конфигурация Java Thymeleaf

Во-первых, нам нужно настроить новый механизм шаблонов, представление и распознаватели шаблонов. Для этого нам нужно обновить созданный класс Java config

Для этого нам нужно обновить класс Java config, созданный здесь . В дополнение к новым типам резольверов, наши шаблоны реализуют Spring interface ApplicationContextAware :

@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.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. Конфигурация Пружинного Контроллера

Чтобы протестировать нашу новую конфигурацию, мы создали следующий весенний контроллер:

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "Thymeleaf 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 – файл с информацией о студентах. Обратите внимание, что мы используем простой build Students() метод внутри Student Utils класса, из этой статьи .

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

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

5. Файлы Примеров Html/Js/Text

Последняя часть этого урока состоит в создании трех различных типов файлов и тестировании использования новых функций Thymeleaf. Начнем с HTML файла:





    
    Inlining example


    
Title of tutorial: [[${title}]]

    
Description: [(${description})]

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

Title of tutorial: Baeldung


Description: Thymeleaf tutorial

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

Далее мы приступим к тестированию функций шаблона js:

var count = [[${students.size()}]];
alert("Number of students in group: " + count);

Атрибуты в режиме JAVASCRIPT template будут JavaScript-unescaped. Это приведет к созданию js-оповещения. Мы загружаем это предупреждение, используя jQuery AJAX, в listStudents.html файл:

Последняя, но не менее важная функция, которую мы хотим протестировать, – это генерация текстовых файлов. Мы создали studentsList.txt файл со следующим содержимым:

Dear [(${username})],

This is the list of our students:
[# th:each="s : ${students}"]
   - [(${s.name})]. ID: [(${s.id})]
[/]
Thanks,
The Baeldung University

Обратите внимание, что, как и в случае с режимами шаблонов разметки, стандартные диалекты включают только один обрабатываемый элемент ( [# …]) и набор обрабатываемых атрибутов ( th:text, th:utext, th:if, th:unless, th:each и т. Д.). Результатом будет текстовый файл, который мы можем использовать, например, в электронной почте, как это было упомянуто в конце раздела 3.

Как проверить? Наше предложение состоит в том, чтобы сначала поиграть с браузером, а затем проверить существующий тест JUnit.

6. Тимелиф в весеннем ботинке

Spring Boot обеспечивает автоматическую настройку для Thymeleaf путем добавления зависимости spring-boot-starter-thymeleaf :


    org.springframework.boot
    spring-boot-starter-thymeleaf
    2.3.3.RELEASE

Явная настройка не требуется. По умолчанию HTML-файлы должны быть помещены в папку resources/templates .

7. Заключение

В этой статье мы обсудили новые функции, реализованные в Thymeleaf framework с акцентом на версию 3.0.

Полную реализацию этого учебника можно найти в проекте GitHub – это проект на основе Eclipse, который легко протестировать в любом современном интернет-браузере.

Наконец, если вы планируете перенести проект с версии 2 на эту последнюю версию, посмотрите здесь в руководстве по миграции . И обратите внимание, что ваши существующие шаблоны Thymeleaf почти на 100% совместимы с Thymeleaf 3.0, так что вам придется сделать только несколько изменений в вашей конфигурации.

Читайте ещё по теме: