快速入门Thymeleaf
- 1️⃣ 什么是Thymeleaf?
- 1️⃣ 模板入门
- 2️⃣ 创建测试工程
- 2️⃣ 配置文件
- 2️⃣ 创建controller
- 2️⃣ 写一个html页面
- 2️⃣ 启动测试
- 1️⃣ Thymeleaf基础
- 2️⃣ 实体类
- 2️⃣ 增加接口
- 2️⃣ $符号使用
- 2️⃣ *符号的使用
- 2️⃣ @符号的使用
- 2️⃣ #符号的使用
- 2️⃣ 集合的遍历
- 2️⃣ thymeleaf如何定义变量
- 2️⃣ 字面量
- 2️⃣ 字符串拼接方式
- 2️⃣ 比较运算符
- 2️⃣ 逻辑运算符
- 2️⃣ 三目运算符
- 2️⃣ 分支结构,th:if,th:unless,th:switch,th:case
- 2️⃣ thymeleaf的一些常用的内置对象
- 2️⃣ 内联
1️⃣ 什么是Thymeleaf?
Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发。
模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,甚至在 JavaScript 中也会用到模板引擎技术,Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等。
Thymeleaf 对网络环境不存在严格的要求,既能用于 Web 环境下,也能用于非 Web 环境下。在非 Web 环境下,他能直接显示模板上的静态数据;在 Web 环境下,它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的,以 HTML 标签为载体,Thymeleaf 要寄托在 HTML 标签下实现。
SpringBoot 集成了 Thymeleaf 模板技术,并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术,Thymeleaf 是另外的一种模板技术,它本身并不属于 Spring Boot,Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web 开发中,我们往往会选择使用 Jsp 去完成页面的动态渲染,但是 jsp 需要翻译编译运行,效率低。
Thymeleaf 的官方网站:Thymeleaf
Thymeleaf 官方手册:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
1️⃣ 模板入门
2️⃣ 创建测试工程
创建一个freemarker 的测试工程专门用于freemarker的功能测试与模板的测试。
测试环境搭建目录:
导入依赖:
<!-- SpringBoot框架集成Thymeleaf的起步依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2️⃣ 配置文件
配置application.yml。
application.yml内容如下:
server:
port: 8088 #服务端口
spring:
main:
allow-bean-definition-overriding: true
application:
name: thymeleaf-demo #指定服务名
thymeleaf:
cache: false #关闭模板缓存,方便测试
suffix: .html
prefix: classpath:/templates/
2️⃣ 创建controller
创建Controller类,向Map中添加name,最后返回模板文件。
UserController.java内容如下:
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @author hanson.huang
* @version V1.0
* @date 2024/10/23 18:44
**/
@Controller
public class UserController {
@RequestMapping(value = "/message")
public String message(Model model) {
model.addAttribute("data","SpringBoot框架集成Thymeleaf模板引擎");
return "message";
}
}
2️⃣ 写一个html页面
HTML 页面的元素中加入以下属性:
<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="${data}"></div>
<h2 th:text="${data}"></h2>
<p th:text="${data}"></p>
<span th:text="${data}"></span>
</body>
</html>
2️⃣ 启动测试
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ThymeleafDemoApplication {
public static void main(String[] args) {
SpringApplication.run(ThymeleafDemoApplication.class, args);
}
}
测试结果:
在页面的源代码中,可以看到在html文件中,通过 th:text 获取到的数据是存放在标签体中的。
注 意 : Springboot 用 使 用 thymeleaf 作 为 视 图 展 示 , 约 定 将 模 板 文 件 放 置
在src/main/resource/templates 目录下,静态资源放置在 src/main/resource/static 目录下。
1️⃣ Thymeleaf基础
2️⃣ 实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private int id;
private String name;
private int age;
}
2️⃣ 增加接口
@GetMapping("/hello")
public String hello(Model model, HttpSession session) {
session.setAttribute("name","Hanson");
List<User> list = new ArrayList<>();
for (int i = 0 ; i < 5; i++) {
User user = new User();
user.setId(i);
user.setName("黄汉升"+i);
user.setAge(18);
list.add(user);
}
model.addAttribute("users",list);
User user = new User();
user.setId(11);
user.setAge(18);
user.setName("赵子龙");
model.addAttribute("user",user);
return "hello";
}
2️⃣ $符号使用
$符号主要是取对象中的数据
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="${user.id}"></div>
<div th:text="${user.name}"></div>
<div th:text="${user.age}"></div>
</body>
</html>
测试结果:
2️⃣ *符号的使用
符号也可以取对象中的数据
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:object="${user}">
<div th:text="*{id}"></div>
<div th:text="*{name}"></div>
<div th:text="*{age}"></div>
</div>
<div th:text="*{user.id}"></div>
<div th:text="*{user.name}"></div>
<div th:text="*{user.age}"></div>
</body>
</html>
测试结果:
2️⃣ @符号的使用
@符号主要是用于引入文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--可以是全路径-->
<script th:Src="@{http://localhost:8088/hello.js}"></script>
<!--可以带参数-->
<script th:Src="@{http://localhost:8088/hello.js(name='yl',age=19)}"></script>
<!--~代表当前项目-->
<script th:Src="@{~/hello.js}"></script>
<!--也可以省略协议-->
<script th:Src="@{//localhost:8088/hello.js}"></script>
<img th:src="@{https://img01.51jobcdn.com/im/2021/avatar/female/avatar_toc_female12.png}" th:title="${user.name}" th:alt="${user.name}"/>
<script>
// 确保在页面加载完成后调用 sayHello('Hanson')
window.onload = function() {
sayHello('Hanson');
};
</script>
</body>
</html>
测试结果:
2️⃣ #符号的使用
#符号主要是根据当前浏览器的语言去相对应的国际化配置文件中取值
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="#{hello}"></div>
</body>
</html>
2️⃣ 集合的遍历
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1px">
<tr th:each="u,state : ${users}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.age}"></td>
<!--当前的遍历索引,从0开始-->
<td th:text="${state.index}"></td>
<!--当前的遍历索引,从1开始-->
<td th:text="${state.count}"></td>
<!--集合元素的总个数-->
<td th:text="${state.size}"></td>
<!--当前遍历的对象-->
<td th:text="${state.current}"></td>
<!--当前遍历是否为奇数次遍历-->
<td th:text="${state.even}"></td>
<!--当前遍历是否为偶数次遍历-->
<td th:text="${state.odd}"></td>
<!--当前是否为第一次遍历-->
<td th:text="${state.first}"></td>
<!--当前是否为最后一次遍历-->
<td th:text="${state.last}"></td>
</tr>
</table>
</div>
</body>
</html>
测试结果:
2️⃣ thymeleaf如何定义变量
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th:with可以定义变量-->
<div th:with="num=(100+100/100+90-1)">
<div th:text="${num}"></div>
</div>
</body>
</html>
测试结果:
2️⃣ 字面量
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="'枪出如龙'"></div>
<div th:text="100"></div>
<div th:text="true"></div>
<div th:text="hellohanson"></div>
</body>
</html>
测试结果:
2️⃣ 字符串拼接方式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="'java' + 'js'"></div>
<div th:text="'java' + ${user.name}"></div>
<div th:text="|java ${user.name}|"></div>
</body>
</html>
测试结果:
2️⃣ 比较运算符
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:with="num=(100+100/100+90-1)">
<!--第一,第四和第六为true-->
<div th:text="${num} eq 190"></div>
<div th:text="${num} ne 190"></div>
<div th:text="${num} lt 190"></div>
<div th:text="${num} le 190"></div>
<div th:text="${num} gt 190"></div>
<div th:text="${num} ge 190"></div>
</div>
</body>
</html>
测试结果:
2️⃣ 逻辑运算符
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--false-->
<div th:text="9 eq 9 and 8 ne 8"></div>
<!--true-->
<div th:text="9 eq 9 or 8 ne 8"></div>
<!--false-->
<div th:text="not(9 eq 9 or 8 ne 8)"></div>
<!--false-->
<div th:text="!(9 eq 9 or 8 ne 8)"></div>
</body>
</html>
测试结果:
2️⃣ 三目运算符
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:with="score=57">
<div th:text="(${score} ge 60) ? '及格' : '不及格'"></div>
</div>
</body>
</html>
测试结果:
2️⃣ 分支结构,th:if,th:unless,th:switch,th:case
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1px">
<!--th:if只显示偶次数出现的数据,th:unless则是取反-->
<tr th:each="u,state : ${users}" th:if="${state.odd}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.age}"></td>
<!--当前的遍历索引,从0开始-->
<td th:text="${state.index}"></td>
<!--当前的遍历索引,从1开始-->
<td th:text="${state.count}"></td>
<!--集合元素的总个数-->
<td th:text="${state.size}"></td>
<!--当前遍历的对象-->
<td th:text="${state.current}"></td>
<!--当前遍历是否为奇数次遍历-->
<td th:text="${state.even}"></td>
<!--当前遍历是否为偶数次遍历-->
<td th:text="${state.odd}"></td>
<!--当前是否为第一次遍历-->
<td th:text="${state.first}"></td>
<!--当前是否为最后一次遍历-->
<td th:text="${state.last}"></td>
</tr>
</table>
</div>
<!--switch case语句-->
<div>
<table border="1px">
<tr th:each="u,state : ${users}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.age}"></td>
<!--当前的遍历索引,从0开始-->
<td th:text="${state.index}"></td>
<!--当前的遍历索引,从1开始-->
<td th:text="${state.count}"></td>
<!--集合元素的总个数-->
<td th:text="${state.size}"></td>
<!--当前遍历的对象-->
<td th:text="${state.current}"></td>
<!--当前遍历是否为奇数次遍历-->
<td th:text="${state.even}"></td>
<!--当前遍历是否为偶数次遍历-->
<td th:text="${state.odd}"></td>
<!--当前是否为第一次遍历-->
<td th:text="${state.first}"></td>
<!--当前是否为最后一次遍历-->
<td th:text="${state.last}"></td>
<td th:switch="${state.odd}">
<span th:case="true">偶数</span>
<span th:case="*">基数</span>
</td>
</tr>
</table>
</div>
</body>
</html>
测试结果:
2️⃣ thymeleaf的一些常用的内置对象
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--thymeleaf的一些常用的内置对象-->
<!--session对象-->
<div th:text="${#session.getAttribute('name')}"></div>
<!--lists对象-->
<div th:text="${#lists.size(users)}"></div>
<!--execInfo对象-->
<div th:text="${#execInfo.getProcessedTemplateName}"></div>
</body>
</html>
测试结果:
2️⃣ 内联
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内联-->
<!--其实取对象里的值还有以下这两种方式-->
<div>hello [[${user.name}]]</div>
<div>hello [(${user.name})]</div>
<hr/>
<!--如下,第一种方式对内容进行转义了,第二种方式没有对内容进行转义-->
<div th:with="str='jq <b>a better language</b>'">
<div>[[${str}]]</div>
<div>[(${str})]</div>
</div>
<script th:inline="javascript">
var name = [[${user.name}]]
console.log(name)
</script>
</body>
</html>
测试结果:
至此便是本文章关于Thymeleaf简单的基础入门<(▰˘◡˘▰)
本文代码:github
往期文章推荐《【FreeMarker】一文快速入门FreeMarker》
后期会更新模型到引擎最后导出pdf整个流程!!!