You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用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>

后端配套注意事项
  1. 控制器中向模型传值时,必须初始化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";
}
  1. 接收表单提交时,可直接用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 09:20:20