vue/iview动态表单+前后端分离：固定项+动态多项+表单验证+同时提交

背景

如题

前端iView

template

<template>
  <Form
    ref="formValidate"
    :model="formValidate"
    :label-width="80"
    style="width: 300px"
    :rules="ruleValidate"
  >
    <Form-Item label="测试" prop="test">
      <i-Input type="text" v-model="formValidate.test" name="test" placeholder="请输入"></i-Input>
    </Form-Item>
    <FormItem
      v-for="(item, index) in formValidate.items"
      v-if="item.status"
      :key="index"
      :label="'Item ' + item.index"
    >
      <Row>
        <Col span="9">
          <Form-Item
            :prop="'items.' + index + '.value1'"
            :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"
          >
            <Input type="text" v-model="item.value1" placeholder="Enter something..."></Input>
          </Form-Item>
        </Col>
        <Col span="9">
          <Form-Item
            :prop="'items.' + index + '.value2'"
            :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"
          >
            <Input type="text" v-model="item.value2" placeholder="Enter something..."></Input>
          </Form-Item>
        </Col>
        <Col span="4" offset="1">
          <Button @click="handleRemove(index)">Delete</Button>
        </Col>
      </Row>
    </FormItem>
    <FormItem>
      <Row>
        <Col span="12">
          <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
        </Col>
      </Row>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
      <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
    </FormItem>
  </Form>
</template>

script

<script>
import axios from "axios";

export default {
  data() {
    return {
      ruleValidate: {
        test: [{ required: true, message: "请输入姓名", trigger: "blur" }]
      },
      index: 1,
      formValidate: {
        // test:'',
        items: [
          {
            // value: "",
            index: 1,
            status: 1
          }
        ]
      },
      mulform: {}
    };
  },

  methods: {
    handleSubmit(name) {

      this.$refs[name].validate(valid => {
        if (valid) {
          // alert(this.formValidate.test + this.formValidate.items[0].value);
          axios
            .all([
              axios
              .post("http://localhost:8181/role/add", this.formValidate),
              axios
              .post(
                "http://localhost:8181/role/addl",
                this.formValidate.items
              )
            ])
            .then(
              axios
              .spread(function(r5, r6) {
                  console.log('yes')
              })
            );

        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleAdd() {
      this.index++;
      this.formValidate.items.push({
        // value: "",
        index: this.index,
        status: 1
      });
    },
    handleRemove(index) {
      this.formValidate.items[index].status = 0;
    }
  }
};
</script>

后端SSM

Controller

package com.graduation.test4.controller;

import com.graduation.test4.entity.Form;
import com.graduation.test4.service.FormService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/role")
public class testformC {

    @Autowired
    private FormService formservice;


    @RequestMapping("/add")
    public void add(@RequestBody Form form){
        System.out.printf("test" + form.getTest());

        formservice.add(form);
    }

    @RequestMapping("/addl")
    public void addl(@RequestBody List<Form> list){
        for(int i=0;i<list.size();i++)
        {
            Form form=new Form();
            form=list.get(i);
            formservice.add(form);
        }

    }

}

实体

package com.graduation.test4.entity;

public class Form {
    private String test;
    private String value1;
    private String value2;

    public String getTest() {
        return test;
    }

    public void setTest(String test) {
        this.test = test;
    }

    public String getValue1() {
        return value1;
    }

    public void setValue1(String value1) {
        this.value1 = value1;
    }

    public String getValue2() {
        return value2;
    }

    public void setValue2(String value2) {
        this.value2 = value2;
    }
}

DAO

package com.graduation.test4.dao;

import com.graduation.test4.entity.Form;
import org.apache.ibatis.annotations.*;


@Mapper
public interface FormDao {

    /**
     * 添加
     * @param form
     */
    @Insert("insert into testform(test,value1,value2)" +
            " values(#{test},#{value1},#{value2})")
    void add(Form form);

}

说明：Service和impl没有放，按照自己的对应我的控制器和dao写就行了。数据库我把test和value12放在一张表了，因为仅仅为了测试，也可以分开，修改一下dao和控制器的方法即可。