Axios发送DELETE请求踩坑记录

一，前端参数拼接

本次发送请求采用了将参数拼接到URL后面的方法

deleteUser (userId) {
    return caseRequest.request({
      url: '/user/deleteUser/' + userId,
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' }
    })
  }

这里axios发送请求封装了一下，便于使用，封装的也很简单，安装好Axios和vue-axios，在man.js里引入，随后在需要用到axios的地方导入就可以，为了简化代码可以先配置好baseURL，有需要的还可以配置超时时间

import axios from 'axios'
const caseRequest = axios.create({
  baseURL: 'http://localhost:7080/tick_tack'
  // timeout: 5000
})

二，后端处理

除了前端拼接URL外，后端也需要做一定的配置

    @ApiOperation(value = "删除方法", notes = "测试数据是否删除成功")
    @DeleteMapping("/deleteUser/{userId}")
    public boolean deleteUser(@PathVariable Integer userId) {
        return userService.deleteUser(userId);
    }

@PathVariable： 获取的是请求路径中参数的值

说明

这里如果用Get请求会方便很多，但还是遵守Restful的规范比较好，以下是各个方法的说明和使用场景

• GET请求：通过接口查询相应的数据
• POST请求：一般用来做新增操作（第二次请求不会覆盖第一次，一般用来新增资源）
• PUT请求：新增操作（当两次请求相同时，第二次请求会覆盖第一次，一般用来更新资源）
• DELETE请求：删除操作