项目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

(项目后续还将持续的完善中,欢迎有兴趣的小伙伴加入)

vue后台管理系统介绍的更多相关文章

  1. 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

    ¶项目分析 一个完整的网站服务架构,包括:   1.web frame ---这里应用express框架   2.web server ---这里应用nodejs   3.Database ---这里 ...

  2. Vue 后台管理

    这里是结合vue和element快速成型的一个demo 里面展示了基本的后台管理界面的大体结构和element的基本操作 GitHub的地址:https://github.com/wwwming/ad ...

  3. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

  4. Core + Vue 后台管理基础框架0——开篇

    1.背景 最近,打算新开个项目,鉴于团队技术栈,选型.net core + vue,前后端分离.本打算捡现成的轮子的,github上大致逛了逛,总发现这样那样的不太适合心中那些“完美实践”,例如:Ab ...

  5. Core + Vue 后台管理基础框架4——前端授权

    1.前言 上篇,我们讲了后端的授权.与后端不同,前端主要是通过功能入口如菜单.按钮的显隐来控制授权的.具体来讲,就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内的功能按钮.我们一个个来讲. 2. ...

  6. 从0搭建vue后台管理项目到颈椎病康复指南(一)

    网上搜索了很久Vue项目搭建指南,并没有找到写的比较符合心意的,所以打算自己撸一个指南,集合众家之所长(不善于排版,有点逼死强迫症,如果觉得写的有问题,可以留言斧正,觉得写的太差的,可以留言哪里差, ...

  7. Core + Vue 后台管理基础框架2——认证

    1.前言 这块儿当时在IdentityServer4和JWT之间犹豫了一下,后来考虑到现状,出于3个原因,暂时放弃了IdentityServer4选择了JWT: (1)目前这个前端框架更适配JWT: ...

  8. Core + Vue 后台管理基础框架3——后端授权

    1.前言 但凡业务系统,授权是绕不开的一环.见过太多只在前端做菜单及按钮显隐控制,但后端裸奔的,觉着前端看不到,系统就安全,掩耳盗铃也好,自欺欺人也罢,这里不做评论.在.NET CORE中,也见过不少 ...

  9. Core + Vue 后台管理基础框架1——运行系统

    1.down源码 git clone https://github.com/KINGGUOKUN/SystemManagement.git,项目目录如下: 2.还原数据库 找到项目根目录下System ...

随机推荐

  1. python3(三十二) try except

    """ 异常处理 """ __author__on__ = 'shaozhiqi 2019/9/19' # 大量的代码来判断是否出错: # ...

  2. GeoGebra函数使用

    分段函数使用 输入指令: If(x < -2, x, -2 < x < 2, x², x > 2, x)

  3. Python-selenium安装与Java-selenium安装

    一.Python安装及selenium的安装 1.安装Pythonhttps://www.Python.org2.安装setuptools.distribute.piphttps://pypi.pyt ...

  4. 王者荣耀英雄全皮肤4K高清大图,python爬虫帮你保存下来

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...

  5. work of 1/6/2016

    part 组员                今日工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云 UI动态布局改进和攻克疑难     6 继续下滑条等增删补减 ...

  6. Problem F Free Weights

    二分答案. 思路:对于二分给定的mid,即当前允许移动的最大重量,我们可以把小于改重量的标记一下,然后把没有标记的按照顺序放到另一个数组,然后判断是否满足两两相同. #include<bits/ ...

  7. php7.2.1+redis3.2.1 安装redis扩展(windows系统)

    前提:已成功安装PHP环境和Redis服务 下面进入正题: 第一步,下载redis驱动扩展文件,注意:需要根据上面信息下载对应版本 https://windows.php.net/downloads/ ...

  8. NCTF2019 小部分题解

    前言 礼拜五领航杯打的比较累,做不出WEB,D3CTF没用,做了NJCTF的一些题目(懒,睡觉到12点起) Misc 第一次比赛先去做misc,以前一直做WEB,以后要WEB+MISC做.礼拜六下午做 ...

  9. [linux][nginx] 常用

    原文链接http://www.cnblogs.com/codingcloud/p/5095066.html 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root ...

  10. es技术规划

    一.业务背景 es服务当前没有专门的部门负责维护和开发,交由各端自行负责维护,随着公司业务查询和统计需求非常多,会面临居多方面问题和挑战: 无人(专业RD或部门)负责 无专业的人进行维护,遇到问题几乎 ...