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 ...
随机推荐
- AJ学IOS 之UIDynamic重力、弹性碰撞吸附等现象
AJ分享,必须精品 一:效果 重力和碰撞 吸附现象 二:简介 什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真 ...
- Kafka 2.5.0发布——弃用对Scala2.11的支持
近日Kafka发布了最新版本 2.5.0,增加了很多新功能: 下载地址:https://kafka.apache.org/downloads#2.5.0 对TLS 1.3的支持(默认为1.2) 引入用 ...
- delphi中DateTimePicker控件同时输入日期和时间
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...
- TCP的分分合合(面试必问)
TCP连接与断开 目录 TCP连接与断开 前言 握手 挥手 最后 前言 相信面试过的小伙伴对这个话题应该不陌生,算是面试必问了,三次握手,四次挥手,以及其中的一些衍生问题. TCP/IP(Transm ...
- 处理数字的类 —— Math类 、 Random类 、 BigDecimal类 与 BigInteger类
在我们学习C语言时,我们处理数据时要调用很多函数,那么,Java也有很多的方法可以来处理数值的类. 那么,在本篇博文中,本人就来讲解三个用于处理数值的类 -- Math类 . Random类 与 Bi ...
- 详解 Set接口
(请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...
- 【翻译】TensorFlow卷积神经网络识别CIFAR 10Convolutional Neural Network (CNN)| CIFAR 10 TensorFlow
原网址:https://data-flair.training/blogs/cnn-tensorflow-cifar-10/ by DataFlair Team · Published May 21, ...
- 神奇的Kivy,让Python快速开发移动app
随着移动互联网的不断发展,手机.Pad等移动终端已经被普遍使用,充斥在人们的工作.学习和生活中,越来越多的程序都转向移动终端,各类app应用相拥而至. Kivy作为Python的Android和IOS ...
- 笔记本安装ubuntu18.08,解决过程中出现的各种问题
笔记本安装ubuntu18.08,解决过程中出现的各种问题 1.做启动U盘 在官网下载要安装的镜像,使用软碟通制作U盘安装盘 文件 -- 打开 然后 启动 -- 写入硬盘映像 -- 选择你的u盘 -- ...
- python工业互联网监控项目实战5—Collector到opcua服务
本小节演示项目是如何从连接器到获取Tank4C9服务上的设备对象的值,并通过Connector服务的url返回给UI端请求的.另外,实际项目中考虑websocket中间可能因为网络通信等原因出现中断情 ...