本教程详细阐述了如何在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 中添加如下配置：
org.springframework.boot spring-boot-starter-thymeleaf
如果是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 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 字段。
Summer Camps 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; }Our Amazing Summer Camps
No summer camps available at the moment.
Camp Title Placeholder
Camp Description Placeholder
说明：
xmlns:th=”http://www.thymeleaf.org” 声明了Thymeleaf命名空间，允许我们使用 th: 前缀的属性。
使用 th:text 属性将 camp 对象的 title 属性值插入到
标签的文本内容中。同样地，th:text=”${camp.description}” 用于显示描述。
现在，当访问 /summerCampsHtml 这个URL时，Spring Boot会执行控制器方法，获取数据，然后使用 summerCamps.html 模板渲染一个只包含标题和描述的HTML页面。
进阶考量与最佳实践
1. 数据投影（DTO）
在某些情况下，如果 AdventureHolidays 对象包含大量字段，而你只希望在视图中显示少数几个，那么创建一个专门的数据传输对象（DTO）来承载这些特定字段会是更好的实践。
// AdventureCampDto.javapublic 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 summerHolidays = adventureHolidaysService.getRandomSummerCamps(); List 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设计。
以上就是Spring Boot中将后端数据特定字段映射到HTML页面教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579184.html
微信扫一扫 
支付宝扫一扫 
