Spring Boot：将后端数据特定字段映射至HTML视图的教程

花韻仙語

发布时间：2025-09-27 12:14:01

568人浏览过

来源于php中文网

原创

Spring Boot：将后端数据特定字段映射至HTML视图的教程

本教程旨在指导如何在Spring Boot应用中，通过控制器和Thymeleaf模板引擎，将后端获取的数据（如title和description）筛选并渲染到HTML页面上。文章将详细介绍控制器配置、数据模型传递以及Thymeleaf模板的编写，以实现数据与视图的有效分离和展示。

1. 理解需求：从JSON API到HTML页面

原始需求是希望spring boot控制器能够返回一个html页面，该页面仅展示从后端获取的数据中特定字段（如title和description）。这与常见的restful api返回json数据的场景有所不同。

RESTful API (返回JSON): 通常使用@RestController注解，控制器方法直接返回Java对象，Spring Boot会自动将其序列化为JSON或XML格式。例如，@GetMapping("/api/data") public List<MyObject> getData()。在这种情况下，如果需要控制JSON输出中包含哪些字段，可以使用@JsonIgnore注解来忽略特定字段。
Web应用 (返回HTML): 通常使用@Controller注解，控制器方法返回一个字符串，该字符串代表视图的逻辑名称（例如，一个HTML模板文件的名称）。控制器会通过Model对象将数据传递给视图层，由视图层（如Thymeleaf、JSP、FreeMarker等模板引擎）负责渲染最终的HTML。

用户提出的问题明确要求返回“HTML page”，因此，我们需要采用Web应用的方式，结合模板引擎来实现。

2. 准备工作：引入Thymeleaf模板引擎

Thymeleaf是Spring Boot官方推荐的服务器端Java模板引擎之一，它能够将后端数据无缝地整合到HTML页面中。

首先，在您的pom.xml（Maven）或build.gradle（Gradle）文件中添加Thymeleaf的Starter依赖：

Maven:

立即学习“前端免费学习笔记（深入）”；

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

Gradle:

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

添加依赖后，Spring Boot会自动配置Thymeleaf。默认情况下，Thymeleaf模板文件应放置在src/main/resources/templates/目录下，文件扩展名为.html。

3. 重构控制器以支持HTML视图

为了返回HTML页面，我们需要对现有的控制器进行修改：

修改注解： 将@RestController改为@Controller。如果您的控制器同时需要提供JSON API和HTML视图，可以保留@RestController并在返回HTML的方法上显式添加@ResponseBody注解来区分。但更推荐的做法是为HTML视图创建一个独立的@Controller。
修改返回类型： 控制器方法应返回String类型，表示要渲染的Thymeleaf模板的逻辑名称。
传递数据： 使用Spring MVC提供的Model接口，将后端获取的数据添加到模型中，以便在Thymeleaf模板中访问。

以下是修改后的控制器示例：

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

// 假设 AdventureHolidaysService 和 AdventureHolidays 模型已存在
// AdventureHolidays.java (部分，包含title和description)
/*
@Document("adventureholidays")
public class AdventureHolidays {
    private String id;
    private String title;
    private String description;
    private String typeOfAdventureHolidays;
    // Getters...
}
*/

@Controller // 将 @RestController 更改为 @Controller
public class AdventureHolidaysController {

    private final AdventureHolidaysService adventureHolidaysService;

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

    /**
     * 处理 /summerCampsHtml 请求，返回一个HTML页面，其中包含夏令营的标题和描述。
     *
     * @param model 用于向视图传递数据的Spring Model对象
     * @return 视图的逻辑名称，对应 src/main/resources/templates/summerCampsView.html
     */
    @GetMapping("/summerCampsHtml") // 新的HTML页面端点
    public String getSummerCampsHtml(Model model) {
        // 从服务层获取夏令营数据
        List<AdventureHolidays> camps = adventureHolidaysService.getRandomSummerCamps();

        // 将数据添加到模型中，键名为 "summerCamps"，视图中将通过此键访问数据
        model.addAttribute("summerCamps", camps);

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

    // 如果您仍然需要提供JSON API，可以保留原有的 @GetMapping 方法，
    // 但通常会将其路径与HTML视图的路径区分开来，或者使用 @ResponseBody
    /*
    @GetMapping("/getRandomSummerCampsJson")
    @ResponseBody // 如果控制器是 @Controller，需要显式添加此注解来返回JSON
    public List<AdventureHolidays> getRandomSummerCampsJson() {
        return adventureHolidaysService.getRandomSummerCamps();
    }
    */
}

4. 创建Thymeleaf HTML模板

接下来，在src/main/resources/templates/目录下创建一个名为summerCampsView.html的文件。在这个文件中，我们将使用Thymeleaf的语法来遍历控制器传递过来的数据，并仅显示title和description字段。

Vondy

下一代AI应用平台，汇集了一流的工具/应用程序

下载

<!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>夏令营信息</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f7f6;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .camp-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }
        .camp-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
            margin-bottom: 15px;
        }
        .camp-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        h2 {
            color: #3498db;
            margin-top: 0;
            font-size: 1.8em;
        }
        p {
            color: #555;
            line-height: 1.6;
            font-size: 1.1em;
        }
        .no-data {
            text-align: center;
            color: #777;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="camp-container">
        <h1>随机夏令营列表</h1>

        <!-- 检查列表是否为空 -->
        <div th:if="${summerCamps.isEmpty()}" class="no-data">
            <p>没有找到夏令营信息。</p>
        </div>

        <!-- 使用 th:each 遍历控制器传递的 summerCamps 列表 -->
        <div th:each="camp : ${summerCamps}" class="camp-item">
            <!-- 使用 th:text 显示 AdventureHolidays 对象的 title 字段 -->
            <h2 th:text="${camp.title}">营地标题占位符</h2>
            <!-- 使用 th:text 显示 AdventureHolidays 对象的 description 字段 -->
            <p th:text="${camp.description}">营地描述内容占位符。</p>
        </div>
    </div>
</body>
</html>

现在，当您访问/summerCampsHtml端点时，Spring Boot将执行控制器方法，获取数据，然后将数据传递给summerCampsView.html模板。Thymeleaf会负责渲染HTML，并动态插入每个夏令营的title和description。

5. 进一步优化：使用数据传输对象 (DTO)

在更复杂的应用中，直接将领域模型（如AdventureHolidays）暴露给视图可能不是最佳实践。领域模型可能包含视图不需要的敏感信息或大量字段，这会增加维护成本并可能导致安全风险。此时，可以使用数据传输对象（DTO）来封装视图所需的确切数据。

5.1 创建 DTO 类

创建一个只包含title和description字段的DTO类：

package com.example.yourapp.dto; // 根据您的包结构调整

public class AdventureCampDto {
    private String title;
    private String description;

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

    // Getter 方法
    public String getTitle() {
        return title;
    }

    public String getDescription() {
        return description;
    }

    // Setter 方法 (如果需要，但对于DTO通常只提供Getter)
    public void setTitle(String title) {
        this.title = title;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

5.2 修改控制器以使用 DTO

在控制器中，将AdventureHolidays对象转换为AdventureCampDto对象列表，再传递给视图：

import com.example.yourapp.dto.AdventureCampDto; // 导入您的DTO类
// ... 其他导入

@Controller
public class AdventureHolidaysController {
    // ... 构造函数不变

    @GetMapping("/summerCampsHtmlDto") // 新的端点，演示使用DTO
    public String getSummerCampsHtmlDto(Model model) {
        List<AdventureHolidays> camps = adventureHolidaysService.getRandomSummerCamps();

        // 将 AdventureHolidays 列表转换为 AdventureCampDto 列表
        List<AdventureCampDto> campDtos = camps.stream()
            .map(camp -> new AdventureCampDto(camp.getTitle(), camp.getDescription()))
            .collect(Collectors.toList());

        // 将 DTO 列表添加到模型中
        model.addAttribute("summerCamps", campDtos); // 键名保持不变，以便重用相同的视图

        return "summerCampsView"; // 仍然可以使用相同的视图模板
    }
}

由于AdventureCampDto中的字段名（title, description）与AdventureHolidays中的字段名相同，因此summerCampsView.html模板无需任何修改即可继续工作。使用DTO提高了代码的清晰度、安全性，并实现了数据与视图的更好解耦。

6. 注意事项与最佳实践

安全性 (HTML 转义): Thymeleaf 默认会对通过th:text或[[...]]表达式输出的内容进行HTML转义，这有助于防止跨站脚本（XSS）攻击。如果确实需要输出未转义的HTML内容，可以使用th:utext，但请务必确保内容的安全性。
错误处理： 考虑当adventureHolidaysService.getRandomSummerCamps()返回空列表或抛出异常时如何处理。可以在模板中使用th:if检查列表是否为空，或在控制器中捕获异常并重定向到错误页面。
静态资源： 在Thymeleaf模板中引入CSS、JavaScript等静态资源，可以使用@{/css/style.css}这样的语法，Spring Boot会自动处理src/main/resources/static目录下的静态资源。
@JsonIgnore的适用场景： 如前所述，@JsonIgnore注解的主要作用是控制Java对象在被序列化为JSON（或XML）时，哪些字段应该被忽略。它适用于构建RESTful API时，需要定制JSON响应内容的场景。例如，如果您有一个@RestController方法返回List<AdventureHolidays>，并且希望JSON输出中不包含typeOfAdventureHolidays字段，那么在AdventureHolidays类的typeOfAdventureHolidays字段上添加@JsonIgnore是正确的做法。然而，它与将数据渲染到HTML页面无关，因为HTML渲染是通过模板引擎直接访问Java对象的属性，而非JSON序列化过程。

7. 总结

通过本教程，我们学习了如何在Spring Boot中构建一个Web应用，使其控制器能够将后端数据中特定的字段映射并渲染到HTML页面上。关键步骤包括：将控制器从@RestController修改为@Controller，使用Model对象传递数据，以及利用Thymeleaf模板引擎进行数据绑定和HTML渲染。此外，我们还探讨了使用DTO来优化数据传输，以及一些重要的注意事项和最佳实践，从而实现数据层与视图层的有效分离和高效展示。

HTML预格式化文本如何使用_HTMLpre标签的实用解答【解答】

HTML代码格式化缩进问题_HTMLpre标签换行处理方法【方法】

HTML代码缩进怎么设置_编辑器格式化说明【说明】

HTML样式怎么添加_HTML样式添加完整操作【教程】

HTML旧版本标签怎么替换_版本差异升级详解【详解】