黑马程序员Java Web--14.综合案例--删除品牌功能实现

一、BrandMapper

添加删除单个数据的函数和sql语句

 @Delete("delete from tb_brand where id=#{id}")
 void deleteById(int id);

二、BrandService

定义一个删除单个数据的接口

 void deleteById(int id);

三、BrandServiceImpl

在BrandServiceImpl重写deleteById方法，实现具体功能

@Override
    public void deleteById(int id) {
        //2.获取sqlsession对象
        SqlSession sqlSession = factory.openSession();
        //3.获取Mapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //
        mapper.deleteById(id);
        //
        sqlSession.commit();
        //
        sqlSession.close();
    }

四、BrandServlet

    public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为 int
        int id = JSON.parseObject(params, int.class);
        System.out.println("id:"+id);
        //2. 调用service删除
        brandService.deleteById(id);
        //3. 响应成功的标识
        response.getWriter().write("success");
    }

五、前端

 //删除品牌
            deleteById(index, row){

                // 弹出确认提示框

                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮

                    //2. 发送AJAX请求
                    var _this = this;

                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8098/brand-case/brand/deleteById",
                        data:row.id
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            //删除成功

                            // 重新查询数据
                            _this.selectAll();
                            // 弹出消息提示
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮

                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

同时，给删除按钮绑定click事件

 <el-button type="danger" @click="deleteById(scope.$index,scope.row)">删除</el-button>