电商后台管理系统——权限管理模块
电商后台管理系统——权限管理模块
电商后台管理系统的权限管理模块分为角色列表和权限列表两部分,两部分流程图大概如下
1.权限列表实现过程
创建路由组件配置路由——布局基本面包屑导航卡片视图——表单绑定数据提供方法获取权限列表数据
表单有三列数据:权限名称, 路径 ,权限等级,权限等级通过作用域与 插槽放入el-tag实现自定义格式,再根据数据的level判断显示哪个等级的tag
表单结构:
<el-card><el-table :data="rightList" border stripe><el-table-column type="index"></el-table-column><el-table-column label="权限名称" prop="authName"></el-table-column><el-table-column label="路径" prop="path"></el-table-column><el-table-column label="权限等级" prop="level"><template slot-scope="scope"><el-tag v-if="scope.row.level==='0'">一级</el-tag><el-tag type="success" v-else-if="scope.row.level==='1'">二级</el-tag><el-tag type="warning" v-else>三级</el-tag></template></el-table-column></el-table></el-card>
方法:通过发送get请求获取数据
methods:{//获取权限列表async getRightList(){const {data:res}=await this.$http.get('rights/list')if(res.meta.status!==200){return this.$message.error('获取权限列表失败')}this.rightList=res.data}}
2.角色列表实现过程
整个页面功能有添加角色功能,以及一个表单,表单有三列数据:角色名称,角色描述,操作 。操作通过作用域插槽实现布局编辑,删除,分配权限按钮。
实现流程:添加角色列表组件配置路由——布局基本面包屑导航卡片视图表单等——表单绑定数据提供方法获取权限列表数据——操作功能模块实现
困难点:
1.表单的展开列实现还需要通过三重嵌套for循环生成下拉列表
通过在作用域与插槽里使用栅格布局el-row(行),el-col(列),分为24列
通过scope.row.children拿到一级权限数据,将key值设置为拿到的数据item的id
<el-tag closable @close="removeRightById(scope.row, item1.id)">{{item1.authName}}</el-tag>
通过 for 循环 嵌套渲染二级权限
`<el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">`
i2是索引
通过for继续渲染三级权限
<el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id" closable @close="removeRightById(scope.row, item3.id)">{{item3.authName}}</el-tag>
2.分配权限的操作
分配权限按钮对话框(树形结构弹窗)——分配权限按钮绑定点击事件——渲染所有权限数据一级默认选中数据到页面树形结构——分配权限对话框确定按钮绑定分配权限事件
<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>
所有权限数据获取与前面数据获取写法一致。默认数据选中需要通过 el-tree的属性: default-checked-keys=“defKeys” defkeys 。
思路是点击分配权限按钮时将当前角色所有的三级权限id存入defkeys,当前角色的id通过在点击分配权限按钮事件里传入scope.row
getLeafKeys(node, arr) {// 如果当前 node 节点不包含 children 属性,则是三级节点if (!node.children) {return arr.push(node.id)}node.children.forEach(item => this.getLeafKeys(item, arr))},
上面代码块是通过递归的形式,获取角色下所有三级权限的id,并保存到 defKeys 数组中(判断是否包含child属性,包含则不是三级节点,则让该节点的子节点循环遍历递归调用该函数)
注意需要监听关闭对话框事件,因为需要重置defkeys数组,不清空的话,每次之前的角色都保存在数组里了。
确定按钮绑定事件:
el-tree的getCheckedKeys(),getHalfCheckedKeys()可以获得全选和半选中的数组,将数据post传入后台,再重新调用获取角色方法。
async allotRights() {const keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]const idStr = keys.join(',')const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`,{ rids: idStr })if (res.meta.status !== 200) {return this.$message.error('分配权限失败!')}this.$message.success('分配权限成功!')this.getRolesList()this.setRightDialogVisible = false}
电商后台管理系统——权限管理模块相关推荐
- 9.1黑马Vue电商后台管理系统商品管理模块完善:编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能 同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
- Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理 作品名 ...
- Vue项目实战之电商后台管理系统(二) 主页模块
前言 目录 前言 一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...
- 电商后台管理系统订单列表模块
一 代码 1 新建 Order.vue 组件 <template><div><!-- 面包屑导航区 --><el-breadcrumb separator-c ...
- 10.2 黑马Vue电商后台管理系统 完善订单模块--搜索订单(修改后端)
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能 我的思 ...
- 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品分类)
目录 商品分类 一.创建一个子分支 二.创建组件 三.绘制商品分类的页面基本结构 四.功能 五.提交代码 商品分类 一.创建一个子分支 git branch--查看当前所在分支 git checkou ...
- Vue全家桶 - 电商后台管理系统项目开发实录(详)
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤 码云相关操作 2. ...
- Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述 一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
- 【Vue】实战项目:电商后台管理系统(Element-UI)(一)前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍 电商管理系统(Element-UI) 开发模式 前端技术栈 后端技术栈 1. 配置--初始化 前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
- Vue电商后台管理系统项目开发实战(一)
前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
最新文章
- 把握每天的第一个钟头
- php是独立服务吗,在LNMP服务器中,PHP是作为一个独立的服务存在的,这个服务叫做_______。...
- GPU 内存的分级综述(gpu memory hierarchy)
- 动态规划之背包模型及其扩展应用
- FJ集团企业级邮件服务器构建方案
- 编写Controller方法
- linux install StarDict
- 个人觉得非常好用的mysql客户端工具的HeidiSQL
- 妙用Python集合求解啤酒问题(携程2016笔试题)
- 硬盘、服务器、RAID磁盘阵列
- python之socket网络编程
- 用VAE(variational autoencoder)做sentence embedding/representation或者其他任何结构数据的热presentation...
- Async和Await如何简化异步编程,几个实例让你彻底明白!
- 计算机桌面声音图标,win7桌面右下角的小喇叭音量图标不见了怎么办?
- mysql latch_MySQL8.0 - InnoDB里的Latch定义-阿里云开发者社区
- 婚礼这天你是公主,你的婚礼你做主
- 解决UE4打包Android报错app:packageDebug FAILED的一个土方法
- 人工智能的嘴巴——语音合成(Text to Speech | TTS)
- linux shell bash -c $IFS ${IFS}
- 二维码活码源码(含数据库脚本)
热门文章
- 一位全减器逻辑电路图_一种一位全减器电路的制作方法
- 太阳高度角计算题_【难点突破】太阳高度角与正午太阳高度角区别(附例题解析)...
- 鲁棒控制器设计方法(systune,hinfsyn,musyn...)
- 免费的MySQL数据库
- 1-docker安装
- uni-app使用阿里矢量图库导入 icon 彩色和黑白色
- java 传真x2fax_FreeSWITCH的传真发送
- 在 MQL5 中使用 WININET。第二部分:POST 请求和文件
- python mql4_使用MQL5将OHLC值从Python API集成到MT5
- 【HTTP协议】---HTTP协议详解