Vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权

角色列表的增删改查

1.添加角色

先根据API文档编写接口;

// 添加角色
export const addRolesApi = (data) => {
  return axios({
    method: ‘post‘,
    url: ‘roles‘,
    data
  })
}

在角色组件内引用,然后给 添加角色 按钮绑定一个点击事件addRolesClick;

<!-- 添加角色 -->
<el-button type="success" plain @click="addRolesClick">添加角色</el-button>

找到Element-UI中的Dialog组件,添加到页面中;

<!-- 添加角色 -->
    <el-dialog title="添加角色" :visible.sync="addRolesDialogFormVisible">
      <el-form :model="addRolesForm" label-width="120px" ref="addRolesForm" :rules="rules">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addRolesForm.roleName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addRolesForm.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRolesDialogFormVisible = false;$refs.addRolesForm.resetFields()">取 消</el-button>
        <el-button type="primary" @click="addRolesConfirm">确 定</el-button>
      </div>
    </el-dialog>

参数说明:

  1. :visible.sync="addRolesDialogFormVisible"    // 是否隐藏组件,接收一个布尔值
  2. :model    // 绑定的数据对象
  3. :rules="rules" // 验证规则
  4. prop="roleName"   // 要校验的字段
  5. v-model="addRolesForm.roleName"    // 双向数据绑定

业务逻辑和前面的用户管理=>用户列表的增删改查的业务逻辑都是一样的,用户输入数据后校验是否合法,合法之后发送请求然后刷新数据。

角色列表的删除指定权限(重点)

添加绑定事件

删除有两种:

  1. 删除三级权限:就是删除当前这一个三级权限
  2. 删除二级或一级权限:删除二级权限,对应的三级权限也被删除,同样的,删除一级权限对应的二级权限也将被删除

查阅接口文档,分析删除业务的组件内的处理,在组件内部我们需要获取到两个值:roleid(角色id),rightid(权限id)

实现接口方法

在vue组件中绑定事件,发起请求,记得传递两个参数

难点:删除之后的数据刷新

  1. 我们可以重新加载整个数据,但是这样会造成极不好的用户体验:因为展开行会合并
  2. 我们期望:能不能只刷新当前行数据,具体的说是能不能只刷新当前展开行数据?

解决:只刷新当前展开行的数据

  1. 我们发现,删除权限之后的返回值中有一个Data属性,这个data就是实现删除操作之后这个角色还拥有的权限数据
  2. 所以:我们可以直接将返回值中的Data覆盖这个展开行的数据源(scope.row.children)
  3. scope.row.children = res.data.data
@close=‘deleteright(scope.row,third.id)‘
----------------------------------------
// 删除指定权限
deleteright (row, rightid) {
    deleteRightById(row.id, rightid)
        .then(res => {
        console.log(‘--------------‘)
        console.log(res)
        console.log(‘--------------‘)
        if (res.data.meta.status === 200) {
            this.$message({
                type: ‘success‘,
                message: res.data.meta.msg
            })
            // 数据的刷新
            row.children = res.data.data
        }
    })
}

最终的模板代码:

<el-table-column type="expand">
    <!-- 展开的时候,template模板中的结构就是展开行的内容 -->
    <template slot-scope="scope">
        <!-- 遍历数据行对象的children -->
        <el-row v-for="first in scope.row.children" :key="first.id" style=‘margin-bottom:10px;border-bottom:1px dashed #ccc‘>
            <el-col :span="4">
                <el-tag closable type="success"  @close=‘deleteright(scope.row,first.id)‘ v-if=‘first.children.length !== 0‘>{{first.authName}}</el-tag>
            </el-col>
            <el-col :span="20">
                <el-row v-for=‘second in first.children‘ :key=‘second.id‘ style=‘margin-bottom:10px;‘ >
                    <el-col :span=‘4‘>
                        <el-tag closable type="info"  @close=‘deleteright(scope.row,second.id)‘  v-if=‘second.children.length !== 0‘>{{second.authName}}</el-tag>
                    </el-col>
                    <el-col :span=‘20‘>
                        <el-tag closable type="danger" v-for=‘third in second.children‘ :key=‘third.id‘ style=‘margin:0 4px 4px 0‘ @close=‘deleteright(scope.row,third.id)‘>{{third.authName}}</el-tag>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" v-if=‘scope.row.children.length === 0‘>没有任何的权限数据,请先添加</el-col>
        </el-row>
    </template>
</el-table-column>

角色权限分配

分配权限弹出框的添加

在弹出框添加一个树形组件

  1. 找到组件,添加结构
  2. 分析树形组件的属性
  3. 动态加载所有权限数据
  4. 实现树形组件 节点的默认选中:获取当前角色所拥有的权限id
  5. 实现权限的设置:获取到当前用户所选择的所有权限所对应的id,并且拼接为,分隔的字符串格式

步骤:

  1. 分配权限弹出框的添加
  2. 树形组件的添加:默认展开+带复选框+默认选中
<el-tree
        :data="data2" // 数据源
        show-checkbox // 显示复选框
        node-key="id" //每个树节点用来作为唯一标识的属性,整棵树应该是唯一的,后期这个值就应该绑定为当前权限对象数据中的权限id
        :default-expanded-keys="[2, 3]" // 默认展开的节点
        :default-expand-all=‘true‘ // 默认展开所有节点
        :default-checked-keys="[5]" // 默认勾选的节点的 key 的数组
        :props="defaultProps" // 当前节点的配置,如你想展示什么数据,背后的value。。,子级数据
      ></el-tree>

树形组件的常用属性

<el-tree
        :data="rightList" // 数据源
        show-checkbox // 显示复选框
        node-key="id" //每个树节点用来作为唯一标识的属性,整棵树应该是唯一的,后期这个值就应该绑定为当前权限对象数据中的权限id
        :default-expand-all=‘true‘ // 默认展开所有节点
        :default-checked-keys="rightListByRole" // 默认勾选的节点的 key 的数组
        :props="defaultProps" // 当前节点的配置,如你想展示什么数据,背后的value。。,子级数据
      ></el-tree>
---------
defaultProps:{
    label:authName,
    chilren:children
}

数据和树形组件对应,显示权限动态数据

// 打开授权对话框
showGrantDialog () {
    this.grantdialogFormVisible = true
    // 获取所有权限数据
    getAllRightList(‘tree‘)
        .then(res => {
        console.log(res)
        this.rightList = res.data.data
    })
}

让树形组件有默认节点选择

  1. 选中子节点,父级节点也会被选中
  2. 我们只需要获取最下面一层的节点所对应的权限id
  3. 一级权限下不一定有二级权限,同样的,二级权限下不一定有三级权限--判断
  4. 我们得遍历当前角色所拥有的权限,获取到所有的权限id(最后一级)
// 获取当前角色所拥有的所有权限id
// 先将上一个角色的权限id数组清空
this.checkedArr.length = 0
row.children.forEach((first) => {
    if (first.children.length > 0) {
        // 遍历二级权限
        first.children.forEach(second => {
            if (second.children.length > 0) {
                // 遍历三级权限
                second.children.forEach(third => {
                    this.checkedArr.push(third.id)
                })
            }
        })
    }
})

实现角色授权的提交

  • 分析接口文档,想清楚接口到底需要什么
  • 我们如何获取接口所需要的参数?
  • 我们观察数据表的结构,我们发现,在存储三级权限的时候,它还同时存储着二级权限和一级权限
  • 所以我们有一个现实的需求:我们在获取权限id的时候,应该获取一个完整的拥有层次结构的id:(一级权限,二级权限,三级权限)

获取权限id: 为tree添加一个ref属性

  1. this.$refs.tree.getCheckedKeys():获取当前被选中的复选框所对应的key(node-key="id")
  2. 这个场合不要使用getCheckedKeys,因为当不是所有三级权限都被选中的情况下,它不能获取到二级权限和一级权限所对应的id
  3. this.$refs.tree.getCheckedNodes():可以获取到当前节点对象,这个对象中包含当前节点所对应的权限数据对象,这个对象中有完整的父级权限id

添加接口方法

// 角色授权
export const grantRightByRoleId = (roleid, rids) => {
  return axios({
    method: ‘post‘,
    url: `roles/${roleid}/rights`,
    data: { rids: rids }
  })
}

实现授权提交

// 实现角色授权提交
grantSubmit () {
    // var arr = this.$refs.tree.getCheckedKeys()
    var arr = this.$refs.tree.getCheckedNodes()
    // [authName: "添加订单",id: 109,path: (...),pid: "107,102"]
    console.log(arr)
    // 我们需要的是每个权限所对应的id,同时包含它们的父级id
    // 1.遍历Arr,获取里面的两个值:id   pid  ,遍历:我需要遍历拼接后的结果["109,107,102",‘154,107,102‘]
    // 它可以将回调函数的操作结果存储到map函数内部所创建的数组中,当遍历完之后再将其返回
    var temp = arr.map(value => {
        return value.id + ‘,‘ + value.pid
    })
    // ["109,107,102", "154,107,102"]
    console.log(temp)
    // 去除重复值--数组才能去重
    // 将数组拼接为字符串 “109,107,102,154,107,102"
    var str = temp.join(‘,‘)
    console.log(str)
    console.log(str.split(‘,‘))
    // 数组去重.new Set可以创建一个set对象,同时去除重复值
    var obj = new Set(str.split(‘,‘))
    console.log(obj)
    // 最终需要一个去除了重复值的数组,...可以将对象中的数据一个一个展开
    var final = [...obj]
    console.log(final.join(‘,‘))

    // 调用接口方法实现角色授权
    grantRightByRoleId(this.roleId, final.join(‘,‘))
        .then(res => {
        console.log(res)
    })
}

具体效果和业务逻辑代码还是直接从github上把项目拉下来细细研究吧:https://github.com/C4az6/vue_manage_system.git

如果您喜欢这篇文章,可以打赏点钱给我 :)

    支付宝                  微信

   

原文地址:https://www.cnblogs.com/sauronblog/p/11617263.html

时间: 2024-10-14 22:30:57

Vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权的相关文章

Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能

前言 由于之前的作者没有再更新这个后台管理系统项目的文章了,我想着把它的项目重头到位做一遍,把剩下的文章写完,把这个项目记录完整,以后遇到类似的后台管理系统项目,可以快速复习一些知识点. 新的项目地址:https://github.com/C4az6/vue_manage_system 添加用户 这个操作在用户列表页面,所以路由不用再进行 处理了. 基于单文件组件: 添加事件绑定--弹出新增用户对话框 添加dialog对话框 Element-UI组件>dialog对话框>自定义内容>表单

Vue电商后台管理系统项目第6篇-商品管理的商品列表和商品添加组件实现

开胃小菜—左侧导航菜单的动态生成 通过为指定的用户指定角色,那么这个用户登陆之后应该只能看到这个角色所对应的权限菜单, 我们是根据当前登陆用户去获取对应的菜单权限 步骤 分析接口文档 ,发现不用传递参数,因为它是根据当前登陆用户的token来动态获取当前用户的权限 添加接口方法获取动态的菜单数据 // 获取左侧菜单权限 export const getLeftMenu = () => { return axios({ url: `menus` }) } 实现菜单项的动态加载 获取数据之后,注意看

Vue电商后台管理系统项目第4篇-权限管理页面实现

优化之前的分配角色功能 实现下拉列表的选项默认选中 为下拉列表的v-model赋值一个id,这个id会对应着下拉列表的value,如果赋值了Value,那么就会让这个value数据所对应的字符串数据显示 我们得先获取到这个用户的rid // 分配角色提交 grantrolesubmit () { if (this.grantForm.rid) { grantUserRole(this.grantForm.id, this.grantForm.rid) .then(res => { if (res

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下.这讲主要是,制作漂亮的工具栏,虽然easyui的datagrid已经自带可以设置工具栏,我们还是要提取出来,为以后权限控制做更好的准备. 前端代码没有逻辑结果,这也许是我写代码以来写得最轻松的,但也是最繁琐的,因为美工我不是强项,每一次调整都非常的困难,最后我把他调成了这样了: 看得过去的鼓掌一下.样式已经包含在附加代码中了. 大家只要加入以下HTML代码到index上就可以

yii2-basic后台管理功能开发之二:创建CRUD增删改查

昨天实现了后台模板的嵌套,今天我们可以试着创建CRUD模型啦 刚开始的应该都是“套用”,不再打算细说,只把关键的地方指出来. CRUD即数据库增删改查操作.可以理解为yii2为我们做了一个组件,来实现基本的增删改查视图和操作. 1.创建数据库表 2.用gii生成model模型 3.用gii生成CRUD 需要注意的是CRUD生成的控制器的namespace,要和当前所在目录保持一致.否组路由会报错,找不到该页面等信息.

React16+React-Router4 从零打造企业级电商后台管理系统

第1章 课程介绍本章整体介绍该课程的内容,让同学们了解这个课程的特点和学习方法,以及后台管理系统开发前的一些前置工作,如需求分析.技术选型和数据接口等. 第2章 课前知识储备本章介绍一些后面课程要用到的一些基础知识,为后面的开发打下基础,包括页面加载过程.ES6基础和本地存储相关的知识. 第3章 前端框架的分析本章介绍前端框架的共性和应用场景,分析前端加载原理,并对单页和多页应用,框架和原生开发,三大主流框架之间做详细的对比. 第4章 开发环境的搭建搭建项目依赖的开发环境,包括nodejs的安装

2019教你用react全家桶+node.js全栈开发大型电商后台管理系统(视频+源码+课件)

主要内容:1. 业务功能模块: 用户登陆.商品分类管理.商品管理.角色管理.用户管理.菜单权限控制.订单管理等2. 前端技术: React + React Router4 + Redux + Antd + Axios + ES6/ES8 + webpack + ECharts/Bizcharts 等 3. 后端技术: NodeJS + Express + MongoDB + Mongoose + Multer 等 4. 项目开发模式: 模块化.组件化.工程化的开发模式 5. 深入源码: 自定义R

CX105React16+React-Router4 从零打造企业级电商后台管理系统

新年伊始,学习要趁早,点滴记录,学习就是进步! 不要到处找了,抓紧提升自己. 对于学习有困难不知道如何提升自己可以加扣:1225462853 获取资料. 下载地址:https://pan.baidu.com/s/1o9rZpj0 原文地址:https://www.cnblogs.com/sunnyppl/p/8511562.html

Angular4 后台管理系统搭建(3) - wijmo5 flexgrid表格增删改按钮实现

这章应该是wijmo5 flexgrid表格应用的最后一章,我们在三章内介绍了flexgrid表格组件的数据绑定,分页器搭建,单元格模板控制和代码重绘单元格控制.这章在介绍下对表格添加增删改三个按钮.有了这些功底以后做angular的项目,使用wijmo5 flexgrid组件.基本上是够用了.还有一些比如内部编辑,合并,子表格什么的需要了在去熟悉即可. 首先是要在ts文件内找到html模板内的表格对象.这个用@ViewChild 这个指令实现.我们看下实现,首先是html模板 对表格组件,我们