当前位置：首页 > 文章列表 > 文章 > 前端 > SpringBoot映射HTML教程详解

SpringBoot映射HTML教程详解

2025-10-08 17:51:37 0浏览收藏

本教程详细介绍了如何在Spring Boot项目中，利用Thymeleaf模板引擎将后端服务获取的数据，例如夏令营列表，提取并只展示特定字段（如标题和描述）到前端HTML页面。抛弃直接返回JSON数据的传统方式，本教程将引导你重构Spring Boot控制器方法，使其返回HTML视图，并通过`Model`对象将数据传递给Thymeleaf模板。通过精心设计的HTML模板，利用Thymeleaf的语法进行数据迭代和定制化渲染，实现数据与视图的有效分离。此外，本文还辨析了`@JsonIgnore`注解的适用场景，强调其主要用于控制JSON API的输出，而非生成HTML视图。学习如何引入Thymeleaf依赖、创建HTML模板文件，最终实现一个清晰、高效的数据映射方案，提升Spring Boot Web开发的效率与用户体验。

Spring Boot中将后端数据特定字段映射到HTML页面教程

本教程详细阐述了如何在Spring Boot应用中，利用Thymeleaf模板引擎将后端服务获取的数据，仅提取并展示其特定字段（如标题和描述）到前端HTML页面。通过重构控制器方法并设计相应的HTML模板，实现数据与视图的有效分离与定制化渲染，同时辨析了@JsonIgnore注解的适用场景。

问题背景与核心需求

在Spring Boot开发中，我们经常会遇到需要从后端服务获取数据，并将其呈现在Web页面上的场景。原始问题中，开发者有一个Spring Boot控制器，其 @GetMapping("/getRandomSummerCamps") 方法返回一个 List 对象，默认情况下会被Spring Boot自动序列化为JSON格式的API响应。例如：

[{"title":"Raquette Lake Camp","description":"...","typeOfAdventureHolidays":"summerCamps"}]

然而，开发者的核心需求是：当调用此控制器时，不返回JSON数据，而是直接返回一个HTML页面，并且该页面只显示 AdventureHolidays 对象中的 title 和 description 字段。

原始问题中提供了一个解决方案建议：在 typeOfAdventureHolidays 字段上添加 @JsonIgnore 注解。这个注解的作用是告诉Jackson（Spring Boot默认的JSON序列化库）在将对象序列化为JSON时忽略该字段。虽然这可以控制JSON输出的内容，但它并不能解决将数据渲染成HTML页面的根本需求。@JsonIgnore 适用于控制JSON API的输出，而不是生成HTML视图。

为了实现将特定字段映射到HTML页面，我们需要转向Spring Boot的视图层技术，例如Thymeleaf。

解决方案核心：Spring Boot视图层渲染

要将后端数据渲染到HTML页面，并只显示特定字段，我们需要以下几个步骤：

引入模板引擎依赖：Spring Boot支持多种模板引擎，Thymeleaf是其中非常流行且与Spring生态集成良好的一个。
重构Controller方法：修改控制器方法的返回类型，使其返回视图的名称，并通过 Model 对象将数据传递给视图。
设计HTML视图模板：创建一个HTML文件，利用模板引擎的语法来迭代数据并显示所需字段。

1. 引入Thymeleaf模板引擎依赖

首先，确保你的Spring Boot项目中包含了Thymeleaf的依赖。如果你使用的是Maven，可以在 pom.xml 中添加如下配置：

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

如果是Gradle，则在 build.gradle 中添加：

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. 重构Controller方法

接下来，我们需要修改 AdventureHolidays 模型的Controller方法。不再返回 List，而是返回一个表示HTML视图名称的 String。同时，通过注入 org.springframework.ui.Model 对象，将后端获取的数据传递给前端视图。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;

@Controller // 注意这里改为 @Controller，而不是 @RestController，因为我们要返回视图
public class AdventureHolidaysController {

    private final AdventureHolidaysService adventureHolidaysService;

    public AdventureHolidaysController(AdventureHolidaysService adventureHolidaysService) {
        this.adventureHolidaysService = adventureHolidaysService;
    }

    @GetMapping("/summerCampsHtml") // 更改URL以区分API和HTML页面
    public String getSummerCampsHtml(Model model) {
        // 从服务层获取数据
        List<AdventureHolidays> summerCamps = adventureHolidaysService.getRandomSummerCamps();

        // 将数据添加到Model中，以便在HTML模板中访问
        // "camps" 是在HTML模板中引用这个列表的名称
        model.addAttribute("camps", summerCamps);

        // 返回视图名称。Spring Boot会查找 src/main/resources/templates/summerCamps.html
        return "summerCamps"; 
    }
}

说明：

我们将 @RestController 改为 @Controller。@RestController 默认会将返回值序列化为JSON/XML，而 @Controller 则通常用于返回视图名称。
方法名和URL路径可以根据实际需求调整，这里为了清晰起见，改为了 /summerCampsHtml。
Model model 参数允许我们将数据绑定到视图。
model.addAttribute("camps", summerCamps); 将 summerCamps 列表以 camps 为键名添加到模型中。
return "summerCamps"; 指示Spring Boot使用名为 summerCamps 的模板来渲染响应。默认情况下，Spring Boot会在 src/main/resources/templates/ 目录下查找 summerCamps.html 文件。

3. 设计HTML视图模板 (Thymeleaf)

在 src/main/resources/templates/ 目录下创建一个名为 summerCamps.html 的文件。在这个文件中，我们将使用Thymeleaf的语法来遍历 camps 列表，并只显示 title 和 description 字段。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summer Camps</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .camp-item { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
        .camp-title { font-size: 1.5em; color: #333; margin-bottom: 5px; }
        .camp-description { color: #666; line-height: 1.6; }
    </style>
</head>
<body>
    <h1>Our Amazing Summer Camps</h1>

    <div th:if="${#lists.isEmpty(camps)}">
        <p>No summer camps available at the moment.</p>
    </div>

    <div th:unless="${#lists.isEmpty(camps)}">
        <div th:each="camp : ${camps}" class="camp-item">
            <h2 class="camp-title" th:text="${camp.title}">Camp Title Placeholder</h2>
            <p class="camp-description" th:text="${camp.description}">Camp Description Placeholder</p>
        </div>
    </div>
</body>
</html>

说明：

xmlns:th="http://www.thymeleaf.org" 声明了Thymeleaf命名空间，允许我们使用 th: 前缀的属性。
和
用于条件渲染，判断 camps 列表是否为空。
是Thymeleaf的迭代语法，它会遍历 camps 列表中的每一个 AdventureHolidays 对象，并将其命名为 camp。
使用 th:text 属性将 camp 对象的 title 属性值插入到
标签的文本内容中。同样地，th:text="${camp.description}" 用于显示描述。

现在，当访问 /summerCampsHtml 这个URL时，Spring Boot会执行控制器方法，获取数据，然后使用 summerCamps.html 模板渲染一个只包含标题和描述的HTML页面。

进阶考量与最佳实践

1. 数据投影（DTO）

在某些情况下，如果 AdventureHolidays 对象包含大量字段，而你只希望在视图中显示少数几个，那么创建一个专门的数据传输对象（DTO）来承载这些特定字段会是更好的实践。

// AdventureCampDto.java
public class AdventureCampDto {
    private String title;
    private String description;

    // 构造函数、Getter和Setter
    public AdventureCampDto(String title, String description) {
        this.title = title;
        this.description = description;
    }

    public String getTitle() { return title; }
    public void setTitle(String title) { this.title = title; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }
}

然后在服务层或控制器中将 AdventureHolidays 对象转换为 AdventureCampDto 列表：

// Controller
@GetMapping("/summerCampsHtml")
public String getSummerCampsHtml(Model model) {
    List<AdventureHolidays> summerHolidays = adventureHolidaysService.getRandomSummerCamps();
    List<AdventureCampDto> summerCampsDto = summerHolidays.stream()
            .map(camp -> new AdventureCampDto(camp.getTitle(), camp.getDescription()))
            .collect(Collectors.toList());

    model.addAttribute("camps", summerCampsDto);
    return "summerCamps";
}

使用DTO的好处是：

分离关注点：视图层只关心它需要的数据，不了解原始领域模型的全部细节。
减少数据传输：如果原始对象很大，DTO可以只传输必要的字段，提高效率。
安全性：避免不小心将敏感信息暴露给视图。

2. RESTful API与MVC视图分离

在现代Web应用架构中，通常会区分RESTful API端点（返回JSON/XML数据）和MVC视图渲染端点（返回HTML页面）。

RESTful API：例如 GET /api/v1/summerCamps，使用 @RestController 注解，返回 List，供前端JavaScript框架或移动应用消费。
MVC视图：例如 GET /summerCampsHtml，使用 @Controller 注解，返回视图名称，供浏览器直接访问。

这种分离有助于保持代码的清晰和职责的单一。

3. @JsonIgnore 的正确使用场景

正如前文所述，@JsonIgnore 注解主要用于控制JSON或XML序列化。它的作用是在将Java对象转换为JSON字符串时，忽略带有该注解的字段。

例如，如果你有一个 AdventureHolidays 对象的RESTful API，但你不想在JSON响应中包含 typeOfAdventureHolidays 字段，你可以在模型类中这样使用它：

import com.fasterxml.jackson.annotation.JsonIgnore;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

@Document("adventureholidays")
public class AdventureHolidays {

    @Id
    private String id;
    private String title;
    private String description;

    @JsonIgnore // 在JSON序列化时忽略此字段
    private String typeOfAdventureHolidays;

    // Getter和Setter
    // ...
}

这样，当你的 @RestController 方法返回 List 时，生成的JSON将不再包含 typeOfAdventureHolidays 字段。这与本教程中将数据渲染到HTML页面的目标是不同的，但理解其作用有助于在不同场景下选择合适的工具。

总结

通过本教程，我们学习了如何在Spring Boot应用中，利用Thymeleaf模板引擎实现将后端数据特定字段映射到HTML页面的功能。核心步骤包括：引入Thymeleaf依赖、将控制器方法从返回JSON数据改为返回视图名称并使用 Model 传递数据，以及创建HTML模板利用Thymeleaf语法渲染所需字段。同时，我们也探讨了使用DTO进行数据投影的优势，并明确了 @JsonIgnore 注解在JSON序列化控制中的正确应用场景，帮助开发者更灵活地处理数据展示和API设计。

以上就是《SpringBoot映射HTML教程详解》的详细内容，更多关于的资料请关注golang学习网公众号！