SpringBoot的修改操作

首先需前端通过编辑按钮触发以下事件,弹出编辑窗口,编辑窗口需要获取后台的数据显示在对应的输入框当中,因此需要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();
                    }
                );
            },

猜你喜欢

转载自blog.csdn.net/qq_43374694/article/details/125841236