【从0到1打造vue element-ui管理后台 】 第二十一课 编写信息列表的删除功能

127 阅读1分钟

第二十一课 编写信息列表的删除功能

一、编写后台删除接口

新增文件:server-api/mocks/delbookinfo.js

/**
 * 信息列表删除接口
 *
 * @url delbookinfo
 *
 */
 
 module.exports = function (req) {
    return {
      code: 200,
      flag:true,
      message:"删除成功",
    }
 };

二、编写封装删除的接口api

src/api/bookinfo.js

deleteBookById(id){
    return myaxios({
        url:'/delbookinfo?id='+id,
        method:'delete'
   })
}

三、编写是否删除的提示

    handleDelete(id) {
      this.$confirm('确认删除这条记录吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(()=>{
        bookinfoApi.deleteBookById(id).then(response=>{
          const resp = response.data
          this.$message({
            message:resp.message,
            type:resp.flag?"success":'error'
          })
          if(resp.flag){
              this.fetchData()
          }
        })
      }).catch(()=>{

      })
    },

image.png