Spring Boot+MongoDB随机元素收藏按钮ID传递异常问题

1. 先确认前端已正确获取到元素ID #

首先在Thymeleaf页面中添加测试输出，验证后端传入的SummerCamp对象ID是否能正常渲染：

<!-- 页面任意位置添加，测试后可删除 -->
<p>当前营地ID：[[${summerCamp.id}]]</p>

如果这个值能正常显示，说明后端已经把数据正确传到前端；如果显示为空，先检查后端Controller是否将summerCamp对象存入Model：

@GetMapping("/summercamp")
public String showRandomCamp(Model model) {
    SummerCamp randomCamp = yourService.getRandomSummerCamp();
    model.addAttribute("summerCamp", randomCamp); // 确保这行代码存在
    return "summercamp";
}

2. 修正表单的参数传递逻辑 #

方案一：用隐藏字段传递ID

在收藏按钮的表单中添加隐藏字段，绑定当前元素的ID：

<form th:action="@{/save-favorite}" method="post">
    <!-- 隐藏字段传递ID -->
    <input type="hidden" th:name="postId" th:value="${summerCamp.id}" />
    <button type="submit">收藏该营地</button>
</form>

对应后端接口要保证参数名匹配：

@PostMapping("/save-favorite")
public String saveFavorite(@RequestParam("postId") String postId, Principal principal) {
    // 执行savedDocByUser逻辑，将postId存入当前用户的adventureHolidaysList
    userProfileService.saveAdventureToUser(principal.getName(), postId);
    return "redirect:/summercamp"; // 收藏后跳转回原页面
}

方案二：将ID拼接到请求路径中

如果后端接口用路径变量接收ID，可直接在Thymeleaf的action中拼接：

<form th:action="@{/save-favorite/{postId}(postId=${summerCamp.id})}" method="post">
    <button type="submit">收藏该营地</button>
</form>

对应后端接口调整为：

@PostMapping("/save-favorite/{postId}")
public String saveFavorite(@PathVariable String postId, Principal principal) {
    // 执行收藏逻辑
    userProfileService.saveAdventureToUser(principal.getName(), postId);
    return "redirect:/summercamp";
}

3. 排查常见问题 #

• 检查参数名一致性：前端表单的name属性（或路径变量名）必须和后端@RequestParam/@PathVariable的参数名完全一致，大小写敏感。
• 确认用户登录状态：用[[${#authentication.name}]]在页面测试是否能获取当前登录用户名，确保Principal能正确拿到用户信息，避免因未登录导致的后续逻辑异常。
• 查看浏览器网络请求：提交表单后，打开浏览器开发者工具的Network面板，查看请求的Form Data（或路径），确认postId是否被正确发送，定位是前端未传值还是后端未接收的问题。

内容的提问来源于stack exchange，提问作者Stefan Jankovic