Java SSM实现前后端协议联调详解下篇

目录

• 前后台协议联调
• 修改功能
• 删除功能
• 完整页面

前后台协议联调

修改功能

需求:完成图书信息的修改功能

1. 找到页面中的编辑按钮，该按钮绑定了@click="handleUpdate(scope.row)"
2. 在method的handleUpdate方法中发送异步请求根据ID查询图书信息
3. 根据后台返回的结果，判断是否查询成功，如果查询成功打开修改面板回显数据，如果失败提示错误信息
4. 修改完成后找到修改面板的确定按钮，该按钮绑定了@click="handleEdit()"
5. 在method的handleEdit方法中发送异步请求提交修改数据
6. 根据后台返回的结果，判断是否修改成功。如果成功提示错误信息，关闭修改面板，重新查询数据，如果失败提示错误信息

scope.row代表的是当前行的行数据，也就是说,scope.row就是选中行对应的json数据，如下:

{
    "id": 1,
    "type": "计算机理论",
    "name": "Spring实战 第五版",
    "description": "Spring入门经典教程，深入理解Spring原理技术内幕"
}

修改handleUpdate方法

//弹出编辑窗口
handleUpdate(row) {
    // console.log(row);   //row.id 查询条件
    //查询数据，根据id查询
    axios.get("/books/"+row.id).then((res)=>{
        if(res.data.code == 20041){
            //展示弹层，加载数据
            this.formData = res.data.data;
            this.dialogFormVisible4Edit = true;
        }else{
            this.$message.error(res.data.msg);
        }
    });
}

修改handleEdit方法

handleEdit() {
    //发送ajax请求
    axios.put("/books",this.formData).then((res)=>{
        //如果操作成功，关闭弹层，显示数据
        if(res.data.code == 20031){
            this.dialogFormVisible4Edit = false;
            this.$message.success("修改成功");
        }else if(res.data.code == 20030){
            this.$message.error("修改失败");
        }else{
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getAll();
    });
}

至此修改功能就已经完成。

删除功能

需求:完成页面的删除功能。

1. 找到页面的删除按钮，按钮上绑定了@click="handleDelete(scope.row)"
2. method的handleDelete方法弹出提示框
3. 用户点击取消,提示操作已经被取消。
4. 用户点击确定，发送异步请求并携带需要删除数据的主键ID
5. 根据后台返回结果做不同的操作

如果返回成功，提示成功信息，并重新查询数据

如果返回失败，提示错误信息，并重新查询数据

修改handleDelete方法

handleDelete(row) {
    //1.弹出提示框
    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info'
    }).then(()=>{
        //2.做删除业务
        axios.delete("/books/"+row.id).then((res)=>{
            if(res.data.code == 20021){
                this.$message.success("删除成功");
            }else{
                this.$message.error("删除失败");
            }
        }).finally(()=>{
            this.getAll();
        });
    }).catch(()=>{
        //3.取消删除
        this.$message.info("取消删除操作");
    });
}

完整页面

    
        
        
        
        
        
        
        
        
        
    
    
        

            

                
图书管理
            
            

                

                    

                        
                        查询
                        新建
                    
                    
                        
                        
                        
                        
                        
                            
                        
                    
                    
                    

                        
                            
                                
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                
                                    
                                        
                                            
                                        
                                    
                                
                            
                            

                                取消
                                确定
                            
                        
                    
                    
                    

                        
                            
                                
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                
                                    
                                        
                                            
                                        
                                    
                                
                            
                            

                                取消
                                确定
                            
                        
                    
                
            
        
    
    
    
    
    
    
    

到此这篇关于Java SSM实现前后端协议联调详解下篇的文章就介绍到这了,更多相关Java前后端协议联调内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！