vue后台管理系统介绍
项目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后台管理系统介绍的更多相关文章
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- Vue 后台管理
这里是结合vue和element快速成型的一个demo 里面展示了基本的后台管理界面的大体结构和element的基本操作 GitHub的地址:https://github.com/wwwming/ad ...
- vue后台管理项目中菜单栏切换的三种方法
第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...
- Core + Vue 后台管理基础框架0——开篇
1.背景 最近,打算新开个项目,鉴于团队技术栈,选型.net core + vue,前后端分离.本打算捡现成的轮子的,github上大致逛了逛,总发现这样那样的不太适合心中那些“完美实践”,例如:Ab ...
- Core + Vue 后台管理基础框架4——前端授权
1.前言 上篇,我们讲了后端的授权.与后端不同,前端主要是通过功能入口如菜单.按钮的显隐来控制授权的.具体来讲,就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内的功能按钮.我们一个个来讲. 2. ...
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
网上搜索了很久Vue项目搭建指南,并没有找到写的比较符合心意的,所以打算自己撸一个指南,集合众家之所长(不善于排版,有点逼死强迫症,如果觉得写的有问题,可以留言斧正,觉得写的太差的,可以留言哪里差, ...
- Core + Vue 后台管理基础框架2——认证
1.前言 这块儿当时在IdentityServer4和JWT之间犹豫了一下,后来考虑到现状,出于3个原因,暂时放弃了IdentityServer4选择了JWT: (1)目前这个前端框架更适配JWT: ...
- Core + Vue 后台管理基础框架3——后端授权
1.前言 但凡业务系统,授权是绕不开的一环.见过太多只在前端做菜单及按钮显隐控制,但后端裸奔的,觉着前端看不到,系统就安全,掩耳盗铃也好,自欺欺人也罢,这里不做评论.在.NET CORE中,也见过不少 ...
- Core + Vue 后台管理基础框架1——运行系统
1.down源码 git clone https://github.com/KINGGUOKUN/SystemManagement.git,项目目录如下: 2.还原数据库 找到项目根目录下System ...
随机推荐
- 萌新带你开车上p站(三)
本文作者:萌新 前情回顾: 萌新带你开车上p站(一) 萌新带你开车上p站(二) 0x08 题目给的提示是和运算符优先级有关 登录后直接看源码 mistake@pwnable:~$ ls flag mi ...
- 《MySQL实战45讲》学习笔记4——MySQL中InnoDB的索引
索引是在存储引擎层实现的,且在 MySQL 不同存储引擎中的实现也不同,本篇文章介绍的是 MySQL 的 InnoDB 的索引. 下文将以这张表为例开展. # 创建一个主键为 id 的表,表中有字段 ...
- 从CentOS 7.0升级到7.7版本
我平时都在VirtualBox上装虚拟机,方法是导入ova镜像文件,比如导入从网上下载的CentOS7-base.ova,该ova为CentOS 7.0版本,而现在最新版本为7.7,为此进入系统后第一 ...
- 用Python绘制全球疫情变化地图
目前全球疫情仍然比较严重,为了能清晰地看到疫情爆发以来至现在全球疫情的变化趋势,我绘制了一张疫情变化地图,完整代码共 230 行,需要的朋友在公众号回复关键字 疫情地图 即可. 废话不多说,先上图 下 ...
- Python-selenium安装与Java-selenium安装
一.Python安装及selenium的安装 1.安装Pythonhttps://www.Python.org2.安装setuptools.distribute.piphttps://pypi.pyt ...
- 上班无聊,自己用python做个小游戏来打发时间
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...
- python批量爬取动漫免费看!!
实现效果 运行环境 IDE VS2019 Python3.7 Chrome.ChromeDriver Chrome和ChromeDriver的版本需要相互对应 先上代码,代码非常简短,包含空行也才50 ...
- js拼接onclick方法字符串参数解决方法
onclick = contentmap("'+useridarr[i]+'")
- 掌握MySQL连接查询到底什么是驱动表
准备我们需要的表结构和数据 两张表 studnet(学生)表和score(成绩)表, 创建表的SQL语句如下 CREATE TABLE `student` ( `id` int(11) NOT NUL ...
- [GO] mac安装GO 初次尝试
其实试了好多方法,我用的是下面这种方法,简单快捷! 安装homebrew 在终端输入命令 ruby -e "$(curl -fsSL https://raw.githubuserconten ...