隶属文章： Java高级 | （二十二）Java常用类库-CSDN博客
系列文章： Java高级 | 【实验一】Spring Boot安装及测试 最新-CSDN博客
Java高级 | 【实验二】Springboot 控制器类+相关注解知识-CSDN博客
目录
一、Thymeleaf
1.1 是什么？
1.2 Thymeleaf机制说明
1.3 优点VS缺点
1.4 使用Thymeleaf
（1）jar包依赖
（2）在application.properties中配置thymeleaf
二、Thymeleaf语法
2.1 chongyoth属性
①文本替换（th:text）
②HTML 替换（th:utext）
2.2 其他th 属性
三、spring boot使用Thymeleaf
3.1 创建spring boot工程并默认使用thymeleaf模板引擎
3.2 编写控制器类及数据对象类
3.3 编写前端视图页面
（1）编写test1.html
（2）编写test2.html
（3）编写test3.html
（4）编写test4.html
四、练习题
【问题】
【答案】
Web 开发离不开动态页面的开发，很早以前企业主要使用JSP技术来开发网页，随着技术的升级更替，目前来说主流的方案是Thymeleaf。
Thymeleaf 是一个模板框架，它可以支持多种格式的内容动态渲染，功能非常强大，它天然和 HTML是相融合的，所以对于前端工程师来说它也是易于理解的。
Springboot默认是不支持JSP的，默认使用Thymeleaf模板引擎。
官方文档：Tutorial: Using Thymeleaf
一、Thymeleaf
1.1 是什么？
- 是一个跟 Velocity、FreeMarker 类似的模板引擎，可完全替代 JSP。
- 是一个 java 类库，它是一个 xml/xhtml/html5 的模板引擎，可以作为mvc的web应用的view层。
1.2 Thymeleaf机制说明
Thymeleaf 是服务器渲染技术，页面数据是在服务器端进行渲染的。
因此，在开发中使用Thymeleaf，并不是前后端分离。
1.3 优点VS缺点
- 开箱即用，它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言；
- Thymeleaf模板页面无需服务器渲染，也可以被浏览器运行，页面简洁SpringBoot支持 Thymeleaf、Velocity、FreeMarker。
- 并不是一个高性能的引擎，适用于单体应用。如果要做一个高并发的应用，选择前后端分离更好，但是作为SpringBoot推荐的模板引擎，还是需要了解一下。
1.4 使用Thymeleaf
（1）jar包依赖
在pom.xml中添加如下依赖:
//这个配置是必须的，事实上，spring boot项目创建好后，已自动添加该依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>（2）在application.properties中配置thymeleaf
//这个配置不是必须的
//但是spring.thymeleaf.mode的默认值是HTML5，其实是一个很严格的检查，改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。
spring.thymeleaf.mode = LEGACYHTML5二、Thymeleaf语法
2.1 chongyoth属性
html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。
| 属性 | 作用描述 | 相关属性 | 优先级（order） | 说明 |
| th:insert | 代码块引入 | th:replace, th:include | 1 | 优先级最高，常用于公共代码块提取 三者的区别较大，若使用不恰当会破坏html结构 |
| th:each | 遍历循环元素 | 与 th:text、th:value 一起使用 | 2 | 优先级很高，注意修饰标签位置 |
| th:if | 条件判断 | th:unless, th:switch, th:case | 3 | 优先级较高 |
| th:object | 声明变量，配合 *{} 使用，达到偷懒的效果 | - | 4 | 优先级一般，用于简化表达 |
| th:attr | 修改任意属性 | th:attrappend, th:attrprepend | 5 | 优先级一般，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend |
| th:value | 设置当前元素的 value 值，类似修改指定属性 | th:src, th:href | 6 | 优先级不高 |
| th:text | 设置当前元素的文本内容 | th:utext | 7 | 优先级不高，th:text会转义HTML标签，th:utext不会 |
| th:fragment | 定义代码块，供 th:insert 引用 | - | 8 | 优先级最低 |
①文本替换（th:text）
文本替换是指直接将变量的值替换到 HTML 标签的文本内容中。
在 Thymeleaf 中，可以使用th:text属性来实现文本替换。
<p th:text="${user.name}">Default Text</p>在这个例子中，${user.name} 的值会替换 <p> 标签中的文本内容，如果user.name存在，则其值会显示在页面上；如果不存在，则显示默认文本"Default Text"。
②HTML 替换（th:utext）
HTML 替换是指将变量的值作为 HTML 内容插入到 HTML 标签中。在 Thymeleaf 中，可以使用th:utext属性来实现 HTML 替换。
<div th:utext="${user.description}">Default HTML</div>
在这个例子中，${user.description} 的值会被作为 HTML 内容插入到 <div> 标签中，不会被转义处理。这意味着，如果${user.description}的值包含 HTML 标签，它们会被正确地解析并显示在页面上。
2.2 其他th 属性
Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。
| 属性 | 描述 | 示例 |
| th:id | 替换 HTML 的 id 属性 | <input id="html-id" th:id="thymeleaf-id" /> |
| th:text | 文本替换，转义特殊字符 | <h1 th:text="hello，bianchengbang" >hello</h1> |
| th:utext | 文本替换，不转义特殊字符 | <div th:utext="<h1>欢迎来到编程帮！</h1>" >欢迎你</div> |
| th:object | 在父标签选择对象，子标签使用 *{…} 选择表达式选取值。 | <div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p> </div> |
| th:value | 替换 value 属性 |
|
| th:with | 局部变量赋值运算 |
|
| th:style | 设置样式 |
|
| th:onclick | 点击事件 |
|
| th:each | 遍历，支持 Iterable、Map、数组等。 |
|
| th:if | 根据条件判断是否需要展示此标签 |
|
| th:unless | 和 th:if 判断相反，满足条件时不显示 |
|
| th:switch | 与 Java 的 switch case语句类似 |
|
| th:fragment | 模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段 |
|
| th:insert | 布局标签； |
|
| th:replace | 布局标签； |
|
| th:selected | select 选择框选中 |
|
| th:src | 替换 HTML 中的 src 属性 |
|
| th:inline | 内联属性； |
|
| th:action | 替换表单提交地址 |
|
三、spring boot使用Thymeleaf
3.1 创建spring boot工程并默认使用thymeleaf模板引擎
File->New->Project
至此，一个基于spring boot的web工程已创建完毕，该工程默认的前端模板是Thymeleaf。
运行工程，如果能运行成功。则编写控制器类。
如果不能正常运行，请根据提示信息修改工程的配置，可能修改pom.xml，可能修改工程的结构（快捷键shift+ctrl+alt+s）等。
3.2 编写控制器类及数据对象类
在当前包com.example.thymeleaftest中创建控制器类及数据对象类。
（1）创建 MyData1类
//存放数据对象
package com.example.thymeleaftest;
public class MyData1 {
private int id = 0;
private String username="";
private String password="";
public MyData1() {
}
public MyData1(int id, String username, String password) {
this.id = id;
this.username = username;
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "MyData1{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}（2）编写控制器类 TestController
用于跳转到视图层并传递相关数据给指定的视图层。
package com.example.thymeleaftest;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
@Controller//该注解表明TestController类是一个控制器
@RequestMapping("/test")//注解TestController类所有方法访问的url是http://localhost8080/test
public class TestController {
@RequestMapping("/test1")//该方法处理的url是http://localhost8080/test/test1
public String test1() {
return "test1";//转发给视图test1.html
}
@RequestMapping("/test2")//该方法处理的url是http://localhost8080/test/test2
public String test2(Model model) {//参数model为模型，用来存放转发到视图的数据
String name = "Jack";
model.addAttribute("name", name);//模型中填充数据，该数据在视图的中名称为name
return "test2";
}
@RequestMapping("/test3")//该方法处理的url是http://localhost8080/test/test3
public String test3(Model model) {
List<MyData1> myList = new ArrayList<>();
myList.add(new MyData1(1, "laisc", "lai1203"));
myList.add(new MyData1(2, "admin", "admin888"));
myList.add(new MyData1(3, "root", "root9812"));
model.addAttribute("userlist", myList);
return "test3";
}
@RequestMapping("/test4")//该方法处理的url是http://localhost8080/test/test4
public String test4(Model model) {
MyData1 mydata1 = new MyData1(1, "admin", "admin1234");
model.addAttribute("data123", mydata1);
return "test4";
}
@RequestMapping("/test5")//该方法处理的url是http://localhost8080/test/test2
public String test5(HttpServletRequest request) {
String name = "张三";
request.setAttribute("name", name);
return "test2";
}
}上面的控制类一个定义了5个方法，每个方法都定义了其前端访问的url，以及返回到视图的数据。
3.3 编写前端视图页面
前端视图用的是thymeleaf模板，而thymeleaf模板默认的路径是/resources/templates。因此，我们在templates文件夹中创建4个html页面，分别是test1.html、test2.html、test2.html和test4.html，即4个视图页面。如图4所示：
（1）编写test1.html
该视图对应TestController控制器类的test1()方法，该方法没有传递任何数据到test1.html视图。test1.html视图直接输出“Hello, world!”，其代码如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello, world!
</body>
</html>
说明：由于该视图没有输出变量的值，因此可以使用传统的html代码。
（2）编写test2.html
该视图对应TestController控制器类的test2()方法，该方法传递一个“name”变量到test2.html视图。test2.html视图输出“name”变量的值。其代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'"></p>
</body>
</html>
- <html xmlns:th="http://www.thymeleaf.org">---导入thymeleaf资源说明：由于该视图要输出变量的值，因此必须使用thymeleaf+html代码。
- <p th:text="'Hello, ' + ${name} + '!'">3333</p>----输出变量。
（3）编写test3.html
该视图对应TestController控制器类的test3()方法，该方法传递一个list集合到 test3.html视图，视图循环输出集合的值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
</tr>
<tr th:each="user : ${userlist}">
<td th:text="${user.id}">-1</td>
<td th:text="${user.username}">abc</td>
<td th:text="${user.password}">555</td>
</tr>
</table>
</body>
</html>
（4）编写test4.html
该视图对应TestController控制器类的test3()方法，该方法传递一个model对象到test4.html视图.该视图把对象的值输出到超链接的参数值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${data123.username})}">链接1</a>
<a href="details.html" th:href="@{/order/details(orderId=${data123.username})}">链接2</a>
<a href="abc.html" th:href="'order/'+${data123.id}+'/details?orderId='+${data123.username} ">链接3</a>
<a href="abc.html" th:href="@{'/details/'+${data123.id}(orderId=${data123.username})}">链接4</a>
<a href="abc.html" th:href="@{'/details/'+${data123.id}+'/aaa'(orderId=${data123.username})}">链接5</a>
</body>
</html>
四、练习题
【问题】
编写一个控制器，产生100个学生对象，并把这些对象在html中以表格的形式输出。
【答案】
package com.example.thymeleaftest;
public class Student {
private int id;
private String name;
private int age;
public Student(int id, String name, int age) {
this.id = id;
this.name = name;
this.age = age;
}
// Getter方法
public int getId() { return id; }
public String getName() { return name; }
public int getAge() { return age; }
}package com.example.thymeleaftest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
@Controller
@RequestMapping("/student")
public class StudentController {
@RequestMapping("/list")
public String listStudents(Model model) {
List<Student> students = new ArrayList<>();
// 生成100个简单学生数据
for (int i = 1; i <= 100; i++) {
students.add(new Student(i, "学生" + i, 18 + (i % 7)));
}
model.addAttribute("students", students);
return "studentList";
}
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>学生列表</title>
</head>
<body>
<h1>学生列表</h1>
<table border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr th:each="student : ${students}">
<td th:text="${student.id}"></td>
<td th:text="${student.name}"></td>
<td th:text="${student.age}"></td>
</tr>
</table>
</body>
</html>
![[蓝桥杯]模型染色](https://i-blog.csdnimg.cn/direct/c94cd8a9fe2f4a6da149d38c9e6767c5.png)
