如何用Thymeleaf实现包含对象属性的Book表单提交?
问题描述
我有Books和Authors两个实体类,其中Authors是Books的属性,对应的POJO代码如下:
Book 实体类
@Entity @Table(name = "BOOK") public class Books { private Long bookId; private String bookTitle; private Authors author; // Getter and Setter }
Authors 实体类
@Entity @Table(name = "AUTUORS") public class Authors { private Long authorId; private String authorFullName; // getter and setter }
我需要创建一个包含两个输入框的表单,用于输入书籍标题和作者全名,当前编写的Thymeleaf表单代码如下,请求指导正确的实现方式:
<form action="#" class="form" enctype="multipart/form-data" method="post" th:action="@{/management/add-book-form}" th:object="${book}"> <div class="form-row "> <div class="form-group col-md-3"> <input type="text" class="form-control" th:field="*{book.getBookTitle()}" placeholder="Author full name"> <input type="text" class="form-control" th:field="*{book.getAuthor()}" placeholder="Author full name"> </div> </div> </form>
问题分析与修正
你的Thymeleaf表单存在几个明显问题:
- 已经通过
th:object="${book}"指定了表单绑定对象,th:field里无需再加book.前缀,直接使用属性名即可 - 不能直接绑定整个
Authors对象到输入框,需要绑定其内部的authorFullName属性(输入框仅能处理文本值) - 输入框的
placeholder描述错误,第一个应对应“书籍标题”,第二个对应“作者全名” - 表单无需上传文件时,可移除
enctype="multipart/form-data",避免不必要的解析开销
正确的Thymeleaf表单实现
<form class="form" method="post" th:action="@{/management/add-book-form}" th:object="${book}"> <div class="form-row"> <div class="form-group col-md-3"> <input type="text" class="form-control" th:field="*{bookTitle}" placeholder="书籍标题"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" th:field="*{author.authorFullName}" placeholder="作者全名"> </div> </div> <button type="submit" class="btn btn-primary">提交</button> </form>
后端配套注意事项
- 控制器中向模型传值时,必须初始化
book的author属性,否则Thymeleaf绑定author.authorFullName会报空指针异常:
@GetMapping("/management/add-book-form") public String showAddBookForm(Model model) { Books book = new Books(); book.setAuthor(new Authors()); // 提前实例化author属性 model.addAttribute("book", book); return "add-book"; }
- 接收表单提交时,可直接用
Books对象接收参数,后续按业务逻辑保存即可:
@PostMapping("/management/add-book-form") public String addBook(@ModelAttribute Books book) { // 建议先保存作者,再保存书籍(根据你的数据库关联规则调整) authorRepository.save(book.getAuthor()); bookRepository.save(book); return "redirect:/books"; }
内容的提问来源于stack exchange,提问作者Bahast Saber
相关产品推荐
相关产品推荐

