1. 引入 Thymeleaf 依赖
首先，你需要在 pom.xml 文件中引入 Thymeleaf 的依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. 创建控制器
在 Spring Boot 中创建一个控制器，用来处理请求并传递热点资源和推荐资源的数据到前端。
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.ArrayList;
import java.util.List;
@Controller
public class ResourceController {
@GetMapping("/resources")
public String showResources(Model model) {
// 假设从数据库或者其他服务中获取热点资源和推荐资源
HotResource hotResource = new HotResource("热点资源1", "12345", "67890");
List<RecommendedResource> recommendedResources = new ArrayList<>();
recommendedResources.add(new RecommendedResource("推荐资源1", "54321"));
recommendedResources.add(new RecommendedResource("推荐资源2", "98765"));
recommendedResources.add(new RecommendedResource("推荐资源3", "45678"));
recommendedResources.add(new RecommendedResource("推荐资源4", "87654"));
recommendedResources.add(new RecommendedResource("推荐资源5", "12321"));
// 将数据传递到模板中
model.addAttribute("hotResource", hotResource);
model.addAttribute("recommendedResources", recommendedResources);
return "resources"; // 返回模板名称，Thymeleaf 会渲染 resources.html
}
}
class HotResource {
private String name;
private String resourceId;
private String recordId;
// 构造函数、getter和setter
public HotResource(String name, String resourceId, String recordId) {
this.name = name;
this.resourceId = resourceId;
this.recordId = recordId;
}
public String getName() {
return name;
}
public String getResourceId() {
return resourceId;
}
public String getRecordId() {
return recordId;
}
}
class RecommendedResource {
private String name;
private String resourceId;
// 构造函数、getter和setter
public RecommendedResource(String name, String resourceId) {
this.name = name;
this.resourceId = resourceId;
}
public String getName() {
return name;
}
public String getResourceId() {
return resourceId;
}
}
3. 修改 Thymeleaf 模板
在 resources/templates 目录下创建 resources.html，并使用 Thymeleaf 语法动态渲染数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资源推荐</title>
<style>
/* 样式部分和前面的保持一致 */
body {
font-family: 'Arial', sans-serif;
background-color: #e0f7fa; /* 清爽的淡蓝色背景 */
margin: 0;
padding: 0;
height: 100vh;
}
.container {
width: 70vw;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 0 auto;
position: relative;
top: 0;
}
.section {
margin-bottom: 30px;
}
.section h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
.section .item {
margin: 10px 0;
padding: 15px;
border-radius: 8px;
text-align: center;
background-color: #fafafa;
border: 1px solid #ddd;
transition: all 0.3s ease;
}
.section .item:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
.section .item a {
display: block;
text-decoration: none;
color: #00796b;
font-size: 16px;
font-weight: bold;
transition: color 0.3s ease;
}
.section .item a:hover {
color: #004d40;
}
.section .item p {
margin: 5px 0;
color: #555;
font-size: 14px;
}
.hot-resource {
border: 2px solid #f44336;
background-color: #ffebee;
}
.recommended-resource {
border: 2px solid #4caf50;
background-color: #e8f5e9;
}
.scrollable-content {
max-height: 60vh;
overflow-y: auto;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<!-- 热点资源部分 -->
<div class="section">
<h2>热点资源</h2>
<div class="item hot-resource">
<a th:href="@{/resource/hot(id=${hotResource.resourceId})}" target="_blank" th:text="${hotResource.name}">热点资源名称</a>
<p th:text="'资源ID：' + ${hotResource.resourceId}">资源ID</p>
<p th:text="'热点记录ID：' + ${hotResource.recordId}">热点记录ID</p>
</div>
</div>
<!-- 推荐资源部分，带有滚动效果 -->
<div class="section">
<h2>推荐资源</h2>
<div class="scrollable-content">
<div th:each="recommendedResource : ${recommendedResources}">
<div class="item recommended-resource">
<a th:href="@{/resource/recommend(id=${recommendedResource.resourceId})}" target="_blank" th:text="${recommendedResource.name}">推荐资源名称</a>
<p th:text="'推荐资源ID：' + ${recommendedResource.resourceId}">推荐资源ID</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4. 运行程序并测试
启动 Spring Boot 应用，访问 /resources，你应该会看到动态渲染的 热点资源 和 推荐资源 内容。
5. 后端数据源
- 热点资源和推荐资源的数据可以从数据库、API、或其他数据源中获取，在控制器中通过相应的服务层进行查询，然后将结果传递到视图。
- 你还可以根据实际需要进行分页、排序、筛选等功能的扩展。
通过这种方式，热点资源和推荐资源内容可以由 Java 动态渲染，且页面布局和样式依然保持一致。