首先需前端通过编辑按钮触发以下事件,弹出编辑窗口,编辑窗口需要获取后台的数据显示在对应的输入框当中,因此需要axios发出异步请求加载数据。
//弹出编辑窗口(加载数据),解决数据同步问题
handleUpdate(row) {
//组织参数,拼接url请求地址
//console.log("run");
//向后台发送更新的异步请求
axios.get("/books/"+row.id).then((res)=>{
if(res.data.flag&&res.data.data!=null){
this.dialogFormVisible4Edit=true;
this.formData=res.data.data;
}else{
this.$message.error("数据同步失败,自动刷新"); //刷新就是重新加载数据
}
}).finally(()=>{
//重新加载数据,成功或失败都要执行,所以放在最外面
this.getAll();
})
},
找到弹窗以后,因为修改方法需要传入请求体参数。axios将formdata作为参数随着put请求方式一起发送给后台。axios将formdata中的数据转换为json数据以请求体的方式进行发送和后台建立联系。
//修改
handleEdit() {
axios.put("/books",this.formData).then((res)=>{
//判断当前操作是否成功
if(res.data.flag){
//关闭弹层
this.dialogFormVisible4Edit=false;
this.$message.success("修改成功");
}else{
this.$message.error("修改失败");
}
}).finally(()=>{
//重新加载数据,成功或失败都要执行,所以放在最外面
this.getAll();
}
);
},