關於前端多數組一對一傳後臺的處理

要實現效果如下：

當數據庫已存在該用戶信息時，對其進行修改，保存；用戶點擊新增時，後臺對其進行添加保存到數據庫。之前分別使用數組接收報錯，最後使用封裝方式統一接收

前臺代碼：JSP+LayerUI

 <!--聯繫方式-->
            <div class="layui-tab-item">
                <form class="layui-form form" action="" id="contactsList">
                <c:if test="${!empty contactsList }">
                    <c:forEach items="${contactsList }" var="contacts" varStatus="co">
                    <div class="layui-form-item">
                        <label class="layui-form-label">聯繫人<span class="redPoint">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" value="${contacts.realName }" name="realName[${co.count-1}]"  lay-verify="required" placeholder="客戶名稱" autocomplete="off" class="layui-input form-input-half" >
                            <input type="hidden" value="${contacts.contactsId }" name="contactsId[${co.count-1}]">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">電話&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone[${co.count-1}]" lay-verify="tel" placeholder="電話" value="${contacts.phone }" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">微信&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="wechat[${co.count-1}]" value="${contacts.wechat }" placeholder="微信" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <hr>
                    </c:forEach>
                    </c:if>
                      <c:if test="${empty contactsList }">
                      <div class="layui-form-item">
                        <label class="layui-form-label">聯繫人<span class="redPoint"></span></label>
                        <div class="layui-input-block">
                            <input type="text" value="" name="realName[0]"  lay-verify="required" placeholder="聯繫人" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">電話&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone[0]" lay-verify="tel" placeholder="電話" value="" autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">微信&nbsp;</label>
                        <div class="layui-input-block">
                            <input type="text" name="wechat[0]" value="" placeholder="微信"  autocomplete="off" class="layui-input form-input-half" >
                        </div>
                    </div>
                      </c:if>
                     <div class="layui-form-item" style="padding-left: 110px;" id="contactBox">
                        <a href="javascript:void(0);" class="layui-btn layui-btn-primary" id="createContacts"><i class="layui-icon layui-icon-add-circle"></i> 新建聯繫人</a>
                    </div>
                    <div class="layui-form-item" style="padding-left: 110px;">
                        <button class="layui-btn" lay-submit lay-filter="contactsList">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                    <input type="hidden" value="${enterprise.enterpriseId}" name="enterpriseId"/>
                </form>
            </div>

JS:關於新增聯繫人

 $('#createContacts').click(function(){
            var i = $("input[name^='realName']").length;
            let contactBox = '<div class="layui-form-item">'+
                '<label class="layui-form-label">聯繫人<span class="redPoint">*</span></label>'+
                '<div class="layui-input-block">'+
                    '<input type="text" name="realName['+i+']" value="" lay-verify="required"  placeholder="姓名"  autocomplete="off" class="layui-input form-input-half">'+
                '</div>'+
           '</div>'+
            '<div class="layui-form-item">'+
                '<label class="layui-form-label">電話&nbsp;</label>'+
               '<div class="layui-input-block">'+
                    '<input type="text" name="phone['+i+']" lay-verify="tel" value="" placeholder="電話"  autocomplete="off" class="layui-input form-input-half">'+
                '</div>'+
            '</div>'+
            '<div class="layui-form-item">'+
                '<label class="layui-form-label">微信&nbsp;</label>'+
                '<div class="layui-input-block">'+
                    '<input type="text" name="wechat['+i+']" placeholder="微信"  autocomplete="off" class="layui-input form-input-half" value="">'+
                '</div>'+
            '</div><hr/>';
            $('#contactBox').before(contactBox);
            form.render();//layerui重新渲染
        });

//後臺處理

// 保存企業聯繫方式
    @RequestMapping("/modifyContacts")
    @OperateAnnotation(operateName = "進行了編輯企業聯繫方式操作，企業名稱：")
    public @ResponseBody String modifyContacts(Integer enterpriseId, ContactsModel contactsModel,
            String operateObject) {
        UserOnlineBean userOnlineBean = getUserOnlineBean();
        if (null != userOnlineBean) {
            try {
                List<Contacts> list = new ArrayList<Contacts>();
                List<Integer> contactsId = contactsModel.getContactsId();
                List<String> realName = contactsModel.getRealName();
                List<String> phone = contactsModel.getPhone();
                List<String> wechat = contactsModel.getWechat();
                if (null != contactsId && contactsId.size() > 0) {
                    for (int i = 0; i < contactsId.size(); i++) {
                        Contacts contact = contactsService.getEntity(contactsId.get(i));
                        contact.setContactsId(contactsId.get(i));
                        contact.setPhone(phone.get(i));
                        contact.setRealName(realName.get(i));
                        contact.setWechat(wechat.get(i));
                        list.add(contact);
                    }

                    // 用戶新增聯繫人信息
                    if (contactsId.size() < realName.size()) {
                        for (int i = contactsId.size(); i < realName.size(); i++) {
                            if (StringUtils.isNotBlank(realName.get(i)) || StringUtils.isNotBlank(wechat.get(i))
                                    || StringUtils.isNotBlank(phone.get(i))) {
                                Contacts contact = new Contacts();
                                contact.setCreateDate(new Date());
                                contact.setEnterpriseId(enterpriseId);
                                contact.setPhone(phone.get(i));
                                contact.setRealName(realName.get(i));
                                contact.setWechat(wechat.get(i));
                                list.add(contact);
                            }
                        }
                    }
                } else {
                    // 純新添加
                    for (int i = 0; i < realName.size(); i++) {
                        Contacts contact = new Contacts();
                        contact.setCreateDate(new Date());
                        contact.setEnterpriseId(enterpriseId);
                        contact.setPhone(phone.get(i));
                        contact.setRealName(realName.get(i));
                        contact.setWechat(wechat.get(i));
                        list.add(contact);
                    }
                }
                contactsService.modifyContacts(list);
                Map<String, Object> map = new HashMap<String, Object>(0);
                map.put("code", "200");
                map.put("message", "修改聯繫人信息成功！");
                Gson gson = new Gson();
                return gson.toJson(map);
            } catch (ServiceException e) {
                // TODO Auto-generated catch block
            } catch (Exception e) {
                log.error("修改客戶集發生錯誤！", e);
            }
        }
        return null;
    }

//ContactsModel:

public class ContactsModel {
    List<Integer> contactsId;
    List<String> realName;
    List<String> phone;
    List<String> wechat;
    public List<Integer> getContactsId() {
        return contactsId;
    }
    public void setContactsId(List<Integer> contactsId) {
        this.contactsId = contactsId;
    }
    public List<String> getRealName() {
        return realName;
    }
    public void setRealName(List<String> realName) {
        this.realName = realName;
    }
    public List<String> getPhone() {
        return phone;
    }
    public void setPhone(List<String> phone) {
        this.phone = phone;
    }
    public List<String> getWechat() {
        return wechat;
    }
    public void setWechat(List<String> wechat) {
        this.wechat = wechat;
    }
    
}