当前位置：首页 > 文章列表 > 文章 > 前端 > SpringBoot传数据到HTML的实用方法

SpringBoot传数据到HTML的实用方法

2025-10-18 12:36:30 0浏览收藏

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《Spring Boot如何将数据传到HTML视图》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

Spring Boot控制器如何将特定数据映射到HTML视图

本文将指导如何在Spring Boot应用中，从后端数据源获取特定字段（如title和description），并通过控制器将其映射并渲染到HTML页面。我们将探讨使用视图模板引擎（如Thymeleaf）、数据传输对象（DTO）以及Spring MVC的Model机制来实现这一目标，从而实现数据与前端视图的有效分离与展示。

1. 理解核心问题与目标

原始问题中的Spring Boot控制器返回的是一个包含完整AdventureHolidays对象列表的JSON数据：

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

用户期望的目标是：当调用该控制器时，返回一个HTML页面，并且该页面只显示每个条目的title和description字段。这意味着我们需要从API返回JSON的模式，切换到渲染动态HTML页面的模式，并精确控制页面上显示的数据。

2. 实现方案：渲染HTML视图与数据映射

要实现将特定字段映射到HTML视图，我们需要以下几个关键步骤：

2.1 引入视图模板引擎

Spring Boot通常与Thymeleaf、FreeMarker等模板引擎集成。这里我们以Thymeleaf为例。首先，在pom.xml中添加Thymeleaf的Starter依赖：

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

Spring Boot会自动配置Thymeleaf，默认模板文件位于src/main/resources/templates/目录下。

2.2 定义数据传输对象（DTO）

为了更好地管理视图层所需的数据，以及实现数据与领域模型的解耦，我们应该创建一个数据传输对象（DTO），它只包含HTML页面需要展示的字段。

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

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

    // 构造函数
    public AdventureHolidaySummaryDto(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;
    }
}

2.3 修改Spring Boot控制器

控制器需要做以下改变：

返回类型不再是List，而是视图的名称（通常是String）。
使用org.springframework.ui.Model对象将数据传递给视图。
从服务层获取AdventureHolidays列表后，将其映射为AdventureHolidaySummaryDto列表。

// 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.AdventureHolidaySummaryDto;
import org.springframework.beans.factory.annotation.Autowired;
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 而非 @RestController，因为我们要返回视图
public class AdventureHolidaysController {

    @Autowired
    private AdventureHolidaysService adventureHolidaysService;

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

        // 将 AdventureHolidays 列表映射到 AdventureHolidaySummaryDto 列表
        List<AdventureHolidaySummaryDto> summerCampSummaries = summerCamps.stream()
                .map(camp -> new AdventureHolidaySummaryDto(camp.getTitle(), camp.getDescription()))
                .collect(Collectors.toList());

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

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

注意事项：

我们将@RestController改为了@Controller，因为@RestController默认会将返回值序列化为JSON/XML，而@Controller会解析为视图名称。
控制器方法现在接收一个Model参数，用于将数据传递给HTML模板。
我们创建了一个新的映射路径/summerCampsHtml，以避免与可能存在的JSON API接口冲突。

2.4 创建HTML模板文件

在src/main/resources/templates/目录下创建summerCamps.html文件。该文件将使用Thymeleaf语法来遍历并显示传递过来的数据。

<!-- src/main/resources/templates/summerCamps.html -->
<!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: 20px; border-radius: 5px; }
        .camp-title { font-size: 1.5em; color: #333; margin-bottom: 10px; }
        .camp-description { color: #666; line-height: 1.6; }
    </style>
</head>
<body>
    <h1>Available Summer Camps</h1>

    <div th:if="${camps.isEmpty()}">
        <p>No summer camps found.</p>
    </div>

    <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>
</body>
</html>

代码说明：

xmlns:th="http://www.thymeleaf.org"：声明Thymeleaf命名空间。
th:if="${camps.isEmpty()}"：条件判断，如果camps列表为空则显示提示信息。
th:each="camp : ${camps}"：遍历Model中名为camps的列表，每次迭代将当前元素赋值给camp变量。
th:text="${camp.title}" 和 th:text="${camp.description}"：将camp对象的title和description属性值插入到HTML元素的文本内容中。

3. 关于 @JsonIgnore 的讨论

原始答案中提到了使用@JsonIgnore注解。这个注解的作用是在将Java对象序列化为JSON或XML时，忽略带有该注解的字段。

例如，如果在AdventureHolidays模型中添加@JsonIgnore：

@Document("adventureholidays")
public class AdventureHolidays {

    @Id
    private String id;
    private String title;
    private String description;
    @JsonIgnore // 忽略这个字段
    private String typeOfAdventureHolidays;

    // ... getter/setter
}

如果控制器仍然返回List并带有@ResponseBody（即@RestController的默认行为），那么输出的JSON将不会包含typeOfAdventureHolidays字段。

@JsonIgnore与本教程目标的关系：

不直接相关： @JsonIgnore主要用于控制JSON/XML API的输出内容，它不会帮助你直接渲染一个HTML页面。
间接辅助（如果同时有API和HTML视图）： 如果你的应用既提供JSON API，又提供HTML视图，并且你希望JSON API的输出也只包含title和description（或者排除某些字段），那么@JsonIgnore是有用的。但对于将数据渲染到HTML页面而言，更推荐使用DTO来明确地选择所需字段，而不是通过排除法。DTO提供了更清晰、更灵活的数据表示层。

4. 总结与最佳实践

分离关注点： 使用Spring MVC的@Controller来处理Web请求和返回视图，而不是@RestController。
数据传输对象（DTO）： 强烈建议为视图层创建特定的DTO。这有助于将领域模型与视图需求解耦，避免向前端暴露不必要的数据，并可以根据视图需求定制数据结构。
模板引擎： 利用Thymeleaf等模板引擎的强大功能，动态生成HTML内容。
Model对象： 使用Model接口作为控制器方法的参数，将后端数据传递给前端模板。
明确的返回类型： 当返回HTML视图时，控制器方法的返回类型通常是String，代表视图的逻辑名称。

通过以上步骤，我们能够有效地从Spring Boot后端获取特定数据，并将其以结构化、可读性强的方式呈现在HTML页面上，实现了数据与视图的清晰分离。

以上就是《SpringBoot传数据到HTML的实用方法》的详细内容，更多关于的资料请关注golang学习网公众号！