当前位置：首页 > article >正文

Java高级 | 【实验三】Springboot 静态资源访问

article 2025/6/7 2:55:01

隶属文章： 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 属性	<input th:value = "${user.name}" />
th:with	局部变量赋值运算	<div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style	设置样式	<div th:style="'color:#F00; font-weight:bold'">编程帮 www.biancheng.net</div>
th:onclick	点击事件	<td th:onclick = "'getInfo()'"></td>
th:each	遍历，支持 Iterable、Map、数组等。	<table> <tr th:each="m:${session.map}"> <td th:text="${m.getKey()}"></td> <td th:text="${m.getValue()}"></td> </tr> </table>
th:if	根据条件判断是否需要展示此标签	<a th:if ="${userId == collect.userId}">
th:unless	和 th:if 判断相反，满足条件时不显示	<div th:unless="${m.getKey()=='name'}" ></div>
th:switch	与 Java 的 switch case语句类似通常与 th:case 配合使用，根据不同的条件展示不同的内容	<div th:switch="${name}"> <span th:case="a">编程帮</span> <span th:case="b">www.biancheng.net</span> </div>
th:fragment	模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段	<footer th:fragment="footer">插入的内容</footer>
th:insert	布局标签；将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。	<div th:insert="commons/bar::footer"></div>
th:replace	布局标签；使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。	<div th:replace="commons/bar::footer"></div>
th:selected	select 选择框选中	<select> <option>---</option> <option th:selected="${name=='a'}"> 编程帮 </option> <option th:selected="${name=='b'}"> www.biancheng.net </option> </select>
th:src	替换 HTML 中的 src 属性	<img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:inline	内联属性；该属性有 text，none,javascript 三种取值，在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。	<script type="text/javascript" th:inline="javascript"> *var name = /[[${name}]]/ 'bianchengbang';* alert(name) </script>
th:action	替换表单提交地址	<form th:action="@{/user/login}" th:method="post"></form>

三、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;}@Overridepublic 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/test1public String test1() {return "test1";//转发给视图test1.html}@RequestMapping("/test2")//该方法处理的url是http://localhost8080/test/test2public String test2(Model model) {//参数model为模型，用来存放转发到视图的数据String name = "Jack";model.addAttribute("name", name);//模型中填充数据，该数据在视图的中名称为namereturn "test2";}@RequestMapping("/test3")//该方法处理的url是http://localhost8080/test/test3public 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/test4public String test4(Model model) {MyData1 mydata1 = new MyData1(1, "admin", "admin1234");model.addAttribute("data123", mydata1);return "test4";}@RequestMapping("/test5")//该方法处理的url是http://localhost8080/test/test2public 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>

一、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

四、练习题

【问题】

【答案】

相关文章：