后台项目 Express-Mysql-Vue3-TS-Pinia 用户管理-页面搭建

297 阅读2分钟

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

用户管理-页面搭建

引言

通过之前一段时间 ExpressMysql 的学习

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

用户管理

上一节,将 角色管理 的所有功能,处理完毕

这一节,开启新的页面和功能模块,用户管理

配置菜单

首先 如果想要展示页面,离不开我们的一个 菜单配置

所以第一步,就是我们的 用户管理菜单配置

需要我们到 系统管理-菜单管理 页面,路由地址为:/sys/menu ,进行 新增 菜单操作

image.png

填写完相关的表单信息,点击 确定 按钮,即可完成 用户管理 的基础菜单配置

image.png

展开后,可以看到 表格中,出现 用户管理 这一行 数据

image.png

以及,在我们 刷新页面 后,在侧边栏中,也可以看到 系统管理 下面的 用户管理

image.png

页面展示

虽然上面 用户管理 的相关文字,可以进行展示,但是点击后,是一个 空白的页面

想要页面进行展示,我们需要在项目中,创建相关的 目录 以及 文件

  • 首先是在 src\views\sys 目录下创建 user 目录

  • 之后在 user 目录下,创建 index.vue 文件

这样我们的 页面即可展示

image.png

这里有个知识点,就是为什么我们创建好目录以及文件,就可以展示内容

主要还是我们之前的 动态路由 那一节起了作用

至此 用户管理 的页面搭建完毕

总结

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

完成了 用户管理 页面的搭建