携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

删除数据

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

删除数据

前面两部分，将 新增数据 和 更新数据 接口及页面效果都已经处理完毕，

接下来就是我们的 删除数据

删除数据 与 更新数据 类似，都是需要知道所要数据的 id 值

但是不同的是 更新数据 是放在 请求体 body 中，而 删除数据 是放在 params 中

得符合我们的 resultful 规范😊

后端api处理

添加一个 删除数据 的 sql

位置在 controller\sys\sql.js 这个文件里

const deleteMenu = `delete from menu where id=?;`

删除的逻辑代码如下，主要是从 params 中来获取 id 值

即 req.params.id

这里也进行了正则的一个校验，只有 正整数 和 0 的值，才能通过我们的一个删除操作

即 const reg = /^[\d]+$/

const deleteMenu = (req, res, next) => {
  try {
    const id = req.params.id

    const reg = /^[\d]+$/

    if (reg.test(id)) {
      const sql = sqlAll.deleteMenu
      const sqlArr = [id]
      const callback = (error, results) => {
        if (error) {
          console.log('连接出错')
          return
        }
        const code = 200
        const data = {
          message: '删除成功！'
        }
        useResSend(res, code, data)
      }
      sqlConnect(sql, sqlArr, callback)
    } else {
      const code = 400
      const data = {
        message: '删除失败！'
      }
      useResSend(res, code, data)
    }
  } catch (err) {
    next(err)
  }
}

将删除的接口暴露出去，api/sys/delete-menu/:id

前端处理

先将前端进行请求的接口定义好

export const deleteMenu = (id: any) => DELETE(commonAPI + prefix + API.deleteMenu + `/${id}`)

在我们点击删除时，弹出 confirm 确认框，防止用户误点

当我们点击确认时，将会进行删除操作

const deleteFunc = (row) => {
  deleteMenu(row.id).then((res: any) => {
    ElMessage.success(res.message)
    state.editDialog = false
    getMenus()
  })
}

删除按钮的页面代码如下：

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

至此，我们的 删除数据 功能，添加完毕

后台项目 Express-Mysql-Vue3-TS-Pinia 删除数据

删除数据

引言

删除数据

后端api处理

前端处理

总结