Java前后端分離之權(quán)限管理示例分析
1.前端界面
1.1 按鈕
借助elementui中的表格部分
<template slot-scope="scope"> <el-button @click="permissionClick(scope.row)" type="primary" size="mini">修改權(quán)限222</el-button> </template>
1.2 對(duì)話框+樹(shù)形控件
借助elementui中的對(duì)話框和樹(shù)形結(jié)構(gòu)
<!--自寫權(quán)限222--> <el-dialog title="提示" :visible.sync="dialogPerVisible" width="30%" > <!-- :default-expanded-keys="[2, 3]"默認(rèn)展開(kāi)項(xiàng) :default-checked-keys="[5]"默認(rèn)選中項(xiàng) --> <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps"> </el-tree> <span slot="footer" class="dialog-footer"> <el-button @click="dialogPerVisible = false">取 消</el-button> <el-button type="primary" @click="dialogPerVisible = false">確 定</el-button> </span> </el-dialog>
data(){ return{ //自寫權(quán)限樹(shù)遮罩層 dialogPerVisible:false, treeData:[], defaultProps: { children: 'children', //如果不顯示命名,注意看請(qǐng)求結(jié)果是否為label不是則修改‘label'中的內(nèi)容 label: 'label' } } }
methods:{ //自寫權(quán)限點(diǎn)擊 permissionClick(row){ this.dialogPerVisible=true; this.$http.get("/system/permission/findPermessionByRoleId/"+row.id).then(result=>{ this.treeData=result.data.data.treeData; }) } }
2.后端操作
2.1 controller層
//自寫權(quán)限樹(shù) @GetMapping("findPermessionByRoleId/{roleId}") public CommonResult findPermessionByRoleId(@PathVariable String roleId){ return iPermissionService.findPermessionByRoleId(roleId); }
2.2 serviceImpl層
此處使用TODO可以在后面進(jìn)行查找此業(yè)務(wù)是否完成
//自寫樹(shù)結(jié)構(gòu)的獲取 @Override public CommonResult findPermessionByRoleId(String roleId) { //查詢所有的權(quán)限 QueryWrapper<Permission> wrapper=new QueryWrapper<>(); //邏輯刪除列考慮在內(nèi) 還有一個(gè)狀態(tài)列數(shù)據(jù)庫(kù)暫未考慮 wrapper.eq("is_deleted",0); List<Permission> permissionList = permissionMapper.selectList(wrapper); //設(shè)置層級(jí)關(guān)系 List<Permission> firstMenus=new ArrayList<>(); for (Permission first:permissionList) { //int if(first.getPid().equals("1")){ firstMenus.add(first); } } //為一級(jí)菜單設(shè)置二級(jí)菜單 for (Permission first : firstMenus) { //根據(jù)一級(jí)菜單id 查詢 該菜單的二級(jí)菜單,如果出現(xiàn)不確定有幾級(jí)菜單 那么我們可以使用方法的遞歸調(diào)用 first.setChildren(findChildren(permissionList,first.getId())); } //TODO根據(jù)角色查詢?cè)摻巧哂械臋?quán)限id Map<String,Object> map=new HashMap<>(); //treeData為前端要接收的值 map.put("treeData",firstMenus); return new CommonResult(2000,"查詢成功",map); } //方法遞歸 public void getCheckKey(Permission p,List<String> list){ if(p.getChildren() == null || p.getChildren().size() == 0){ list.add(p.getId()); return; } List<Permission> children = p.getChildren(); for (Permission per : children){ getCheckKey(per, list); } }
2.3 結(jié)果展示
2.4 查對(duì)應(yīng)的權(quán)限菜單(使用中間表)
2.4.1 后端處理(權(quán)限回顯)
使用mybatis-plus生成中間表(rolePermission)
相對(duì)于之前添加了根據(jù)角色查詢?cè)摻巧哂械臋?quán)限id內(nèi)容
//調(diào)中間層 @Autowired private IRolePermissionService iRolePermissionService; //自寫樹(shù)結(jié)構(gòu)的獲取 @Override public CommonResult findPermessionByRoleId(String roleId) { //查詢所有的權(quán)限 QueryWrapper<Permission> wrapper=new QueryWrapper<>(); //邏輯刪除列考慮在內(nèi) 還有一個(gè)狀態(tài)列數(shù)據(jù)庫(kù)暫未考慮 wrapper.eq("is_deleted",0); List<Permission> permissionList = permissionMapper.selectList(wrapper); //設(shè)置層級(jí)關(guān)系 List<Permission> firstMenus=new ArrayList<>(); for (Permission first:permissionList) { //int if(first.getPid().equals("1")){ firstMenus.add(first); } } //為一級(jí)菜單設(shè)置二級(jí)菜單 for (Permission first : firstMenus) { //根據(jù)一級(jí)菜單id 查詢 該菜單的二級(jí)菜單,如果出現(xiàn)不確定有幾級(jí)菜單 那么我們可以使用方法的遞歸調(diào)用 first.setChildren(findChildren(permissionList,first.getId())); } //根據(jù)角色查詢?cè)摻巧哂械臋?quán)限id QueryWrapper<RolePermission> wrapper1=new QueryWrapper<>(); //根據(jù)角色id獲得權(quán)限 wrapper1.eq("role_id",roleId); List<RolePermission> list = iRolePermissionService.list(wrapper1); //由集合轉(zhuǎn)換為查詢permissionId List<String> collect = list.stream().map(item -> item.getPermissionId()).distinct().collect(Collectors.toList()); Map<String,Object> map=new HashMap<>(); //treeData為前端要接收的值 map.put("treeData",firstMenus); map.put("checkIds",collect); return new CommonResult(2000,"查詢成功",map); } //方法遞歸 public void getCheckKey(Permission p,List<String> list){ if(p.getChildren() == null || p.getChildren().size() == 0){ list.add(p.getId()); return; } List<Permission> children = p.getChildren(); for (Permission per : children){ getCheckKey(per, list); } }
2.4.2 前端處理
methods:{ //自寫權(quán)限點(diǎn)擊 permissionClick(row){ this.dialogPerVisible=true; this.$http.get("/system/permission/findPermessionByRoleId/"+row.id).then(result=>{ this.treeData=result.data.data.treeData; setTimeout(()=>{ result.data.data.checkIds.forEach(value=>{ this.$refs.rootTree.setChecked(value,true,false); }) },100) }) } }
點(diǎn)擊遮罩層的確定處理
<el-button type="primary" @click="confirmFen()">確 定</el-button>
添加角色id
點(diǎn)擊確定時(shí)
methods:{ //自寫權(quán)限遮罩層確定 confirmFen(){ //1.獲取全選和半選的樹(shù) 獲取對(duì)象 var checkedNodes = this.$refs.rootTree.getCheckedNodes(false,true); //console.log(checkedNodes) var ids=[]; checkedNodes.forEach(item=>{ ids.push(item.id); }) //console.log(ids) this.$http.post("/system/rolePermission/"+this.roleId,ids).then(result=>{ if(result.data.code===2000){ this.dialogPerVisible=false; this.$message.success("分配權(quán)限成功"); } }) } }
console.log打印的結(jié)果(第二處ids)
2.4.3 后端處理(確定修改權(quán)限)
controller層
//自寫權(quán)限樹(shù) @GetMapping("findPermessionByRoleId/{roleId}") public CommonResult findPermessionByRoleId(@PathVariable String roleId){ return iPermissionService.findPermessionByRoleId(roleId); }
serviceImpl層
@Override @Transactional//事務(wù) public CommonResult fen(String roleId, List<String> ids) { //刪除roleid對(duì)應(yīng)的權(quán)限 QueryWrapper<RolePermission> wrapper=new QueryWrapper<>(); wrapper.eq("role_id",roleId); this.remove(wrapper); //添加 List<RolePermission> collect = ids.stream().map(item -> new RolePermission(null, roleId, item, 0, LocalDateTime.now(), LocalDateTime.now())).collect(Collectors.toList()); this.saveBatch(collect); return new CommonResult(2000,"分配成功",null); }
實(shí)體類添加
啟動(dòng)類添加
到此這篇關(guān)于Java前后端分離之權(quán)限管理示例分析的文章就介紹到這了,更多相關(guān)Java權(quán)限管理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
eclipse如何忽略js文件報(bào)錯(cuò)(附圖)
eclipse中js文件報(bào)錯(cuò)的情況,或許大家早已習(xí)以為常了,那么有什么好的方法可以將其忽略掉呢?如果你也在尋找此問(wèn)題,那么本文或許可以幫助到你2013-10-10JS通過(guò)位運(yùn)算實(shí)現(xiàn)權(quán)限加解密
這篇文章主要介紹了JS通過(guò)位運(yùn)算實(shí)現(xiàn)權(quán)限加解密的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08js行號(hào)顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實(shí)現(xiàn)行號(hào)顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對(duì)應(yīng)代碼,感興趣的小伙伴們可以參考一下2015-10-10JavaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JavaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12JS實(shí)現(xiàn)控制表格單元格垂直對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格單元格垂直對(duì)齊的方法,涉及javascript操作表單元素樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03常見(jiàn)JS前端接口校驗(yàn)方式總結(jié)
作為一名優(yōu)秀的接口調(diào)用工程師,對(duì)接口的返回信息進(jìn)行校驗(yàn)是必不可少的,本文整理的是一些常用的校驗(yàn)方式,希望能夠?qū)Υ蠹矣兴鶐椭?/div> 2023-05-05最新評(píng)論