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

角色删除

引言

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

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

角色删除

上一节，将 角色更新 的这个功能，前后端均实现完毕

这一节，我们完成 角色删除 功能

api接口

首先通过 Express 来定义我们的后端接口

角色删除的 sql 文件位置 controller\sys\sql.js

sql 代码为：

const deleteRole = `delete from role where id=?;`

将 sql 代码写完后，我们就可以去处理后端逻辑

角色删除的逻辑代码文件位置 controller\sys\index.js

主要是去判断传来的是否是数字（通过正则来进行判断）
- const reg = /^[\d]+$/

代码如下

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

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

    if (reg.test(id)) {
      const sql = sqlAll.deleteRole
      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)
  }
}

我们将接口进行定义，和暴露给前端：

文件位置 router\sys\index.js

const Api = {
  deleteRole: '/delete-role/:id',
}

前端

前端首先定义下，删除的接口，最终通过 axios 来进行请求

文件位置 src\api\sys\index.ts

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

定义好了之后，我们在 角色管理 页面，点击红色的删除按钮，来实现删除的逻辑

首先通过 popconfirm 来提示，是否进行删除，以防止用户进行 误触碰 操作
当点击确定后，实现删除逻辑
最后重新请求角色列表，来刷新列表，将最新数据展示到页面中

import { deleteRole } from '@/api'

const deleteFunc = (row) => {
  deleteRole(row.id).then((res: any) => {
    ElMessage.success(res.message)
    getRoles()
  })
}

总结

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

完成了前后端代码，实现了角色删除功能，

后台项目 Express-Mysql-Vue3-TS-Pinia 角色删除

角色删除

引言

角色删除

api接口

前端

总结