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

角色更新api

引言

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

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

角色更新

上一节，我们通过后端 Express 来将我们的 角色更新 的 api 接口给定义好

这一节，处理我们将前端的 角色更新 逻辑也处理完毕

接口

首先是，前端通过 axios 请求库，来请求后端接口 api/sys/edit-role

const commonAPI = '/api'

const prefix = '/sys'

const API = {
  editRole: '/edit-role',
}

/**
 * 编辑角色
 */
export const editRole = (data: any) => PUT(commonAPI + prefix + API.editRole, data)

编辑需要在两个位置处引入，

• 在 src\views\sys\role\index.vue 文件中进行引入

  • 在 菜单 位置处时，点击 保存 按钮的时候进行使用

  

• 在 src\views\sys\role\useDialog.vue 文件中进行引入

  • 点击 编辑 时，确认 按钮进行使用

  

使用

下面是两个地方的使用

首页

在 角色管理 页面，主要是以下流程

• 在左侧表格中选中某个角色，点击某一行

• 右边菜单进行展示

  • 选择拥有的 菜单 权限

• 点击 保存按钮，即可保存成功

下面是流程演示图

编辑

编辑时 进行保存

• 在左侧表格中选中某个角色的操作，编辑 按钮

• 弹出的页面进行编辑

• 点击 确认 ，首先进行校验是否正确

• 最终保存请求，即可保存成功

下面是流程演示图

总结

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

前端页面的 角色更新 逻辑 完成