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

时间:2024-12-27 07:00:23

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

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

处理没有响应内容:api/

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

正常去做删除功能:view/article/

绑定删除事件:

<el-button
              type="danger"
              @click="delArticle()"
              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(() => {
        // 点击取消触发的函数
      })
    },