Thymeleaf 5 分钟教程

Thymeleaf 是一个用于 web 和独立环境的现代服务器端 Java 模板引擎。

Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板ー HTML，它既可以在浏览器中正确显示，也可以作为静态原型工作，从而加强开发团队之间的协作。

有了 Spring Framework 的模块、大量与您最喜欢的工具集成的功能，以及插入您自己功能的能力，Thymeleaf 是现代 HTML5 JVM web 开发的理想选择ーー尽管它可以做的还有很多。

用 Thymeleaf 语言编写的 HTML 模板看起来和工作方式仍然类似于 HTML，使得在应用程序中运行的实际模板仍然可以作为有用的设计工件工作。

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</th>
      <th th:text="#{msgs.headers.price}">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod: ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
    </tr>
  </tbody>
</table>

Thymeleaf 3.0.11.RELEASE is the current stable version. It requires Java SE 6 or newer.

• Release date: 29 October 2018
• Announcement: Thymeleaf 3.0.11
• Change Logs: thymeleaf | thymeleaf-spring3 | thymeleaf-spring4 | thymeleaf-spring5

For the old 2.1.x branch, Thymeleaf 2.1.6.RELEASE is the latest version.

标准方言

称为 Standard 和 SpringStandard ，这些方言定义了一组特性，对于大多数场景来说，这些特性应该足够了。 你可以识别这些标准方言何时在模板中使用，因为它包含以 th 前缀开头的属性，比如 span th: text..."。

${...} : Variable expressions.
*{...} : Selection expressions.
#{...} : Message (i18n) expressions.
@{...} : Link (URL) expressions.
~{...} : Fragment expressions.

Variable expressions.

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

Variable expressions

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

所以这相当于:

{
  // th:object="${book}"
  final Book selection = (Book) context.getVariable("book");
  // th:text="*{title}"
  output(selection.getTitle());
}

消息表达式(通常称为文本外部化、国际化或 i18n)允许我们从外部源(。 属性文件) ，通过键引用它们，并(可选地)应用一组参数。

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

1. 链接表达式 意味着构建 URL 并向其添加有用的上下文和会话信息(一个通常称为 URL 重写的过程)。

因此，对于部署在 web 服务器的 / myapp 上下文中的 web 应用程序，可以使用如下表达式:

<a th:href="@{../documents/report}">...</a>

可以转换成这样的东西:

<a href="/myapp/order/list">...</a>

Url 也可以带参数:

<a th:href="@{/order/details(id=${orderId},type=${orderType})}">...</a>

导致这样的结果:

<!-- Note ampersands (&) should be HTML-escaped in tag attributes... -->
<a href="/myapp/order/details?id=23&amp;type=online">...</a>

链接表达式可以是相对的，在这种情况下，没有应用程序上下文将前缀的 URL:

<a th:href="@{../documents/report}">...</a>

还有服务器相关(同样，没有应用程序上下文可以前缀) :

<a th:href="@{~/contents/main}">...</a>

和 protocol-relative (就像绝对 url 一样，但是浏览器将使用与显示页面相同的 HTTP 或 HTTPS 协议) :

<a th:href="@{//static.mycompany.com/res/initial}">...</a>

当然，Link 表达式可以是绝对的:

<a th:href="@{http://www.mycompany.com/main}">...</a>

1. 片段表达式 是表示标记片段并在模板中移动它们的简单方法。 由于这些表达式，片段可以被复制，作为参数传递给其他模板，等等。

<div th:insert="~{commons :: main}">...</div>

但是它们可以在任何地方使用，就像任何其他变量一样:

<div th:with="frag=~{footer :: #main/text()}">
  <p th:insert="${frag}">
</div>

文字和操作

A good bunch of types of literals and operations are available:

Literals: Text literals: 'one text', 'Another one!',… Number literals: 0, 34, 3.0, 12.3,… Boolean literals: true, false Null literal: null Literal tokens: one, sometext, main,…

Text operations: 文本运算 String concatenation: + Literal substitutions: |The name is ${name}| Arithmetic operations: Binary operators: +, -, *, /, % Minus sign (unary operator): -

Boolean operations: 布尔运算 Binary operators: and, or Boolean negation (unary operator): !, not

Comparisons and equality: 比较运算 Comparators: >, <, >=, <= (gt, lt, ge, le) Equality operators: ==, != (eq, ne)

Conditional operators: 条件运算 If-then: (if) ? (then) If-then-else: (if) ? (then) : (else) Default: (value) ?: (defaultvalue)

一些基本属性

让我们来看看文学语言中的一些最基本的属性。 以 th: text 开始，它只是替换了标记的主体(请再次注意这里的原型化能力) :

<p th:text="#{msg.welcome}">Welcome everyone!</p>

接下来是 each，它会重复数组或表达式返回的元素的次数，并为迭代元素创建一个内部变量，其语法与 Java foreach 表达式相同:

<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>

最后，Thymeleaf 为特定的 XHTML 和 HTML5属性包含了许多 th 属性，这些属性只是评估它们的表达式并将这些属性的值设置为它们的结果。 他们的名字模仿了他们设置的属性值:

<form th:action="@{/createOrder}">

<input type="button" th:value="#{form.submit}" />

<a th:href="@{/admin/users}">

thymeleaf th:if表达式语法 网页应用

<td class="td-status" th:if="${product.status} eq 1">
    <span class="label label-success radius">已上架</span>
</td>

<a th:if="${product.status} ne 2 " class="ml-5"  href="javascript:;" title="发布秒杀">
    <i class="Hui-iconfont">&#xe603;</i>
</a>

参考

thymeleaf th:if表达式语法 https://blog.csdn.net/weixin_38970805/article/details/82937465