Подробное объяснение использования Thymeleaf

задняя часть сервер Spring JavaScript

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

Проще говоря, Thymeleaf — это шаблонизатор, похожий на Velocity и FreeMarker, который может полностью заменить JSP. По сравнению с другими механизмами шаблонов он имеет следующие три привлекательные особенности:
  • Thymeleaf может работать как в сетевой, так и в несетевой среде, то есть он позволяет художникам просматривать статический эффект страницы в браузере, а также позволяет программисту просматривать динамический эффект страницы данных на сервере. Это связано с тем, что он поддерживает прототипы HTML, а затем добавляет дополнительные атрибуты к тегам HTML для отображения шаблона и данных. Браузеры игнорируют неопределенные атрибуты тегов при интерпретации HTML, поэтому шаблоны Thymeleaf могут работать статически; когда данные возвращаются на страницу, теги Thymeleaf динамически заменяют статическое содержимое, делая страницу динамически отображаемой.
  • Особенности Thymeleaf из коробки. Он предоставляет стандартные и стандартные диалекты Spring, которые могут напрямую применять шаблоны для достижения эффекта выражений JSTL и OGNL, избегая проблем с настройкой шаблонов, изменением JSTL и изменением тегов каждый день, а разработчики могут расширять и создавать собственные диалекты.
  • Thymeleaf предоставляет стандартные диалекты Spring и еще один дополнительный модуль, идеально интегрированный со SpringMVC, который может быстро реализовать такие функции, как привязка форм, редактор свойств, интернационализация и т. д.


Синтаксис стандартного выражения

Они делятся на четыре категории:
1. Переменные выражения
2. Выберите или звездочка выражение
3. Выражения интернационализации текста
4. URL-выражения

переменное выражение

Переменные выражения — это либо выражения OGNL, либо выражения Spring EL (также называемые атрибутами модели в терминологии Spring). Следующее:
${session.user.name}
Они будут представлены как атрибут тега HTML:

<span th:text="${book.author.name}">
<li th:each="book : ${books}">

выберите (звездочка) выражение

Выражения выбора очень похожи на выражения переменных, но они выполняются с предварительно выбранным объектом вместо контейнера контекстной переменной (карты), как показано ниже:
 *{customer.name} 
Указанный объект определяется атрибутом th:object:

 <div th:object="${book}">
        ...
        <span th:text="*{title}">...</span>
        ...
 </div>

буквальные выражения интернационализации

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

#{main.title}
#{message.entrycreated(${entryId})}
Такой код выражения можно найти в файле шаблона:

 <table>
        ...
        <th th:text="#{header.address.city}">...</th>
        <th th:text="#{header.address.country}">...</th>
        ...
 </table>

URL-выражения

Выражение URL-адреса относится к добавлению полезного контекста или информации о сеансе к URL-адресу, процесс, часто называемый перезаписью URL-адреса:
 @{/order/list} 
URL-адреса также могут устанавливать параметры:
 @{/order/details(id=${orderId})}  
относительный путь:
 @{../documents/report} 
Давайте посмотрим на эти выражения:

 <form th:action="@{/createOrder}">
 <a href="main.html" th:href="@{/main}">

Разница между выражением переменной и выражением звездочки

Между ними нет никакой разницы, если контекст не принимается во внимание; оценка синтаксиса звездочки выражается для выбранного объекта, а не для всего контекста.

Что такое выбранный объект? является значением родительского тега, как показано ниже:

  <div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>

Это точно эквивалентно:

 <div th:object="${session.user}">
	  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
	  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
	  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
 </div>
Конечно, синтаксис знака доллара и звездочки можно смешивать:

<div th:object="${session.user}">
	  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  	  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

Общие тэги

1.all: удаляет содержащий тег и все дочерние элементы. 2.body: не содержит маркера для удаления, но удаляет все его дочерние элементы. 3.tag: содержит удаление тега, но не удаляет его дочерние элементы. 4. все, кроме первого: удалить всех дочерних элементов, содержащих метку, кроме первого. 5.none: ничего не делать. Это значение полезно для динамической оценки.
ключевые слова
Функции
кейс
th:id
заменить идентификатор
<input th:id="'xxx' + ${collect.id}"/>
th:text
замена текста
<p th:text="${collect.description}">description</p>
th:utext
Замена текста с поддержкой html
<p th:utext="${htmlcontent}">conten</p>
th:object
заменить объект
<div th:object="${session.user}">
th:value
уступка имущества
<input th:value="${user.name}" />
th:with
операция присваивания переменной
<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style
задать стиль
th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick
событие щелчка
th:onclick="'getCollect()'"
th:each
присвоение цикла свойства
tr th:each="user,userStat:${users}">
th:if
Анализ условий
<a th:if="${userId == collect.userId}" >
th:unless
Вопреки суждению
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href
адрес ссылки
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch
Использование мультиплексирования с th:case
<div th:switch="${user.role}">
th:case
th: ветвь переключателя
<p th:case="'admin'">User is an administrator</p>
th:fragment
Теги макета, определите фрагмент кода для удобства ссылки в другом месте
<div th:fragment="alert">
th:include
Теги макета, замена содержимого импортированными файлами
<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace
Теги макета, заменяющие весь тег в импортированном файле
<div th:replace="fragments/header :: title"></div>
th:selected
выбранное поле выбора
Выбрано th:selected="(${xxx.id} == ${configObj.dd})"
th:src
Введение адреса класса изображения
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline
Определить скрипт js может использовать переменную
<script type="text/javascript" th:inline="javascript">
th:action
адрес отправки формы
<form action="subscribe.html" th:action="@{/subscribe}">
th:remove
удалить атрибут
th:attr
Установите атрибуты тега, несколько атрибутов могут быть разделены запятыми
Например, th:attr="src=@{/image/aa.jpg},title=#{logo}", этот тег выглядит не очень элегантно и обычно используется реже.
Существует много тегов, и здесь перечислены только наиболее часто используемые.Поскольку тег может содержать несколько атрибутов th:x, порядок приоритета его действия следующий: включить,каждый,если/если/если/переключатель/случай, с ,attr/attrprepend/attrappend,value/href,src и т. д.,текст/utext,фрагмент,удалить

Несколько часто используемых методов

1. Присваивание, конкатенация строк

 <p  th:text="${collect.description}">description</p>
 <span th:text="'Welcome to our application, ' + ${user.name} + '!'">
Есть еще один лаконичный способ записи конкатенации строк:
<span th:text="|Welcome to our application, ${user.name}!|">

2. Условное суждение Если/Если

Thymeleaf использует атрибуты th:if и th:unless для условного суждения.В следующем примере тег отображается только тогда, когда условие в th:if истинно: 

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>
th:unless является противоположностью th:if, и его содержимое отображается только в том случае, если условие в выражении не выполняется.
Вы также можете использовать синтаксис (если) ? (тогда) : (иначе), чтобы определить, что отображать.

3. Для цикла

 <tr  th:each="collect,iterStat : ${collects}">
      <th scope="row" th:text="${collect.id}">1</th>
     <td >
        <img th:src="${collect.webLogo}"/>
     </td>
     <td th:text="${collect.url}">Mark</td>
     <td th:text="${collect.title}">Otto</td>
     <td th:text="${collect.description}">@mdo</td>
     <td th:text="${terStat.index}">index</td>
 </tr>
iterStat называется переменной состояния и имеет следующие свойства:
  • index: индекс текущего объекта итерации (рассчитывается от 0)
  • count: индекс текущего объекта итерации (рассчитывается от 1)
  • size: размер итерируемого объекта
  • current: текущая переменная итерации
  • четный/нечетный: логическое значение, является ли текущий цикл четным/нечетным (считая с 0)
  • first: логическое значение, является ли текущий цикл первым
  • last: логическое значение, является ли текущий цикл последним

4. Встроенный js

Встроенный текст: [[…]] Представление встроенного текста. При использовании его необходимо активировать с помощью th:inline="text/javascript/none". th:inline можно использовать в родительских тегах, даже в качестве метки тела. Встроенный текст, хотя и содержит меньше кода, чем th:text, не способствует отображению прототипа.

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>
js дополнительный код:
var msg = 'This is a working application';
js удалить код:
var msg = 'This is a non-working template';


Категории