Vue后台管理系统项目(11)删除品牌操作

目录

gitee仓库地址:

业务需求:

 1.找到对应的结构绑定点击事件

 2.书写方法

 3.点击删除弹出提示框

 4.确定删除,发请求,删除成功后,再次获取品牌列表进行展示

 4.1书写api 

 4.2删除成功向服务器发请求​​​​​​​​编辑

 问题出现:

---

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:

点击删除按钮,弹出提示框,我们点击确定,就能删除该品牌

在views/product/tradeMack/index.vue中:

1.找到对应的结构绑定点击事件

我们要思考当我们点击删除的时候,是需要给回调传参的,需要把品牌相应的id带给服务器

 2.书写方法

在methods中: 

打印:品牌信息可以拿到

 3.点击删除弹出提示框

 官方文档:Element - The world's most popular Vue UI framework

 在methods中:

 效果:实现

 4.确定删除,发请求,删除成功后,再次获取品牌列表进行展示

所以我们这里需要书写接口

接口地址:http://39.98.123.211:8416/swagger-ui.html#/base45trademark45controller

删除品牌接口:/admin/product/baseTrademark/remove/{id}

4.1书写api 

在api/product/tradeMark.js中:

 4.2删除成功向服务器发请求​​​​​​​​​​​​​​

 效果:

 问题出现:

当我们在第二页点击删除的时候,他会跳转到第一页,我们应该删除后还在当前页才对,如果我们当前页元素的length>1我们应该就在当前页,如果<1我们应该去上一页

所以我们需要进行判断:

 问题解决:

 

 删除品牌代码:

//删除品牌的操作
      deleteTradeMark(row){
        // console.log(row)
        //弹框
        this.$confirm(`你确定删除${row.tmName}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          //当用户点击确定按钮的时候触发
          //向服务器发请求
          let result = await this.$API.trademark.reqDeleteTradeMark(row.id)
          if(result.code==200){
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //再次获取品牌列表数据
            this.getPageList(this.list.length>1?this.page:this.page-1)
          }
        }).catch(() => {
          //当用户点击取消按钮的时候触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }