Thymeleaf 基本使用

呆萌很

已于 2024-03-15 09:59:30 修改

阅读量1k

点赞数 18

分类专栏： spring boot 文章标签： spring boot

于 2024-03-14 17:17:25 首次发布

本文链接：https://blog.csdn.net/qq_29385297/article/details/136666608

版权

spring boot 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

介绍

Thymeleaf是一款现代服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML、XML、JavaScript、CSS甚至纯文本。它的主要目标是将优雅的自然模板带到开发工作流程中，实现高度可维护的模板创建方式。
官网文档：https://www.thymeleaf.org/

Thymeleaf 基本配置

1. 引入 Thymeleaf 依赖

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

2. 全局配置文件application.properties配置Thymeleaf模板的一些参数。如设置模板缓存、模板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀

spring.thymeleaf.cache=true
spring.thymeleaf.encoding=UTF-8   
spring.thymeleaf.mode=HTML5   
spring.thymeleaf.prefix=classpath:/templates/  
spring.thymeleaf.suffix=.html

3. Thymeleaf命名空间的声明

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>My Thymeleaf Template</title>  
    <!-- 其他head元素，如meta, link, script等 -->  
</head>  
<body>  
    <!-- 页面内容 -->  
</body>  
</html>

<html xmlns:th="http://www.thymeleaf.org">

xmlns:th声明了Thymeleaf的命名空间。这个命名空间允许你在HTML标签中使用Thymeleaf特定的属性，如th:text、th:each等。Thymeleaf引擎在处理模板时会识别这些属性，并根据它们的值动态地生成或修改HTML内容。

基本语法

1、变量表达式

在这里插入图片描述
用于访问上下文变量

<p th:text="${message}">Hello World!</p>

如果 message 变量的值为 “Hello Thymeleaf!”，则上述代码将输出 “Hello Thymeleaf!”。

在非标签中的写法

<div>[[${message}]]</div>

2、选择表达式

在这里插入图片描述
通常用于选择对象的属性，特别是在与对象图一起工作时。

<div th:object="${user}">  
    <p th:text="*{name}">John Doe</p>  
</div>

3、消息表达式

在这里插入图片描述
用于国际化消息，需要先配置国际化

<p th:text="#{greeting}">Welcome to our site!</p>

4、连接表达式

在这里插入图片描述
用于页面跳转或资源引入

<a th:href="@{/home}">Go to Home</a>

<link rel="stylesheet" th:href="@{/css/styles.css}">  
<img th:src="@{/images/logo.png}" alt="Logo">

5、片段表达式

在这里插入图片描述
片段表达式用于引用 HTML 页面中的特定片段或区域。

定义片段

<div th:fragment="header">  
    <h1>My Website Header</h1>  
</div>

引用片段

<div th:replace="~{::header}"></div>

<div th:insert="~{::header}"></div>

 <div th:include="~{::header}"></div>

6、标签th:text，设置元素的文本内容

在这里插入图片描述

<span th:text="${message}">默认文本</span>

7、标签th:utext，设置元素的未转义文本内容，允许 HTML 标签。

在这里插入图片描述

<div th:utext="${someHtmlContent}"></div>

8、条件判断

在这里插入图片描述

<div th:if="${condition}">条件为真时显示的内容</div>  
<div th:unless="${condition}">条件为假时显示的内容</div>

9、迭代（遍历）集合或数组

<ul>  
    <li th:each="item : ${items}">  
        <span th:text="${item.name}">Item Name</span>  
    </li>  
</ul>

10、设置超链接的 href 属性和图片的 src 属性

在这里插入图片描述

<a th:href="@{/home}">Go to Home</a>  
<img th:src="@{/images/logo.png}" alt="Logo">

11、th:switch 和 th:case：用于多路选择，类似于 Java 中的 switch-case 语句

在这里插入图片描述

<div th:switch="${type}">  
    <p th:case="'A'">Type is A</p>  
    <p th:case="'B'">Type is B</p>  
    <p th:case="*">Unknown type</p>  
</div>

12、th:fragment：定义模板片段，可用于包含其他模板

在这里插入图片描述

<div th:fragment="header">Header content</div>

13、th:insert 和 th:replace：用于将模板片段插入到当前位置或替换当前元素及其内容

在这里插入图片描述

<div th:insert="~{commons::header}"></div>  
<div th:replace="~{commons::header}"></div>

commons为指定文件，header为模板片段

14、th:class 和 th:classappend：用于设置元素的 class 属性

<div th:class="${'my-class' + (condition ? ' active' : '')}">Content</div>  
<div th:classappend="${active ? 'active' : ''}">Content</div>

15、th:with：用于在模板的局部范围内声明变量

在这里插入图片描述

<div th:with="user=${currentUser}">  
    <p th:text="${user.name}">User Name</p>  
</div>

16、th:object：用于在模板的局部范围内声明变量

在这里插入图片描述

<div th:object="${user}">  
    <p>Username: <span th:text="*{name}"></span></p>  
    <p>Email: <span th:text="*{email}"></span></p>  
    <p>Age: <span th:text="*{age}"></span></p>  
</div>