本教程旨在指导如何在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 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:
立即学习“前端免费学习笔记（深入）”；
org.springframework.boot spring-boot-starter-thymeleaf
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 更改为 @Controllerpublic 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 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 getRandomSummerCampsJson() { return adventureHolidaysService.getRandomSummerCamps(); } */}
4. 创建Thymeleaf HTML模板
接下来，在src/main/resources/templates/目录下创建一个名为summerCampsView.html的文件。在这个文件中，我们将使用Thymeleaf的语法来遍历控制器传递过来的数据，并仅显示title和description字段。
夏令营信息 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; }随机夏令营列表
没有找到夏令营信息。
营地标题占位符
营地描述内容占位符。
现在，当您访问/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类// ... 其他导入@Controllerpublic class AdventureHolidaysController { // ... 构造函数不变 @GetMapping("/summerCampsHtmlDto") // 新的端点，演示使用DTO public String getSummerCampsHtmlDto(Model model) { List camps = adventureHolidaysService.getRandomSummerCamps(); // 将 AdventureHolidays 列表转换为 AdventureCampDto 列表 List 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，并且希望JSON输出中不包含typeOfAdventureHolidays字段，那么在AdventureHolidays类的typeOfAdventureHolidays字段上添加@JsonIgnore是正确的做法。然而，它与将数据渲染到HTML页面无关，因为HTML渲染是通过模板引擎直接访问Java对象的属性，而非JSON序列化过程。
7. 总结
通过本教程，我们学习了如何在Spring Boot中构建一个Web应用，使其控制器能够将后端数据中特定的字段映射并渲染到HTML页面上。关键步骤包括：将控制器从@RestController修改为@Controller，使用Model对象传递数据，以及利用Thymeleaf模板引擎进行数据绑定和HTML渲染。此外，我们还探讨了使用DTO来优化数据传输，以及一些重要的注意事项和最佳实践，从而实现数据层与视图层的有效分离和高效展示。
以上就是Spring Boot：将后端数据特定字段映射至HTML视图的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579260.html
微信扫一扫 
支付宝扫一扫 
