SpringBoot modification operation

First, the front end needs to trigger the following events through the edit button to pop up the editing window. The editing window needs to obtain the background data and display it in the corresponding input box, so Axios needs to issue an asynchronous request to load the data.

//弹出编辑窗口(加载数据),解决数据同步问题
            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();
                    }
                );
            },

Guess you like

Origin blog.csdn.net/qq_43374694/article/details/125841236
Recommended