## Thymeleaf快速入门
Thymeleaf 是一种现代化的 Java 模板引擎，广泛用于生成 HTML、XML、JavaScript 等内容。它有许多内置的指令和功能，用于渲染动态内容、条件渲染、循环、处理表达式等。以下是 Thymeleaf 中常见的指令和属性的详细介绍：

### 1. `th:text`
用于替换元素的文本内容。

```html
<span th:text="${message}"></span>

```

+ `${message}` 的值会替换 `span` 元素的文本。

> 如果需要格式化日期，需要注意，使用`temporals`进行操作
>

```html
<td class="text-success" th:text="${#temporals.format(bill.transactionDate,'yyyy-MM-dd HH:mm:ss')}"></td>
```

```plain

```

### 2. `th:utext`
用于替换元素的文本内容，并允许处理 HTML 标签（不会转义 HTML）。

```html
<span th:utext="${htmlContent}"></span>

```

+ `${htmlContent}` 的内容直接插入，并解析其中的 HTML。

### 3. `th:value`
设置表单元素的 `value` 属性，通常用于输入框或选择框。

```html
<input type="text" th:value="${user.name}" />
```

+ 将 `${user.name}` 的值赋给该输入框的 `value` 属性。

### 4. `th:each`
用于循环遍历集合或数组。

```html
<ul>
    <li th:each="person : ${people}">
        <span th:text="${person.name}"></span>
    </li>
</ul>

```

+ 遍历 `people` 集合，输出每个 `person.name`。

### 5. `th:if`
用于条件渲染，只有满足条件时才渲染元素。

```html
<div th:if="${user.isAdmin}">
    <p>Welcome, admin!</p>
</div>

```

+ 如果 `user.isAdmin` 为 `true`，渲染该 `div`。

### 6. `th:unless`
与 `th:if` 相反，只有条件为 `false` 时才渲染元素。

```html
<div th:unless="${user.isAdmin}">
    <p>You are not an admin!</p>
</div>

```

+ 如果 `user.isAdmin` 为 `false`，渲染该 `div`。

### 7. `th:attr`
用于设置元素的多个属性。

```html
<img th:attr="src=${imageUrl}" th:attr="alt=${imageDescription}" />
```

+ 设置 `img` 元素的 `src` 和 `alt` 属性。

### 8. `th:src`** / **`th:href`
用于动态设置 `src` 或 `href` 属性。

```html
<img th:src="@{${imageUrl}}" alt="Image">
<a th:href="@{${linkUrl}}">Click Here</a>

```

+ `th:src` 用于设置图片的 `src` 属性，`th:href` 用于设置链接的 `href` 属性。

### 9. `th:class`
动态设置 `class` 属性，支持条件表达式。

```html
<div th:class="${isActive} ? 'active' : 'inactive'">...</div>

```

+ 如果 `isActive` 为 `true`，设置 `class="active"`，否则为 `inactive`。

### 10. `th:classappend`** / **`th:classprepend`
分别在现有的 `class` 属性上追加或前置新类。

```html
<div th:classappend="'newClass'">...</div>
<div th:classprepend="'prefixClass'">...</div>

```

+ `th:classappend` 会将新的类追加到现有类的后面。
+ `th:classprepend` 会将新的类添加到现有类的前面。

### 11. `th:id`
设置元素的 `id` 属性。

```html
<input type="text" th:id="${elementId}" />
```

+ 设置 `input` 元素的 `id` 为 `${elementId}` 的值。

### 12. `th:action`
设置表单的 `action` 属性。

```html
<form th:action="@{/submitForm}" method="post">
    <!-- form fields -->
</form>

```

+ 设置表单的 `action` 为 `/submitForm`。

### 13. `th:style`
设置元素的 `style` 属性。

```html
<div th:style="'color: ' + ${color}"></div>

```

+ 动态设置 `style` 属性，`${color}` 的值会成为 `color` 样式的值。

### 14. `th:fragment`
定义一个可重用的片段，通常在模板中调用。

```html
<div th:fragment="userFragment">
    <p>Welcome, <span th:text="${user.name}"></span></p>
</div>

```

+ 定义一个 `userFragment` 片段，可以在其他模板中引用。

### 15. `th:replace`
替换当前元素，并将一个片段或其他模板插入其中。

```html
<div th:replace="~{userFragment}"></div>

```

+ `th:replace` 会将 `userFragment` 片段的内容插入到当前 `div` 中。

### 16. `th:include`
将另一个模板的内容插入当前模板中，但不会替换当前元素。

```html
<div th:include="~{userFragment}"></div>

```

+ 插入 `userFragment` 的内容，但保留当前 `div` 元素。

### 17. `th:with`
局部变量声明，用于在模板中定义临时变量。

```html
<div th:with="total=${cart.totalPrice}">
    <p th:text="'Total price: ' + ${total}"></p>
</div>

```

+ `th:with` 用于在当前元素的上下文中定义变量，类似于局部变量。

### 18. `th:block`
在模板中定义一个不会渲染任何 HTML 标签的块元素。用于组合多个元素。

```html
<th:block th:each="person : ${people}">
    <p th:text="${person.name}"></p>
</th:block>

```

+ `th:block` 不会渲染任何标签，但可以用来包装多个元素进行条件判断或循环。

### 19. `th:switch`** / **`th:case`
类似于 Java 中的 `switch` 语句，用于条件选择。

```html
<div th:switch="${status}">
    <span th:case="'active'">Active</span>
    <span th:case="'inactive'">Inactive</span>
    <span th:case="*">Unknown</span>
</div>

```

+ 根据 `${status}` 的值，渲染对应的 `span` 元素。

### 20. `th:object`
用来为表单元素绑定一个对象。

```html
<form th:action="@{/submit}" th:object="${user}">
    <input type="text" th:field="*{name}" />
    <input type="text" th:field="*{email}" />
    <button type="submit">Submit</button>
</form>

```

+ `th:object` 绑定整个表单到 `user` 对象。
+ `th:field` 用于绑定每个表单字段到对象的属性。

### 21. `th:href`** / **`th:src`
用于动态设置 URL 值。

```html
<a th:href="@{/users/{id}(id=${user.id})}">Profile</a>
<img th:src="@{/images/{imageName}(imageName=${image.name})}" />
```

+ 动态生成 URL，支持路径变量的替换。

### 22. `th:placeholder`
设置表单输入框的 `placeholder` 属性。

```html
<input type="text" th:placeholder="${placeholderText}" />
```

+ 设置 `input` 的 `placeholder` 为 `${placeholderText}` 的值。

### 23. `th:errors`
显示与 `username` 属性相关的错误信息。如果 `username` 为空或者不符合验证规则，这里就会显示出相应的错误消息。

```html
<div th:errors="*{email}"></div> <!-- 错误信息展示 -->
```

你还可以通过 `th:errors` 对错误消息进行自定义格式化。例如，使用 `*{field}` 可以获取字段的错误信息。

```html
<div th:errors="*{username}">Error</div>

```

如果验证失败，错误消息将显示在 `<div>` 中。如果没有错误，它会显示默认的 "Error" 文本。