Spring 引导：保存值列表

Question

I'm developing a Java Spring Boot Web App. The page that concerns my question is a form that the user saves. It's shown in the image below:

Previously I had it so that the user could only save one hardware item (one description, one serial #, and one model #). Now, though, you can see that there can be multiple items (here they're are four). At first I was simply able to save the description, serial #, and model # as individual Strings in the database for the one record. This worked fine. Now though, I must save these items as Lists of strings for each of the three categories (List of descriptions, List of Serial #s, List of Model #s) for each record. So, my questions pertain to what I must change in order to make this possible. Shown below first is the declaration of these 3 columns in the NewRecord class declared as the table:

    @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;

I'm assuming here that I would simply need to make the change from private String... to private List<String>... . The real confusion for me lies with what to do on the following newRecord.jsp page where below you can see the relevant markup and 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:

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++;

            });

The JS handles the correct defining and redefining of the ids of the elements in each of the items upon addition and/or removal of a particular item. Since this is Spring Boot, though, the real issue lies with what to do with the 'path' of each of these elements of each item. This is an issue because the Lists of hwDescription, hwModelNumber, and hwSerialNumber are all generically defined with no number after them, like I have done with the ids. I could also redefine the path values to be 'hwDescription0', 'hwDescription1', 'hwDescription2', etc. for each addition/removal of an item. However, then the path back to the original List variable name 'hwDescription' would then be incorrect. So, I would appreciate any insight as to how to go about being able to redefine the path values (if that's what I even need to do) so that every new item saved adds a hwDescription, hwSerialNumber, and hwModelNumber to these lists for each record.

Answer 1

Let me split it up into multiple parts.

Basically, as you are probably saving your data into a database you need to think of a good data model to save the information too. When we are talking about relational databases it is of course a relational data model where you split the dataset up into entities comply good practices of data modeling. Quickly brainstorming your use case offers a table which contains HARDWARE_ITEMS . You would probably have the DESCRIPTION as a text field of variable length. Your SERIAL_NO could be either the primary key or at least a unique field. THE MODEL_NO would probably be a foreign key referencing the MODELS table with more specific information about these.

As description, serial and model-number belong together as a tuple for one model item it does not really make sense to transfer the information of your frontend as List of descriptions , List of serials and List of model-no . As you said that will be for example a pain associating the pairs again together. Normally you would transfer a List of model-items which each contains of its three properties.

You could have an endpoint accepting the structure of a single item. Your bulk save/edit endpoint could accept as said the list of items which you could save then accordingly as multiple instances of your entity.