Spring Boot提交新增单词后重定向至带ID的词汇详情页方案

• 重定向路径硬编码为redirect:/vocabulary，未携带当前词汇本ID，无法跳转回对应词汇本详情页
• Controller方法参数错误使用@RequestBody注解：前端为普通表单提交（application/x-www-form-urlencoded格式），并非发送JSON请求，该注解会导致表单参数无法正常绑定到Words实体
• 单词列表查询逻辑放错位置：POST请求重定向后模型属性不会保留，应该由对应GET接口负责加载页面数据，符合Post/Redirect/Get模式，避免表单重复提交问题

1. 调整POST接口逻辑 #

修改addWord方法，去掉@RequestBody注解，重定向路径拼接当前词汇本ID，移除不必要的模型属性设置：

@PostMapping("/vocabulary/{id}")
public ModelAndView addWord(Words word, @PathVariable(name="id") Integer id) {
    // 重定向回当前id对应的词汇本页面
    ModelAndView mav = new ModelAndView("redirect:/vocabulary/" + id);
    wordService.addWord(word);
    return mav;
}

2. 新增/调整对应GET接口 #

单独提供词汇本详情页的GET接口，负责加载页面所需的词汇本ID、单词列表、空的单词绑定对象：

@GetMapping("/vocabulary/{id}")
public ModelAndView vocabularyDetail(@PathVariable(name="id") Integer id) {
    ModelAndView mav = new ModelAndView("vocabulary-detail"); // 替换为你实际的详情页模板名
    // 查询当前词汇本下的所有单词
    List<Words> wordList = wordService.getWordsByVocabulary(id);
    mav.addObject("listOfWords", wordList);
    // 传递当前词汇本ID给前端，供表单提交地址使用
    mav.addObject("vocId", id);
    // 传递空的Words对象，供表单th:object绑定使用
    mav.addObject("word", new Words());
    return mav;
}

3. 补全前端隐藏域赋值 #

现有模态框表单的提交地址配置正确，只需给词汇本ID隐藏域强制赋值，避免关联到错误词汇本：

<input type="hidden" th:field="*{vocabularyId}" th:value="${vocId}" id="vocabularyId">

修复后执行流程为：

1. 点击Open按钮跳转至/vocabulary/{id}页面，GET接口加载页面数据
2. 模态框填写单词后提交，POST请求发送至/vocabulary/{id}完成单词保存
3. 接口自动重定向回当前词汇本的GET地址，页面加载最新单词列表，地址栏保持为当前词汇本URL

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