虚拟主机控制面板怎么建设网站,网站策划案内容,网站反链增加,深圳住建局工程交易中心1、表格设计
RBAC
2、前端路由
根据不同的用户id显示不同的菜单。
根据路由
3、多级菜单
展示所有权限#xff0c;并且根据当前用户id展示它所属的角色的所有菜单。
前端树状展示
思路#xff1a;
后端#xff1a;传给前端map#xff0c;map里1个是所有菜单并且根据当前用户id展示它所属的角色的所有菜单。
前端树状展示
思路
后端传给前端mapmap里1个是所有菜单1个是它有的菜单。 前端代码
树形图 div v-ifmenuData.length 0el-treereftree:datamenuDatashow-checkbox:default-checked-keysgetMenuByRoleIdnode-keyiddefault-expand-allcheck-changehandleCheckChange:propsdefaultProps/el-tree
/div data区域 data() {return {roleOptions: [], //角色分类selectedRole: 2, // 选中的角色分类menuData: [], //根据角色分类查所有的菜单selectedPermissions: [], // 选中的权限defaultProps: {children: childrenList,label: name,},getMenuByRoleId: [],};},
method: methods: {//选的所有的权限handleCheckChange() {const checkedKeys this.$refs.tree.getCheckedKeys();console.log(已勾选的节点, checkedKeys);},savePermissions() {// 执行保存权限的逻辑可以将选中的权限发送到后端进行处理console.log(this.selectedPermissions);// 发送请求或者执行其他操作...},handleRoleChange() {// 角色分类变化时清空选中的权限this.findAllRole();this.selectedPermissions [];},findAllRole() {console.log(this.selectedRole);this.$axios.get(/api/pc-zdy-sys/role?roleId this.selectedRole).then((res) {if (res.data.code 200) {this.menuData res.data.data.allMenu; //所有菜单数组const roleList res.data.data.getMenuByRoleId; // 角色拥有的菜单对象数组this.getMenuByRoleId roleList.map((e) e.id); //变成菜单id}});},findRoleType() {this.$axios.get(/api/pc-zdy-sys/role/roleType).then((res) {if (res.data.code 200) {this.roleOptions res.data.data;}});},},created() {this.findRoleType();this.findAllRole();}, 4、菜单递归处理
4.1 父菜单找子菜单 public ListMenuVO queryMenuByUserId() {String userId Application.getUserId();//根据用户查角色查角色拥有的所有菜单ListMenu menus menuMapper.queryMenyByUserId(userId);//把子菜单弄给父菜单ListMenuVO menuVOList new ArrayList();for (Menu menu : menus) {MenuVO menuVO new MenuVO();BeanUtils.copyProperties(menu,menuVO);menuVOList.add(menuVO);}//针对ListMenuVO先过滤一遍留下有父id 的菜单ListMenuVO collect menuVOList.stream().filter(menu - menu.getParentId() null)//有父id的菜单 放到对应的id的菜单下.map(menu - {menu.setChildrenList(getMenus(menuVOList, menu));return menu;}).collect(Collectors.toList());return collect;}
4.2 为子菜单找子菜单
private ListMenuVO getMenus(ListMenuVO list, MenuVO menu) {ListMenuVO menuVOList new ArrayList();for (MenuVO son : list) {// 判断 son 的 parentId 是否等于传入的一级菜单的 idif (son.getParentId() ! null son.getParentId().equals(menu.getId())) {if (son.getChildrenList() null) {son.setChildrenList(new ArrayList());}// 为子菜单找孙菜单son.setChildrenList(getMenus(list, son));menuVOList.add(son);}}return menuVOList;}
