《Vuejs设计与实现》6.3 自动脱ref

角色删除

引言

通过之前一段时间 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.idconst reg = /^[\d]+$/if (reg.test(id)) {const sql = sqlAll.deleteRoleconst sqlArr = [id]const callback = (error, results) => {if (error) {console.log('连接出错')return}const code = 200const data = {message: '删除成功！'}useResSend(res, code, data)}sqlConnect(sql, sqlArr, callback)} else {const code = 400const 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()})
}

最后，最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享