vue后台管理系统介绍

2024-09-08 06:12:33

项目GitHub地址：https://github.com/Little-Orange7/cmms-vue

一.简介

很多公司稍微复杂一点的业务，基本上都需要后台管理系统，来对业务进行各个维度的统计、对公司人员管理等等，这些后台管理系统都有一个基础的共性，就是对登录用户的管理，对用户角色的管理，对登录用户的操作权限的管理等，所以此项目就将这部分作为一个基础功能编写出来作为一个通用后台管理系统（common management system），为各种后台管理系统提供一个基础的版本框架，使企业能快速的开发自己的业务模块，而非重新从零开始搭建编写这种基础性的功能。整个项目是完全前后端分离，分为两个部分，前端使用vue编写（对应仓库中的cmms-vue），后端使用springboot编写（对应仓库中的cmms）。

下面是部分截图：

菜单管理

给角色配置菜单

给用户配置角色

二.设计逻辑

每个用户登录之后，所看到的菜单，是由用户所拥有的角色决定的，其对应角色配置了哪些菜单，则用户登录之后就可以看到哪些菜单，从而控制了用户的菜单权限；关于机构的设计，每个用户都对应了一个机构，即每个用户都属于公司的一个部门，可以根据机构来查看其下拥有的用户有哪些。

1.菜单设计

菜单管理采用的是树形的控件，菜单的结构和层级关系都可以由管理员来定制，利用树形结构管理比较方便和直观：

2.角色设计

角色管理比较核心的就是配置菜单，选择一个角色，为其配置对应的菜单权限，配置菜单也是采用树形控件直接勾选，很直观和方便的查看到角色拥有的菜单，并且易于操作：

3.用户设计

不同的用户登录，所看到的菜单可能是不一样的，主要是因为用户拥有的角色不一样；用户管理比较核心的就是角色配置，一个用户可以对应多一个不同的角色，那么该用户拥有的菜单权限就是其所拥有的所有角色的并集：

项目github地址：https://github.com/Little-Orange7/cmms-vue

（项目后续还将持续的完善中，欢迎有兴趣的小伙伴加入）

最新文章

热门文章