SpringBoot+layuimini实现左侧菜单动态展示

server/2024/12/23 2:30:11/

layuimini_0">layuimini左侧菜单动态显示

首先我们看一下layuimini的原有菜单显示格式

javascript">{"homeInfo": {"title": "首页","href": "page/welcome-2.html?t=2"},"logoInfo": {"title": "LAYUI MINI","image": "images/logo.png","href": ""},"menuInfo": [{"title": "系统管理","icon": "fa fa-address-book","href": "","target": "_self","child": [{"title": "权限管理","href": "","icon": "fa fa-home","target": "_self","child": [{"title": "账户信息管理","href": "page/account.html","icon": "fa fa-tachometer","target": "_self"},{"title": "主页二","href": "page/welcome-2.html","icon": "fa fa-tachometer","target": "_self"},{"title": "三","href": "page/welcome-3.html","icon": "fa fa-tachometer","target": "_self"}]}]}]
}

接下来是HTML显示页面

javascript">var options = {//后端动态生成的接口// iniUrl: "/auth/getResources",    // 初始化接口//原有的接口链接iniUrl:"api/init.json",clearUrl: "api/clear.json", // 缓存清理接口urlHashLocation: true,      // 是否打开hash定位bgColorDefault: false,      // 主题默认配置multiModule: false,          // 是否开启多模块menuChildOpen: false,       // 是否默认展开菜单loadingTime: 0,             // 初始化加载时间pageAnim: true,             // iframe窗口动画maxTabNum: 20,              // 最大的tab打开数量};miniAdmin.render(options);

这是layuimini给出的左侧菜单
在这里插入图片描述

接下来开始我们的改变,将静态菜单改为动态菜单

1.数据库准备,这里我们需要四张数据库表
在这里插入图片描述

  1. sys_role_resource
    在这里插入图片描述 在这里插入图片描述

2.sys_role

在这里插入图片描述
在这里插入图片描述
3.sys_user
在这里插入图片描述
在这里插入图片描述
4.sys_resource
在这里插入图片描述
在这里插入图片描述

后端代码块实现(后端主要需要的实现类就只要,资源和角色资源两个类即可)

1.ResourceEntity

java">package com.example.erp_project.entity;import lombok.Data;import java.util.List;/*** @author Lolo don‘t feel*/
@Data
public class ResourceEntity {//资源id编号private Integer resourceId;//资源名称private String title;//资源图标private String icon;//页面资源跳转链接private String href;//父级资源private Integer parentId;//排序private Integer  sort;//ztree会检查返回的数据中有没有 checked 属性 如果为true就会把这个节点设为选中状态private String checked;//子菜单,这里可以使用vo类来代替private List<ResourceEntity> child;}

2.RoleResourceEntity

java">package com.example.erp_project.entity;import lombok.Data;import java.util.List;/*** @author Lolo don‘t feel*/
@Data
public class RoleResourceEntity {//id编号private Integer roleResourceId;//权限idprivate Integer roleId;//资源idprivate Integer resourceId;}

3.loginConreoller
在这里插入图片描述

java">  /** 根据角色id获取对应的权限* */@GetMapping("/getResources")// 定义一个方法,用于获取资源信息public Map<String, Object> getResources(HttpSession session) {// 创建一个map对象,用于存储资源信息Map<String, Object> map = new HashMap<>();// 创建一个homeInfo对象,用于存储首页信息Map<String, Object> homeInfo = new HashMap<>();homeInfo.put("title", "首页");homeInfo.put("icon", "fa fa-home");homeInfo.put("href", "welcome");// 将homeInfo对象添加到map中map.put("homeInfo", homeInfo);// 创建一个logoInfo对象,用于存储logo信息Map<String, Object> logoInfo = new HashMap<>();logoInfo.put("title", "暖意ERP");logoInfo.put("image", "images/logo.png");logoInfo.put("href", "");// 将logoInfo对象添加到map中map.put("logoInfo", logoInfo);// 创建一个menuInfo列表,用于存储菜单信息List<Object> menuInfo = new ArrayList<>();// 获取当前登录人保存的getRoleId信息Integer roleId = (Integer) session.getAttribute("roleId");// 打印测试当前登陆的角色id是多少是否与数据库中id相对应。System.out.println(roleId);// 根据roleId查询后面对应的资源菜单List<ResourceEntity> resource = roleResourceService.getAllResourcesByRoleId(roleId);// 测试查询到的菜单System.out.println(resource);// 遍历资源列表,将资源添加到menuInfo中resource.forEach(t -> {menuInfo.add(t);System.out.println(t);});// 将menuInfo添加到map中map.put("menuInfo", menuInfo);// 返回map对象return map;}

4.建立service接口

java">//根据角色id查询资源数据List<ResourceEntity> getAllResourcesByRoleId(Integer roleId);

5.service实现类

java">import com.example.erp_project.entity.RoleResourceEntity;
import com.example.erp_project.mapper.RoleResourceMapper;
import com.example.erp_project.service.RoleResourceService;
import org.springframework.stereotype.Service;import java.util.*;/*** @author Lolo don‘t feel*/
@Service
public class RoleResourceServiceImpl implements RoleResourceService {// 定义一个私有的RoleResourceMapper对象,用于操作角色资源映射表private final RoleResourceMapper roleResourceMapper;// 构造函数,接收一个RoleResourceMapper对象作为参数,并将其赋值给当前对象的roleResourceMapper属性public RoleResourceServiceImpl(RoleResourceMapper roleResourceMapper) {this.roleResourceMapper = roleResourceMapper;}@Override// 获取指定角色ID的所有资源列表public List<ResourceEntity> getAllResourcesByRoleId(Integer roleId) {// 这里返回的resourceEntityList 没有实现排序// 以后 可以考虑下 返回 resourceEntityList之前 根据resource对象的sort进行排序// 那么左侧显示的菜单就可以排序了List<ResourceEntity> resourceEntityList = new ArrayList<>();// roleResourceEntity里面就是一个中间表 两个字段 roleId resourceId 关联起来List<RoleResourceEntity> roleResourceEntities = roleResourceMapper.selectRoleResourceByRoleId(roleId);System.out.println("impl输出测试目录"+roleResourceEntities);// 新建一个对象数组继续宁条件判断资源// 用for循环遍历,如果i=0且小于资源则菜单资源进行想相加在循环if (roleResourceEntities != null && roleResourceEntities.size() > 0) {List<ResourceEntity> noChildrenResourceEntities = new ArrayList<>();// 进行资源判断是否为空或者大于0for (int i = 0; i < roleResourceEntities.size(); i++) {// 获取roleResource(资源中间表)中的resourceId(资源id)ResourceEntity resourceEntity = roleResourceMapper.getResourceById(roleResourceEntities.get(i).getResourceId());// 就是根据这个登陆者的roleId 所拥有的资源取出来noChildrenResourceEntities.add(resourceEntity);}for (int i = 0; i < noChildrenResourceEntities.size(); i++) {if (noChildrenResourceEntities.get(i).getParentId() == 0) {// 说明这个菜单是一级菜单 没有上一级菜单// 如果这里不为0 表示这个菜单是二级菜单 或者三级菜单 ParentId对应了属于哪个上级菜ResourceEntity resourceEntity = new ResourceEntity();// 把这个一级菜单取出来resourceEntity = noChildrenResourceEntities.get(i);List<ResourceEntity> resourceEntities = new ArrayList<>();// for把所有菜单过一遍for (int j = 0; j < noChildrenResourceEntities.size(); j++){// 如果有菜单属于这个一级菜单if (Objects.equals(noChildrenResourceEntities.get(j).getParentId(), noChildrenResourceEntities.get(i).getResourceId())) {ResourceEntity resourceEntity2 = new ResourceEntity();// 取出这个二级菜单resourceEntity2 = noChildrenResourceEntities.get(j);resourceEntities.add(resourceEntity2);}}resourceEntity.setChild(resourceEntities);resourceEntityList.add(resourceEntity);}}}// 下面是根据资源的sort进行排序 升序排列 这样左侧菜单就会按照升序排列Collections.sort(resourceEntityList, new Comparator<ResourceEntity>() {@Overridepublic int compare(ResourceEntity o1, ResourceEntity o2) {return o1.getSort().compareTo(o2.getSort());}});return resourceEntityList;}}

6.mapper接口

java">public interface RoleResourceMapper {List<RoleResourceEntity> selectRoleResourceByRoleId(Integer roleId);}

7.mybatis

 <select id="selectRoleResourceByRoleId" resultType="com.example.erp_project.entity.RoleResourceEntity">select *from sys_role_resourcewhere roleId = #{roleId}</select>

8.前端页面代码修改
在这里插入图片描述
9.效果图
在这里插入图片描述
OK代码到这里就结束了,希望对有需要的码友有帮助,如果文章中有任何语义解释错误的地方还请各位海涵!!欢迎大佬批评指正


http://www.ppmy.cn/server/23658.html

相关文章

Linux基本指令(3)

目录 时间相关的指令&#xff1a; 1.在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加好后接数个标记&#xff0c;其中常用的标记列表如下&#xff1a; 2.在设定时间方面&#xff1a; 3.时间戳&#xff1a; Cal指令&#xff1a; find指令&a…

解决Jmeter 4.x 请求到elasticsearch 中文乱码的问题

文章目录 前言解决Jmeter 4.x 请求到elasticsearch 中文乱码的问题 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#…

Linux提权--SUID提权内核漏洞本地用户提权

免责声明:本文仅做技术交流与学习,请不要乱搞破坏... 目录 SUID提权 漏洞成因 提权过程: 手工命令探针: 参考利用&#xff1a; 脚本探针: LinEnum.sh traitor linuxprivchecker等等... Linux命令的利用: find命令 利用nc反弹 利用python反弹--棱角 内核漏洞本地用…

【JAVA基础之IO】字节流、字符流以及乱码问题

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 1. IO概述 1.1 什么是IO 1.2 IO的分类 1.3 字节和字符流的顶级父类 2. 字节流 2.1 一切皆为字节 2.2 字节输出流【OutputStream】 2.3 FileOutputStream类…

慢SQL问题全解析:原因诊断与性能优化策略

慢SQL的定义&#xff1a; 执行时间长的 慢SQL的筛选&#xff1a; 1.使用MySQL自带的日志 查看慢查询日志是否开启&#xff1a; SHOW VARIABLES LIKE %slow_query_log%; 开启慢查询日志&#xff1a;使用该方法开启MySQL的慢查询日志只对当前数据库生效&#xff0c;如果MySQ…

为什么 GPU 适用于 AI 卷积计算 cnn GPU 线程分级 计算强度 FP32 和 FP64

为什么 GPU 适用于 AI 为什么 GPU 适用于 AI 计算或者为什么 AI 训练需要使用 GPU,而不是使用 CPU 呢?本节内容主要探究 GPU AI 编程的本质,首先回顾卷积计算是如何实现的,然后探究 GPU 的线程分级,分析 AI 的计算模式和线程之间的关系,最后讨论矩阵乘计算如何使用 GPU …

react报错:Warning: Each child in a list should have a unique “key“ prop.

我是万万没想到的&#xff0c;使用Popconfirm不添加key属性也会报错&#xff1a; react-refresh:160Warning: Each child in a list should have a unique "key" prop. Check the render method of Cell. Seehttps://reactjs.org/link/warning-keys for more informa…

uniapp H5实现签名

第一种&#xff1a;跳转签名页面 1、创建审核页面audit.vue <template><view><uni-section title""><view class"auditClass"><uni-forms :model"baseFormData" ref"baseFormRef" :rules"rules&quo…