Spring Boot+Thymeleaf实现含Attribute集合的Product对象保存问题

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是Thymeleaf没法直接把单个输入框绑定到Set<Attribute>集合上，而且你的实体类关联还有个小漏洞，咱们一步步来修复：

第一步：修复实体类的双向关联 #

你的Product用了@OneToMany(mappedBy="product")，这意味着Attribute必须有对应的反向关联字段，否则JPA没法正确持久化这个关系。给Attribute补充以下内容：

public class Attribute {
    // 原有的字段...
    @ManyToOne
    @JsonIgnore // 避免序列化时出现循环引用，根据你的需求调整
    private Product product;

    // 别忘了添加getter和setter
    public Product getProduct() {
        return product;
    }

    public void setProduct(Product product) {
        this.product = product;
    }
}

第二步：初始化集合，避免空指针 #

在控制器的showNewProductPage方法里，需要给Product的attributes集合初始化，最好先添加一个空的Attribute对象，这样表单一开始就能有可用的输入框：

@RequestMapping("/new")
public String showNewProductPage(Model model) {
    Product product = new Product();
    // 初始化Set，防止后续绑定时报空指针
    Set<Attribute> attributes = new HashSet<>();
    attributes.add(new Attribute());
    product.setAttributes(attributes);
    model.addAttribute("product", product);
    return "new_product";
}

第三步：修改Thymeleaf表单，正确绑定集合元素 #

因为是集合类型，你需要遍历attributes，为每个Attribute的字段单独创建输入框。Thymeleaf可以通过th:each结合索引来实现绑定：

<form action="#" th:action="@{/save}" th:object="${product}" method="post">
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Nazwa Produktu</label>
        <div class="col-sm-9">
            <input type="text" th:field="*{name}" class="form-control" placeholder="Nazwa produktu">
        </div>
    </div>

    <!-- 遍历Attribute集合，生成每个属性的输入框 -->
    <div th:each="attribute, stat : *{attributes}">
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Nazwa Atrybutu</label>
            <div class="col-sm-9">
                <!-- 用stat.index区分集合中的不同元素，绑定到attribute的name字段 -->
                <input type="text" th:field="*{attributes[__${stat.index}__].name}" class="form-control" placeholder="Nazwa atrybutu">
            </div>
        </div>
        <!-- 如果需要description字段，也可以添加对应的输入框 -->
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Opis Atrybutu</label>
            <div class="col-sm-9">
                <input type="text" th:field="*{attributes[__${stat.index}__].description}" class="form-control" placeholder="Opis atrybutu">
            </div>
        </div>
        <hr>
    </div>

    <button style="width: 200px; margin-bottom: 20px" type="submit" class="btn btn-primary">Zapisz</button>
</form>

第四步：完善保存逻辑 #

在保存产品时，要确保每个Attribute都关联到当前的Product，否则JPA不会正确维护这个关系：

@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveProduct(@ModelAttribute("product") Product product) {
    // 遍历所有属性，设置关联的Product
    for (Attribute attribute : product.getAttributes()) {
        attribute.setProduct(product);
    }
    service.save(product);
    return "redirect:/";
}

额外：支持动态添加更多属性（可选） #

如果需要让用户添加多个属性，可以用JS实现动态添加输入框的功能，比如加个按钮：

<button type="button" class="btn btn-secondary mb-3" onclick="addAttribute()">Dodaj Atrybut</button>

<script>
function addAttribute() {
    const container = document.querySelector('[th\\:each]').parentNode;
    const lastIndex = container.children.length - 1;
    const newIndex = lastIndex + 1;
    // 克隆最后一组输入框
    const newGroup = container.children[lastIndex].cloneNode(true);
    // 更新输入框的name和id，替换索引值
    newGroup.querySelectorAll('input').forEach(input => {
        input.name = input.name.replace(`[${lastIndex}]`, `[${newIndex}]`);
        input.id = input.id.replace(`[${lastIndex}]`, `[${newIndex}]`);
        input.value = ''; // 清空输入值
    });
    container.appendChild(newGroup);
}
</script>

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