Spring Boot中特定字段到HTML页面的映射与渲染-html教程-PHP中文网

Spring Boot中特定字段到HTML页面的映射与渲染

碧海醫心

发布： 2025-09-27 09:52:13

原创

539人浏览过

Spring Boot中特定字段到HTML页面的映射与渲染

本文详细介绍了如何在Spring Boot应用中，从控制器获取数据并仅将特定字段（如title和description）渲染到HTML页面。我们将探讨使用数据传输对象（DTO）进行数据投影的最佳实践，以及如何结合Thymeleaf等模板引擎实现动态HTML生成。同时，也会提及@JsonIgnore注解在API响应过滤中的应用，以区分其与HTML渲染的不同场景。

1. 理解核心需求：数据投影与HTML渲染

在spring boot中，当控制器返回一个对象列表时，默认情况下会将其序列化为json格式。然而，用户的核心需求是将这些数据中的特定字段（例如title和description）呈现在一个html页面上，而不是直接返回json。这涉及到两个关键概念：

数据投影（Data Projection）：从原始数据对象中选择并提取所需的特定字段。
HTML渲染（HTML Rendering）：使用模板引擎将处理后的数据嵌入到HTML模板中，生成最终的网页内容。

为了实现这一目标，我们需要调整控制器以返回视图名称，并通过Spring的Model接口将数据传递给模板引擎。

2. 配置模板引擎

Spring Boot通常与Thymeleaf模板引擎配合使用。如果项目中尚未添加Thymeleaf依赖，请在pom.xml中加入：

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

登录后复制

默认情况下，Thymeleaf模板文件应放置在src/main/resources/templates/目录下。

3. 使用数据传输对象（DTO）进行数据投影

直接将完整的实体类（如AdventureHolidays）传递给视图层或API响应通常不是最佳实践。原因如下：

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

数据暴露：实体类可能包含敏感或不必要的信息。
职责分离：实体类代表数据库结构，而DTO代表视图或API所需的数据结构。
性能优化：避免不必要的数据序列化或传输。

因此，推荐创建一个专门的DTO来封装视图所需的数据。

3.1 定义DTO

创建一个AdventureHolidayDto类，只包含title和description字段。

// src/main/java/com/example/demo/dto/AdventureHolidayDto.java
package com.example.demo.dto;

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

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

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

    public String getDescription() {
        return description;
    }

    // Setter方法 (如果需要)
    public void setTitle(String title) {
        this.title = title;
    }

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

登录后复制

3.2 修改服务层或控制器进行数据映射

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

在服务层（adventureHolidaysService）或控制器中，将AdventureHolidays实体列表转换为AdventureHolidayDto列表。

// src/main/java/com/example/demo/controller/AdventureHolidaysController.java
package com.example.demo.controller;

import com.example.demo.model.AdventureHolidays;
import com.example.demo.service.AdventureHolidaysService;
import com.example.demo.dto.AdventureHolidayDto;
import org.springframework.stereotype.Controller; // 注意这里改为 @Controller
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;
import java.util.stream.Collectors;

@Controller // 使用 @Controller 返回视图名称
public class AdventureHolidaysController {

    private final AdventureHolidaysService adventureHolidaysService;

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

    @GetMapping("/getRandomSummerCampsHtml") // 更改路径以区分API接口
    public String getRandomSummerCampsHtml(Model model) {
        List<AdventureHolidays> entities = adventureHolidaysService.getRandomSummerCamps();

        // 将实体列表映射为DTO列表
        List<AdventureHolidayDto> dtos = entities.stream()
                .map(entity -> new AdventureHolidayDto(entity.getTitle(), entity.getDescription()))
                .collect(Collectors.toList());

        // 将DTO列表添加到Model中，以便在HTML模板中使用
        model.addAttribute("summerCamps", dtos);

        // 返回视图名称，Thymeleaf将查找 src/main/resources/templates/summerCamps.html
        return "summerCamps";
    }

    // 如果仍需要返回JSON API，可以保留原有的 @RestController 接口
    @GetMapping("/getRandomSummerCamps")
    public List<AdventureHolidays> getRandomSummerCamps() {
        return adventureHolidaysService.getRandomSummerCamps();
    }
}

登录后复制

注意：为了返回HTML页面，控制器需要使用@Controller注解，并且方法返回类型为String，代表视图的逻辑名称。如果控制器同时需要处理API请求（返回JSON），可以创建一个单独的@RestController，或者在同一个@Controller中使用@ResponseBody注解来标记返回JSON的方法。

4. 创建HTML模板

在src/main/resources/templates/目录下创建summerCamps.html文件。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>随机夏令营</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 { font-size: 1em; color: #666; line-height: 1.6; }
    </style>
</head>
<body>
    <h1>随机夏令营列表</h1>

    <div th:if="${#lists.isEmpty(summerCamps)}">
        <p>没有找到任何夏令营信息。</p>
    </div>

    <div th:unless="${#lists.isEmpty(summerCamps)}">
        <div th:each="camp : ${summerCamps}" class="camp-item">
            <h2 class="camp-title" th:text="${camp.title}">夏令营标题</h2>
            <p class="camp-description" th:text="${camp.description}">夏令营描述内容。</p>
        </div>
    </div>
</body>
</html>

登录后复制

在这个Thymeleaf模板中：

th:each="camp : ${summerCamps}" 迭代Model中名为summerCamps的列表。
th:text="${camp.title}" 和 th:text="${camp.description}" 分别将当前camp对象的title和description属性值插入到HTML元素中。

5. @JsonIgnore注解的应用场景

原始问题中提到了@JsonIgnore注解，它主要用于控制JSON序列化的行为，即当对象被转换为JSON字符串时，忽略带有此注解的字段。这与将数据渲染到HTML页面是两个不同的概念。

如果你希望通过原始的/getRandomSummerCamps API接口返回JSON时，不包含typeOfAdventureHolidays字段，那么可以在AdventureHolidays实体类上使用@JsonIgnore：

// src/main/java/com/example/demo/model/AdventureHolidays.java
package com.example.demo.model;

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方法
    public String getId() { return id; }
    public String getTitle() { return title; }
    public String getDescription() { return description; }
    public String getTypeOfAdventureHolidays() { return typeOfAdventureHolidays; }

    // Setter方法 (如果需要)
    public void setId(String id) { this.id = id; }
    public void setTitle(String title) { this.title = title; }
    public void setDescription(String description) { this.description = description; }
    public void setTypeOfAdventureHolidays(String typeOfAdventureHolidays) { this.typeOfAdventureHolidays = typeOfAdventureHolidays; }
}

登录后复制

重要提示：@JsonIgnore只影响JSON序列化，不会影响你在Java代码中对该字段的访问，也不会直接影响Thymeleaf模板渲染，因为Thymeleaf是直接访问Java对象的Getter方法。

6. 总结与注意事项

HTML渲染：要将数据渲染到HTML页面，控制器方法应返回视图名称（String），并使用Model对象将数据传递给模板。
数据投影：为了清晰、安全和高效，推荐使用DTO（Data Transfer Object）来封装视图或API所需的特定字段，避免直接暴露完整的实体对象。
模板引擎：Spring Boot常用Thymeleaf作为模板引擎，通过th:属性将数据动态绑定到HTML元素。
@JsonIgnore：此注解用于控制JSON序列化过程，当需要从API响应中排除某些字段时使用，与HTML渲染是不同的应用场景。
控制器类型：@Controller注解的类通常用于返回视图，而@RestController注解的类则用于构建RESTful API（默认返回JSON或XML）。如果一个控制器需要同时处理视图和API请求，可以混合使用@Controller和@ResponseBody，或者创建两个独立的控制器。