内容管理（八）02-删除-响应无内容处理- JSONBIG.parse(null) 报错-代码最好使用try{}catch(){}，弹出框确认消息组件使用

11-内容管理-删除-响应无内容处理

• 点击删除按钮
  • 获取文章的ID （测试账号删除无效）
  • 请求删除接口
  • 成功后
    • 提示 删除成功
    • 更新 列表

处理没有响应内容：api/index.js

// 默认配置 转换响应数据
axios.defaults.transformResponse = [data => { 
 
  
  // 对data（后台的原始数据）进行转换
  // 可是 有一些接口 没有任何响应内容
  // JSONBIG.parse(null) 报错，代码最好使用try{}catch(){}
  try { 
 
  
    return JSONBIG.parse(data)
  } catch (e) { 
 
  
    return data
  }
}]

正常去作删除功能：view/article/index.vue

绑定删除事件：

<el-button type="danger" @click="delArticle(scope.row.id)" icon="el-icon-delete" circle plain ></el-button>

弹框-确认消息组件的使用：

// 删除文章
    delArticle (id) { 
 
  
      this.$confirm('亲，此操做将永久删除该文章, 是否继续?', '舒适提示', { 
 
  
        confirmButtonText: '肯定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => { 
 
  
        // 点击确认触发的函数
        // 常见的5种请求方式 —— get 获取数据 post 添加数据 put 完整修改数据 delete 删除数据 patch 局部修改数据
        await this.$http.delete(`articles/${ 
    id}`)
        // 表明成功
        this.$message.success('删除成功')
        //删除成功后，更新列表
        this.getArticles()
      }).catch(() => { 
 
  
        // 点击取消触发的函数
      })
    },