黑马Web项目的删除操作如何获取Id

目录（不想看分析的可以直接到解决方案处找答案）

项目场景：

问题描述

错因分析：

解决方案：

单独删除操作的所有html代码：

附上项目完成后的全部html代码

---

项目场景：

提示：黑马新版web最后一个项目，增删改查的删除操作

---

问题描述

难点：如何获取每一行的id传到servlet

在BrandMapper中使用Delete注解进行删除操作，需要返回id，大多数人都无法找到 

    /**
     * 删除数据
     *
     * @param id
     */
    @Delete("delete from tb_brand where id=#{id}")
    void deleteId(int id);

---

错因分析：

提示：作为一个后端人员，后端代码都不难，所以附在后面，不详解。

           只详细讲解前端获取id并返回的操作

axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: this.brand.id
                    })

传入brand的id无法获取 ，在servlet打印params显示数据为null

---

 

解决方案：

（前端获取id方法，需要后端传递id的代码可留言获取）

1加入(scope.$index, scope.row)获取每行信息

修改
删除

2.method的delete方法传参

deleteId(index, row)

3.在axios异步请求data处修改data: row.id（请求方式为post）

axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: row.id
                    })

这样就可以把每行的id返回去了

此时再次在servlet打印params显示数据为所删除数据的id，id就获取到了

---

单独删除操作的所有html代码：

修改
删除

// 删除数据
            deleteId(index, row) {
                var _this = this;
                //发送ajax异步请求，删除数据
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: row.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //查询一次
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除数据成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error('删除数据失败，别玩了退游吧，捏麻麻滴');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

---

附上项目完成后的全部html代码

    
    
    





    
    

        
            
                
                
            
        

        
            
        

        
            
        

        
            查询
        
    

    

    

        批量删除
        新增

    
    
    

        
            
                
            

            
                
            

            
                
            

            
                
            

            
                
            


            
                提交
                取消