背景
如题
前端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和控制器的方法即可。