Spring Boot Best Practices (4) Интеграция Thymeleaf с механизмом шаблонов

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

Thymeleaf — это механизм шаблонов Java XML/XHTML/HTML5, который можно использовать как в веб-среде, так и в других средах. Он больше подходит для обслуживания XHTML/HTML5 на уровне представления веб-приложения на основе MVC, но может обрабатывать любой файл XML даже в автономной среде. Он обеспечивает полную интеграцию Spring Framework.

По поводу заявления о том, что Spring рекомендует Thymeleaf, я не видел никаких конкретных указаний в официальных документах Spring, но при сравнении с JSP я упомянул некоторые недостатки JSP и Thymeleaf по сравнению с JSP, а Thymeleaf — это лишь один из других шаблонизаторов. представителя.

В качестве хорошего шаблона двигателя, в дополнение к простоте использованию, активное сообщество, здоровое и быстрое развитие, существует очень важный момент производительность, и что сравнение производительности Thymeleaf 3 и Freemaker - это как, и продолжит обновлять статью Отказ

2. Основное использование Thymeleaf

Использование Thymeleaf состоит из двух частей: метка + выражение, метка — это грамматическая структура Thymeleaf, а выражение — реализация содержимого в грамматике.

Через теги + выражения данные объединяются с шаблоном и, наконец, преобразуются в html-код и возвращаются пользователю.

Основное использование Thymeleaf разделено на три части:

использование ярлыка
Выражения используют
Установите IDEA для завершения кода для Thymeleaf

1. Использование ярлыка

1.1 й: текстовый вывод основной информации

HTML-код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

Java-код:

@RequestMapping("/")
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/index");
    modelAndView.addObject("name", "老王");
    return modelAndView;
}

окончательный эффект:老王

1.2 th:вывод html-контента utext

Используйте "th:text" для вывода содержимого как есть, и используйте "th:utext" для вывода html-тегов.

Java-код:

@RequestMapping("/eat")
public ModelAndView eat() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "<span style='color:red'>老王是吃货</span>");
    return modelAndView;
}

HTML-код:

<h4 th:text="'th:text '+${data}"></h4>
<h4 th:utext="'th:utext '+${data}"></h4>

Отображение результатов:

1.3 й: если, й: если условное суждение

<span th:if="${age > 18}">
    成年
</span>
<span th:unless="${age > 18}">
    未成年
</span>

th:if — это бизнес-процесс, отвечающий условиям, а th:unless — прямо противоположное, означающее удаление.

1.4 th:switch, th:case решение по множеству условий

<div th:switch="${age}">
    <span th:case="18">18岁</span>
    <span th:case="19">19岁</span>
    <spa th:case="*">其他</spa>
</div>

Уведомление:Использование параметров по умолчаниюth:case="*"указано.

1,5 п.: в каждую петлю

HTML-код:

<div th:each="name,item:${names}">
    <span th:text="${item.count}"></span>
    <span th:text="${name}"></span>
</div>

Java-код:

@RequestMapping("/")
public ModelAndView index() {
    ArrayList<String> names = new ArrayList<>();
    names.add("java");
    names.add("golang");
    names.add("nodejs");
    ModelAndView modelAndView = new ModelAndView("/index"); 
    modelAndView.addObject("names",names);
    return modelAndView;
}

Эффект доступа выглядит следующим образом:

Где элемент — это подробное значение каждой строки, а значение ключа выглядит следующим образом:

индекс индекса, начиная с 0
считать x, начиная с 1
размер размер этой коллекции
текущее значение текущей строки

1.6 th:fragment, th:insert, th:replace, th:include повторное использование фрагмента кода

Тег th:fragment — это декларативный фрагмент кода, который используется для решения проблемы повторного использования кода, точно так же, как общедоступный код, написанный Java-программой, который может вызываться непосредственно везде, где это необходимо;
th:insert относится к коду фрагмента и сохраняет свою основную метку;
th: заменить ссылки фрагмент кода, который не сохраняет свою первичную метку;
th:include использует аналогичный th:replace, который устарел после Thymeleaf 3.0;

код страницы footer.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="copyright">
    © 著作权归 老王 所有
</div>

<div th:fragment="about">
    关于
</div>

<div th:fragment="links">
    CCTV
</div>

</body>
</html>

Декларируются два фрагмента кода, авторское право и about.

Код страницы cat.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<div th:replace="footer :: copyright"></div>

<div th:insert="footer :: about"></div>

<div th:include="footer :: links"></div>
</body>
</html>

Первый div ссылается на фрагмент кода из footer.html, а второй — на фрагмент about из footer.html.

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

Эффект от исполнения следующий:

Суммировать:Хорошо видно, что разница между th:insert, th:replace и th:include заключается в том, следует ли сохранять собственный основной тег.th:include устарел после версии 3.0 и может быть заменен тегом th:replace.

Улучшить класс - параметры передачи кода фрагмента

Используя фрагмент, мы можем передавать параметры в html-коде, например, мы определяем top.html с подсказкой «Добро пожаловать XXX», и имя этого человека XXX нужно передавать динамически, чтобы мы могли максимально завершить код. , Повторное использование, на этот раз хороший сценарий использования, нам нужно это сделать.

Код main.html страницы:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:replace="footer :: webcome('老王')"></div>

</body>
</html>

страница top.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="webcome(about)">
    <span th:text="'欢迎：'+${about}"></span>
</div>

</body>
</html>

Конечный эффект:

1.7 th:with определяет локальные переменные

Код страницы:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<div th:with="sum=4-2">
    <span th:text="${sum}"></span>
</div>
</body>
</html>

Выход страницы: 2

1.8 й: удалить удалить теги

th:remove используется для удаления html-кода.Существует пять значений th:remove:

all удалить весь код в этом разделе
Тело удаляет все элементы в главном теге
тег удалить основной тег, сохранить все элементы основного тега
все, кроме первого, сохранить основной тег и первый элемент, удалить все остальное
none не удаляет теги

Пример кода index.html выглядит следующим образом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div id="all" th:remove="all">
    <span>all</span>
    <span>1</span>
</div>

<div id="body" th:remove="body">
    <span>body</span>
    <span>2</span>
</div>

<div id="tag" th:remove="tag">
    <span>tag</span>
    <span>3</span>
</div>


<div id="all-but-first" th:remove="all-but-first">
    <span>all-but-first</span>
    <span>4</span>
</div>

<div id="none" th:remove="none">
    <span>none</span>
    <span>5</span>
</div>

</body>
</html>

Окончательный эффект отображения выглядит следующим образом:

1.9 Другие этикетки

TH: стиль определения стиля<div th:style="'color:'+${skinColor}">
th:событие клика onclick<input type="button" value=" Click " th:onclick="'onsub()'">
th:href присвоение атрибута href<a th:href="${myhref}"></a>
th: значение атрибута присваивания значения<input th:value="${user.name}" />
th:src назначает src<img th:src="${img}" />
th: действие назначение атрибута действие<form th:action="@{/suburl}">
th:id идентификатор атрибута назначения<form id="${fromid}">
th:attr определяет несколько атрибутов<img th:attr="src=@{/img/stone.jpg},alt=${alt}" />
th:object определяет объект<div th:object="${user}">
...

2. Использование выражений

2.1 Резюме выражения

2.1.1 Простые выражения

Выражение переменной: ${...} Выберите переменное выражение: *{...} Выражение сообщения: #{...} Выражение ссылки: @{...} Выражение фрагмента: ~{...}

2.1.2 Типы данных

Текст: 'один текст', 'Еще один!',… Числовые литералы: 0, 34, 3.0, 12.3,… Логические литералы: истина, ложь литерал NULL: ноль Словесные теги: one, sometext, main,…

2.1.3 Работа с текстом

Объединение строк: + Буквальная замена: |Имя ${имя}|

2.1.4 Арифметические операции

Бинарные операторы: +, -, *, /, % Знак минус (унарный оператор): -

2.1.5 Булевы операции

Бинарные операторы: и, или Логическое отрицание (унарный оператор): !, False

2.1.6 Условные операторы

Значения сравнения: >, =,

2.1.7 Условное суждение

если-то: (если) ? (тогда) если-то-иначе: (если) ? (тогда): (иначе) По умолчанию: (значение) ?: (значение по умолчанию)

Все вышеперечисленные выражения можно комбинировать и вкладывать друг в друга, например:

'User is of type ' + ({user.type} ?: 'Unknown'))

2.2 Примеры использования выражений

2.2.1 переменное выражение $ {...}

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

Java-код:

public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "我是老王");
    return modelAndView;
}

HTML-код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${data}"></span>
</body>
</html>

окончательный эффект:

2.2.2 Выражение выбора *{...}

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

<div th:object="${goods}">
    <span th:text="${goods.name}"></span>
    <span th:text="*{price}"></span>
    <span th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
</div>

окончательный эффект:

iMac 7999.0 2018-08-10 14:03:51

Суммировать:*{price} = ${goods.price} просто опускает префикс "товары", эффект тот же.

2.2.3 Цепочка выражений @{...}

Для преобразования URL-адреса код выглядит следующим образом:

<a th:href="@{/footer(id=666,name=laowang)}">链接</a>

Окончательный эффект рендеринга:

<a href="/footer?id=666&name=laowang">链接</a>

Цепочка выражений, параметры могут передаваться через запятую.

Относительный путь к корневому каталогу сервера: @{~/path/to/something}

2.2.4 Работа с текстом

Текстовые операции делятся на две части: добавление текста, замена текста.

Правописание текста:

<span th:text="'我叫'+${name}"></span>

Замена текста:

Синтаксис замены текста: |content${tag}|

<span th:text="|我叫${name}，是一名开发工程师。|"></span>

2.2.5 Тернарные выражения

2.2.6 Роль двойных скобок

<p th:text="${val}">...</p>
<p th:text="${{val}}">...</p>

результат:

<p>1234567890</p>
<p>1,234,567,890</p>

2.2.7 Встраивание текстовых меток

Хотя стандартные теги подходят почти для всех бизнес-сценариев, в некоторых случаях мы предпочитаем писать HTML-текст напрямую, например:

<p>Hello, [[${name}]]</p>

Есть два способа написать встроенный текст "[[...]]" и "[(...)]", которые действуют как th:text и th:utext соответственно, например:

<p>
    [[${name}]]
</p>
<p>
    [(${name})]
</p>

Эффект, который вы видите, таков:

2.3 Обзор объектов-выражений

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

2.3.1 Базовые объекты выражений

#ctx: Управление текущим контекстом.
#vars:Управление переменными контекста.
#request: (только для веб-проектов)HttpServletRequestобъект.
#response: (только для веб-проектов)HttpServletResponseобъект.
#session: (только для веб-проектов)HttpSessionобъект.
#servletContext: (только для веб-проектов)ServletContextобъект.

2.3.2 Служебные классы выражений

#execInfo: класс инструмента для работы с шаблонами, включая некоторую информацию о шаблоне, такую как:${#execInfo.templateName} .
#uris: инструмент для обработки URL
#conversions: methods for executing the configured conversion service (if any).
#dates: Метод исходит изjava.util.DateОбъекты, время обработки, например: форматирование.
#calendars: похожий на#dates, но изjava.util.Calendarобъект.
#numbers: Используется для форматирования чисел.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: метод обычного объекта.
#bools: Инструмент для определения типа bool.
#arrays: Инструмент для работы с массивами.
#lists: Список данных манипуляции.
#sets: Установить рабочий инструмент.
#maps: инструмент для работы с картой.
#aggregates: инструменты для работы с массивами или коллекциями.

Для конкретных методов в каждом классе щелкните, чтобы просмотреть:woohoo.thyme leaf.org/doc/tutor IA…

3. IDEA устанавливает автодополнение Thymeleaf

Сначала о рендерах:

IDEA включает поддержку плагинов Thymeleaf по умолчанию. Если вам не нужно подтверждать это, посетите:woohoo.jet brains.com/help/idea/2…

Но просто настроив вышеуказанный эффект, его все равно нельзя будет нормально использовать, потому что вам нужно объявить пространство имен Thymeleaf в htmlxmlns:th="http://www.thymeleaf.org", полный код выглядит следующим образом:

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2 th:text="${hi}"></h2>
</body>
</html>

Код ключа:

xmlns:th="www.thymeleaf.org"

Таким образом, когда вы вводите «th:» в коде, вы увидите все теги Thymeleaf.

Три, интеграция Spring Boot Thymeleaf

3.1 Среда разработки

Spring Boot 2.0.4
Thymeleaf 3.0.9
Jdk 8
Windows 10
IDEA 2018.2

Перед формальной интеграцией движка Thymeleaf давайте взглянем на структуру каталогов, как показано ниже:

3.2 Структура каталогов Spring MVC

Удалите имя пакета, давайте объясним, что представляют собой эти каталоги:

общий общий публичный класс
класс контроллера контроллера
класс взаимодействия с данными дао
класс обработки бизнес-логики службы
Файл запуска Application.java
папка хранения статических файлов ресурсов
ресурсы/шаблоны Каталог хранения всех каталогов Thymeleaf
Ресурсы / Application.Properties Глобальный класс конфигурации
Файл конфигурации Pom.xml maven

3.3 Интеграция Spring Boot Thymeleaf разделен на четыре этапа:

pom.xml добавить механизм шаблонов Thymeleaf
application.properties настроить информацию Thymeleaf
Создайте класс контроллера, напишите код
Создавайте шаблоны, пишите html код

Далее мы подробно рассмотрим конкретные шаги.

3.3.1 pom.xml добавить шаблонизатор Thymeleaf

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

3.3.2 application.properties настроить информацию Thymeleaf

# 启用缓存:建议生产开启
spring.thymeleaf.cache=false
# 建议模版是否存在
spring.thymeleaf.check-template-location=true
# Content-Type 值
spring.thymeleaf.servlet.content-type=text/html
# 是否启用
spring.thymeleaf.enabled=true
# 模版编码
spring.thymeleaf.encoding=utf-8
# 应该从解析中排除的视图名称列表（用逗号分隔）
spring.thymeleaf.excluded-view-names=
# 模版模式
spring.thymeleaf.mode=HTML5
# 模版存放路径
spring.thymeleaf.prefix=classpath:/templates/
# 模版后缀
spring.thymeleaf.suffix=.html

Общие инструкции по настройке Thymeleaf

элемент конфигурации	Типы	По умолчанию	предлагаемое значение	иллюстрировать
spring.thymeleaf.enabled	bool	true	По умолчанию	Включить ли
spring.thymeleaf.mode	String	HTML	По умолчанию	Тип шаблона, можно установить HTML5
spring.thymeleaf.cache	bool	true	По умолчанию	Включить ли кэширование, рекомендуется установить для среды сборки значение true.
spring.thymeleaf.prefix	String	classpath:/templates/	По умолчанию	Путь хранения шаблона
spring.thymeleaf.suffix	String	.html	По умолчанию	суффикс шаблона
spring.thymeleaf.servlet.content-type	String	text/html	По умолчанию	Значение типа содержимого
spring.thymeleaf.encoding	String	-	utf-8	Кодировка шаблона

3.3.3 Создание класса контроллера и написание кода

Создаем index.java в папке контроллера, код такой:

package com.hello.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/")
public class Index {

    @RequestMapping("/")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView("/index");
        modelAndView.addObject("name", "王磊的博客");
        return modelAndView;
    }
}

Интерпретация кода ключа:

Аннотация @ResponseBody: если используется эта аннотация, возвращаемый результат будет выводиться напрямую вместо использования механизма шаблонов для рендеринга.
Используйте объект ModelAndView, укажите имя представления и добавьте объект представления

3.3.4 Создайте шаблон и напишите html-код

Мы создаем index.html в разделе ресурсов/шаблонов со следующим кодом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

Чтобы начать отладку, введите в браузере:http://localhost:8080/

Эффект следующий:

Соответствующий код GitHub:GitHub.com/VIP stone/Билеты…

4. Ссылки

официальная документация тимелеафаwoohoo.thyme leaf.org/doc/tutor IA…

официальная документация тимелеафа Spring + Thymeleaf:woohoo.thyme leaf.org/doc/tutor IA…