当前位置: 首页 > news >正文

RBAC三级树状菜单实现(从前端到后端)未完待续

1、表格设计

RBAC 

2、前端路由

根据不同的用户id显示不同的菜单。

根据路由 

3、多级菜单 

展示所有权限,并且根据当前用户id展示它所属的角色的所有菜单。

前端树状展示

思路:

后端:传给前端map,map里1个是所有菜单,1个是它有的菜单。

前端代码:

树形图:

 <div v-if="menuData.length > 0"><el-treeref="tree":data="menuData"show-checkbox:default-checked-keys="getMenuByRoleId"node-key="id"default-expand-all@check-change="handleCheckChange":props="defaultProps"></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 List<MenuVO> queryMenuByUserId() {String userId = Application.getUserId();//根据用户查角色,查角色拥有的所有菜单List<Menu> menus = menuMapper.queryMenyByUserId(userId);//把子菜单弄给父菜单List<MenuVO> menuVOList = new ArrayList<>();for (Menu menu : menus) {MenuVO menuVO = new MenuVO();BeanUtils.copyProperties(menu,menuVO);menuVOList.add(menuVO);}//针对List<MenuVO>,先过滤一遍,留下有父id 的菜单List<MenuVO> 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 List<MenuVO> getMenus(List<MenuVO> list, MenuVO menu) {List<MenuVO> 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;}

相关文章:

RBAC三级树状菜单实现(从前端到后端)未完待续

1、表格设计 RBAC 2、前端路由 根据不同的用户id显示不同的菜单。 根据路由 3、多级菜单 展示所有权限&#xff0c;并且根据当前用户id展示它所属的角色的所有菜单。 前端树状展示 思路&#xff1a; 后端&#xff1a;传给前端map&#xff0c;map里1个是所有菜单&am…...

牛客网Verilog刷题——VL41

牛客网Verilog刷题——VL41 题目答案 题目 请设计一个可以实现任意小数分频的时钟分频器&#xff0c;比如说8.7分频的时钟信号&#xff0c;注意rst为低电平复位。提示&#xff1a;其实本质上是一个简单的数学问题&#xff0c;即如何使用最小公倍数得到时钟周期的分别频比。设小…...

大整数截取解决方法(java代码)

大整数截取解决方法&#xff08;java代码&#xff09; 描述输入描述输出描述输入示例输出示例前置知识&#xff1a;代码 解题思路来自这个博客&#xff1a;简单^不简单 https://blog.csdn.net/younger_china/article/details/126376374 描述 花花有一个很珍贵的数字串&#xf…...

Spring Boot使用@Async实现异步调用:自定义线程池

一、定义线程池 第一步&#xff0c;先在Spring Boot主类中定义一个线程池&#xff0c;比如&#xff1a; SpringBootApplication public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}EnableAsyncConfigurat…...

GFS 分布式文件系统

目录 一、GlusterFS 概述 1.2&#xff0e;GlusterFS特点 1.3&#xff0e;GlusterFS 术语 1.4GlusterFS 的工作流程 二、GlusterFS的卷类型 2.1分布式卷&#xff08;Distribute volume&#xff09; 2.1.1特点 2.2条带卷&#xff08;Stripe volume&#xff09; 2.2.1条…...

PHP-mysql学习笔记

如题 记录发送emoji数据无法正常显示的问题PHPMysql 记录 发送emoji数据无法正常显示的问题 问题描述 前端发送关于emoji的表情数据给php,php写入mysql php接收到了数据,但无法写入写入过后返回前端无法正常显示 PHP 在对应的pdd函数中设置字符集为utf8mb4 Mysql emoji数…...

AI技术快讯:清华开源ChatGLM2双语对话语言模型

ChatGLM2-6B是一个开源项目&#xff0c;提供了ChatGLM2-6B模型的代码和资源。根据提供的搜索结果&#xff0c;以下是对该项目的介绍&#xff1a; 论文&#xff1a;https://arxiv.org/pdf/2103.10360.pdf ChatGLM2-6B是一个开源的双语对话语言模型&#xff0c;是ChatGLM-6B模…...

网络基础知识

1、什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2、OSI 参考模型的层次是什么? 有 7 个 OSI 层&#xff1a;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;会话层&#xff0c;表…...

【应用层】HTTPS协议详细介绍

文章目录 前言一、什么是"加密"二、常见的加密方式三、数据摘要&#xff08;数据指纹&#xff09;四、证书总结 前言 HTTPS也是一个应用层协议&#xff0c;是在HTTP协议的基础上引入了一个加密层&#xff0c;由于HTTP协议内容都是按照文本的方式明文传输的&#xff…...

【Tensorboard+Pytorch】使用注意事项

安装 tensorboard/tensorboardx版本需要与tensorflow保持一致&#xff08;本人使用2.2&#xff09; 调用 环境变量 在终端或CMD中使用时&#xff0c;常见报错“tensorboard 不是内部或外部命令……”&#xff0c;需要添加环境变量路径path。具体为tensorboard.exe所在目录(A…...

设计模式行为型——命令模式

目录 什么是命令模式 命令模式的实现 命令模式角色 命令模式类图 命令模式举例 命令模式代码实现 命令模式的特点 优点 缺点 使用场景 注意事项 什么是命令模式 命令模式&#xff08;Command Pattern&#xff09;是一种数据驱动的设计模式&#xff0c;它属…...

13-2_Qt 5.9 C++开发指南_线程同步_QMutex+QMutexLocker(目前较为常用)

文章目录 1.线程同步的概念2. 基于互斥量的线程同步3.QMutex实现线程同步源代码3.1 qdicethread.h3.2 qdicethread.cpp3.3 dialog.h3.4 dialog.cpp 4.QMutexLocker 实现线程同步源代码4.1 qdicethread.h4.2 qdicethread.cpp4.3 dialog.h4.4 dialog.cpp 1.线程同步的概念 在多线…...

金融行业选择哪种SSL证书才安全可靠

由于金融领域等网站拥有大量客户的敏感信息&#xff0c;且每天都有大量交易需要进行&#xff0c;涉及到大量的资金问题&#xff0c;当这些机构提供的网络和Web应用程序没有足够的安全措施来阻止黑客窃取数据时&#xff0c;就会出现严重的安全问题。而且由于黑客每天都在开发越来…...

面试总结(三)

1.进程和线程的区别 根本区别&#xff1a;进程是操作系统分配资源的最小单位&#xff1b;线程是CPU调度的最小单位所属关系&#xff1a;一个进程包含了多个线程&#xff0c;至少拥有一个主线程&#xff1b;线程所属于进程开销不同&#xff1a;进程的创建&#xff0c;销毁&…...

青大数据结构【2016】

一、单选 二、简答 3.简述遍历二叉树的含义及常见的方法。 4.简要说明图的邻接表的构成。 按顺序将图G中的顶点数据存储在一维数组中&#xff0c; 每一个顶点vi分别建立一个单链表&#xff0c;单链表关联依附顶点vi的边&#xff08;有向图为以vi为尾的弧&#xff09;。 邻接…...

聊聊拉长LLaMA的一些经验

Sequence Length是指LLM能够处理的文本的最大长度&#xff0c;越长&#xff0c;自然越有优势&#xff1a; 更强的记忆性。更多轮的历史对话被拼接到对话中&#xff0c;减少出现遗忘现象 长文本场景下体验更佳。比如文档问答、小说续写等 当今开源LLM中的当红炸子鸡——LLaMA…...

线程池的使用详解

一 使用线程池的好处 池化技术相比大家已经屡见不鲜了&#xff0c;线程池、数据库连接池、Http 连接池等等都是对这个思想的应用。池化技术的思想主要是为了减少每次获取资源的消耗&#xff0c;提高对资源的利用率。 线程池提供了一种限制和管理资源&#xff08;包括执行一个任…...

刷题笔记 day4

力扣 611 有效三角形的个数 首先需要知道如何判断 三个数是否能构成三角形。 假如 存在三个数 a < b < c&#xff0c;如果要构成三角形&#xff0c;需要满足&#xff1a; ab > c ; a c > b ; b c > a ; 任意两个数大于第三个数就可构成三角形。 其实不难…...

Python 2.x 中如何使用flask模块进行Web开发

Python 2.x 中如何使用 Flask 模块进行 Web 开发 引言: 随着互联网的快速发展&#xff0c;Web开发成为了互联网行业中一项非常重要的技术。而在 Python 的Web开发中&#xff0c;Flask框架是一种非常流行的选择。它简单轻巧&#xff0c;灵活易用&#xff0c;适合中小型项目的快…...

spring websocket 调用受权限保护的方法失败

版本 spring-security 5.6.10 spring-websocket 5.3.27 现象 通过AbstractWebSocketHandler实现websocket端点处理器 调用使用PreAuthorize注解的方法报错&#xff0c;无法在SecurityContext中找到认证信息 org.springframework.security.authentication.AuthenticationCred…...

PyTorch 2.8镜像一文详解:CUDA 12.4兼容性、cuDNN版本匹配与驱动升级要点

PyTorch 2.8镜像一文详解&#xff1a;CUDA 12.4兼容性、cuDNN版本匹配与驱动升级要点 1. 镜像概述与核心特性 PyTorch 2.8深度学习镜像是一个专为高性能计算设计的优化环境&#xff0c;基于RTX 4090D 24GB显卡和CUDA 12.4深度调优。这个镜像解决了深度学习开发者经常遇到的环…...

GitHub Desktop中文汉化工具:让Git操作变得像聊天一样简单

GitHub Desktop中文汉化工具&#xff1a;让Git操作变得像聊天一样简单 【免费下载链接】GitHubDesktop2Chinese GithubDesktop语言本地化(汉化)工具 项目地址: https://gitcode.com/gh_mirrors/gi/GitHubDesktop2Chinese 还在为GitHub Desktop满屏的英文而头疼吗&#x…...

Tailscale打洞失败太慢?手把手教你用Docker部署derper自建中转,告别国际绕行

Tailscale网络优化实战&#xff1a;用Docker自建derper中转节点提升连接速度 Tailscale作为现代零配置组网工具&#xff0c;其基于WireGuard协议的P2P直连特性确实令人惊艳——直到你发现两台设备之间的打洞成功率只有60%&#xff0c;而剩余40%的流量不得不绕行官方位于海外的中…...

多模态扩展实验:OpenClaw+Qwen3-32B处理图片描述生成

多模态扩展实验&#xff1a;OpenClawQwen3-32B处理图片描述生成 1. 实验背景与动机 最近在探索如何将OpenClaw的自动化能力扩展到视觉领域。作为一个长期依赖文本交互的框架&#xff0c;OpenClaw能否结合多模态大模型处理图像任务&#xff1f;这引发了我的兴趣。恰好手头有台…...

人血小板裂解液(hPL)与细胞治疗生产工具解析:Sexton产品应用综述【曼博生物官方代理Sexton】

摘要&#xff1a;人血小板裂解液&#xff08;hPL&#xff09;作为无动物源培养补充剂&#xff0c;正在逐步替代FBS应用于细胞与基因治疗&#xff08;CGT&#xff09;领域。本文结合相关产品体系&#xff0c;对hPL及细胞冻存与灌装系统进行系统梳理。 关键词&#xff1a;人血小板…...

LaTeX排版踩坑记:用了soul包高亮,为什么一加\cite就报错?

LaTeX排版进阶&#xff1a;soul包高亮冲突的底层原理与系统化解决方案 当你正在用LaTeX优雅地排版论文&#xff0c;突然在引用文献时遭遇神秘的报错——这种体验就像穿着正装踩到香蕉皮。soul包作为文本装饰的瑞士军刀&#xff0c;其高亮和删除线功能深受喜爱&#xff0c;但一旦…...

2026权威评测:毕业论文AIGC降重盘点!免费试用首选

【CSDN极客特稿AI科研生产力专栏】 各位深夜还在实验室和IDE里跑模型、改Paper的硕博兄弟们&#xff0c;见字如面。 把日历翻到2026年&#xff0c;当大语言模型&#xff08;LLM&#xff09;的参数量卷上天际的同时&#xff0c;各大高校的“反作弊探测矩阵”也完成了史诗级的底层…...

S2-Pro提示词(Prompt)工程入门:从零到一掌握高效对话技巧

S2-Pro提示词&#xff08;Prompt&#xff09;工程入门&#xff1a;从零到一掌握高效对话技巧 1. 为什么需要学习提示词工程 你可能已经发现&#xff0c;同样的AI模型&#xff0c;在不同人手里表现天差地别。有人能让它写出专业报告&#xff0c;有人却只能得到敷衍的回复。这中…...

一篇搞定2026年律所管理系统选购,避坑技巧+优质品牌全解析

据智研咨询2026年发布的《中国律所管理软件行业发展报告》显示&#xff0c;国内律所对管理系统的需求年增长率达28%&#xff0c;但近70%的律所表示选型后存在功能冗余、操作复杂、适配性差等问题&#xff0c;不仅未能提升效率&#xff0c;反而增加了办公成本。作为深耕律所管理…...

YOLOv5实战:如何用Inner-IoU提升小目标检测效果(附完整代码)

YOLOv5实战&#xff1a;用Inner-IoU解决小目标检测痛点的工程指南 无人机镜头下的蚂蚁、CT扫描中的微小结节、卫星图像里的车辆——当目标尺寸小于3232像素时&#xff0c;传统检测器的性能往往会断崖式下跌。我们团队在医疗影像分析项目中就曾遇到这样的困境&#xff1a;常规Io…...