Javascript Spring启动：保存值列表

我正在开发一个JavaSpringBootWeb应用程序。与我的问题相关的页面是用户保存的表单。如下图所示：

以前我使用它，用户只能保存一个硬件项（一个描述、一个序列号和一个型号）。但是现在，您可以看到可以有多个项目（这里是四个）。起初，我只是能够将描述、序列号和模型号作为单个字符串保存在数据库中的一条记录中。这很有效。现在，我必须将这些项保存为每个记录的三个类别（描述列表、序列列表、模型列表）的字符串列表。所以，我的问题是，为了使这成为可能，我必须改变什么。下面首先显示了声明为表的NewRecord类中这3列的声明：

    @Size(min=0, max=100, message="{newRecord.hwDescription.size}")
    @Column(name="hwDescription")
    private String hwDescription;
    @Size(min=0, max=100, message="{newRecord.hwSerialNumber.size}")
    @Column(name="hwSerialNumber")
    private String hwSerialNumber;
    @Size(min=0, max=100, message="{newRecord.hwModelNumber.size}")
    @Column(name="hwModelNumber")
    private String hwModelNumber;

我在这里假设我只需要将

private String…

更改为

private List…

。对于我来说，真正的困惑在于在下面的newRecord.jsp页面上做什么，在这里您可以看到相关的标记和JavaScript：

            <div id="hwAddition0">
                <input class="removeItemButton0" type="button" value="Remove Item"
                    id="removeItemButton" onclick="removeHWItem(this)"
                    style="display: inline-block;">
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="hwDescription" style="text-decoration: underline;">Description</label>
                        <form:textarea id="hwDescription" type="text"
                            class="form-control short" path="hwDescription"
                            name="hwDescription" placeholder="Description" maxlength="100"
                            rows="2" style="resize: none;" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwSerialNumber" style="text-decoration: underline;">Serial
                            #</label>
                        <form:input type="text" class="form-control" path="hwSerialNumber"
                            name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwModelNumber" style="text-decoration: underline;">Model
                            #</label>
                        <form:input type="text" class="form-control" path="hwModelNumber"
                            name="hwModelNumber" placeholder="Model #" maxlength="100" />
                    </div>
                </div>
                <hr />
            </div>

---

在添加和/或删除特定项时，JS处理每个项中元素ID的正确定义和重新定义。但是，由于这是Spring引导，真正的问题在于如何处理每个项目的每个元素的“路径”。这是一个问题，因为HWSDescription、hwModelNumber和HWSSerialNumber的列表都是一般定义的，后面没有数字，就像我对ids所做的那样。对于每个添加/删除项目，我还可以将路径值重新定义为“HWScription0”、“HWScription1”、“HWScription2”等。但是，返回原始列表变量名“hwDescription”的路径将不正确。因此，我希望能够深入了解如何重新定义路径值（如果我需要这样做的话），以便保存的每个新项目都会为每个记录的列表添加一个hw 说明、hwSerialNumber和hwModelNumber。

让我将其拆分为多个部分

基本上，当您可能正在将数据保存到数据库中时，您也需要考虑一个好的数据模型来保存信息。当我们谈论关系数据库时，它当然是一个关系数据模型，在这个模型中，您可以将数据集拆分为实体，以符合数据建模的良好实践。快速头脑风暴您的用例提供了一个包含

硬件\u项的表

。您可能会将

说明

作为长度可变的文本字段。您的

序列号可以是主键，也可以是唯一字段。
MODEL\u NO
可能是一个外键，它引用了
MODELS
表中关于这些模型的更具体信息

作为说明，序列号和型号属于同一型号项目的元组。将前端信息传输为
说明列表
、
序列列表
和
型号列表
，实际上没有意义。例如，正如你所说的，这将是一种痛苦，将两对再次联系在一起。通常，您会传输模型项的
列表
，每个项目都包含其三个属性中的一个

可以有一个端点接受单个项的结构。您的批量保存/编辑端点可以接受所述的项目列表，您可以将其相应地保存为实体的多个实例。
让我将其拆分为多个部分

基本上，当您可能正在将数据保存到数据库中时，您也需要考虑一个好的数据模型来保存信息。当我们谈论关系数据库时，它当然是一个关系数据模型，在这个模型中，您可以将数据集拆分为实体，以符合数据建模的良好实践。快速头脑风暴您的用例提供了一个包含
硬件\u项的表
。您可能会将
说明
作为长度可变的文本字段。您的
序列号可以是主键，也可以是唯一字段。
MODEL\u NO
可能是一个外键，它引用了
MODELS
表中关于这些模型的更具体信息

作为说明，序列号和型号属于同一型号项目的元组。将前端信息传输为
说明列表
、
序列列表
和
型号列表
，实际上没有意义。例如，正如你所说的，这将是一种痛苦，将两对再次联系在一起。通常，您会传输模型项的
列表
，每个项目都包含其三个属性中的一个

可以有一个端点接受单个项的结构。您的批量保存/编辑端点可以接受所述的项目列表，然后相应地将其保存为实体的多个实例

function removeHWItem(e) {

        var text = e.parentElement.id;

        count--;

        if (count == 0) {
            showHide();
            return;
        }

        e.parentElement.remove();
    }

    var count;

    $(function() {
        count = 0;
    });

    $('#hwAdditionButton').click(

            function() {

                if (count == 0) {

                    var clonedObj = $("#hwAddition" + count).clone().attr('id',
                            'hwAddition' + (count + 1));

                    clonedObj.find("#removeItemButton" + count).attr('id',
                            'removeItemButton' + (count + 1));

                    clonedObj.insertAfter("#hwAddition" + count);

                    count++;
                }

                else {

                    var clonedObj = $("#hwAddition" + (count - 1)).clone()
                            .attr('id', 'hwAddition' + count);

                    clonedObj.find("#removeItemButton" + (count - 1)).attr(
                            'id', 'removeItemButton' + count);

                    clonedObj.insertAfter("#hwAddition" + (count - 1));
                }

                count++;

            });