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

角色管理-页面搭建

引言

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

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

角色管理

通过之前一段时间，我们将 菜单 和 动态路由 这个两大部分处理完毕

之后可以进入到我们的 角色 模块的开发上面了

都知道 角色 是离不开 菜单 的

当然，我们还是可以先从 菜单管理 中，来配置 角色管理 的菜单

创建成功后，我们并且在 src\views\sys\role 文件夹下，创建 index.vue 文件，

此时我们的 侧边栏菜单 中，角色管理 也成功生成

点击 角色管理，自动跳转到我们配置好的 路由 中

页面搭建

现在我们将 角色管理 的前端的页面进行搭建

布局为 左右布局，左侧为 角色列表，右侧为 菜单树

点击 左侧的 表格 数据，在 右侧 将 该行数据 对应的菜单 进行展示。并且只有点击数据时，右侧按钮才会将点亮

下面先将页面的效果进行展示

整体通过 ElementPlus 中的 Layout 来进行布局

<el-row :gutter="20" style="margin-top: 20px">

    <el-col :span="16">
        <el-card></el-card>
    </el-col>

    <el-col :span="8">
        <el-card></el-card>
    </el-col>

</el-row>

并且中间通过 el-card 的卡片形式，来将整体布局中，重要的部分进行凸显

下面将 左右两侧 的主要代码 进行粘贴

左侧

右侧

总结

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

通过 菜单管理 配置 角色管理，并完成了 角色管理-前端页面的搭建