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

接口-角色查询 和 新增

引言

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

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

接口定义

首先是在我们的后端 Express 中，来进行我们的 查询 和 新增 的接口定义

位置在 controller\sys\sql.js 文件下

新增两条 sql 语句

const getRolesAll = `select * from role;`

const addRole = `insert into role(name,description,menuArrId) values(?,?,?);`

之后我们在 controller 控制器中，添加处理逻辑的代码，

关系

这里有个关键的问题

就是一般情况下，我们需要将 角色id 与 菜单的id 之间，再创建一个表，用来进行关联操作

但是我觉得有点麻烦，所以我这里，使用了另一种结构形式，用字符串的形式进行保存

但是结果是一样的，并且前端的操作是无感的，与第一种形式一样。

但是 数据的处理 部分放在了 后端 来进行 实现。

• 在 查询 操作时，将从数据库中查询到的 menuArrId 字段，循环遍历，将其从 字符串 转化为 对象 的形式

    results.forEach((item) => {
      item.menuArrId = JSON.parse(item.menuArrId)
    })
  

• 而在 新增 操作时，将前端传来的 menuArrId 对象，从 对象 转化为 字符串 形式，存储到数据库中

  const menuListString = JSON.stringify(menuArrId)
  

下面是主要的数据库操作的部分，代码如下

处理好数据库方面后，我们来定义 查询 和 新增 的接口，来给后续 前端 使用

位置在 express\router\sys\index.js 文件下

注意请求的方法，一个是 get 一个是 post

const Api = {
  getAllRoles: '/roles',
  
  addRole: '/add-role'
}

router.get(Api.getAllRoles, sysController.getAllRoles)
router.post(Api.addRole, sysController.addRole)

总结

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

通过 Express 做了 角色的 查询 以及 新增 的接口