Vue JS中如何通过Axios调用API删除数据库数据（附代码问题）

你的问题核心是DELETE请求未传递要删除的目标ID，后端无法定位需删除的数据，同时代码存在语法不完整的问题。以下是具体修正方案：

1. 修正DELETE请求，传递目标ID #

后端通常通过两种方式接收删除标识，根据后端路由配置选择对应方式：

方式一：RESTful风格路径参数（推荐） #

将ID拼接在请求URL路径中：

remove(id) {
  Axios.delete(`users/${id}`) // 用模板字符串插入id到路径
    .then((result) => {
      console.log('删除成功:', result.data)
      // 删除成功后同步更新前端列表
      this.users = this.users.filter(user => user.id !== id)
    })
    .catch((error) => {
      console.error('删除失败:', error.response?.data || error.message)
    })
}

方式二：查询参数传递ID #

如果后端通过查询参数接收ID（如users?id=123）：

remove(id) {
  Axios.delete('users/', { params: { id: id } })
    .then((result) => {
      console.log('删除成功:', result.data)
      this.users = this.users.filter(user => user.id !== id)
    })
    .catch((error) => {
      console.error('删除失败:', error.response?.data || error.message)
    })
}

2. 确保后端路由匹配 #

以Express框架为例，后端需配置对应DELETE路由接收ID：

// Express 后端示例
app.delete('/users/:id', (req, res) => {
  const userId = req.params.id
  // 执行数据库删除逻辑
  // ...
  res.json({ message: '删除成功' })
})

3. 补全代码语法 #

你的原始代码缺少闭合大括号，需保证语法完整才能正常执行函数逻辑。

内容的提问来源于stack exchange，提问作者Anton Shupeniuk