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

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

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

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

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

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

绑定删除事件：

<el-button
              type="danger"
              @click="delArticle(scope.row.id)"
              icon="el-icon-delete"
              circle
              plain
            ></el-button>
1
2
3
4
5
6
7

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

 // 删除文章
    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(() => {
        // 点击取消触发的函数
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18