SpringBoot+layuimini實現(xiàn)左側(cè)菜單動態(tài)展示的示例代碼

更新時間：2024年04月23日 11:43:48 作者：洛洛不覺

Layuimini是Layui的升級版,它是專業(yè)做后臺頁面的框架,而且是適合PC端和移動端,以下地址可以在PC端顯示,也可以在手機(jī)上顯示,只不過會做自適應(yīng),本文將給大家介紹了SpringBoot+layuimini實現(xiàn)左側(cè)菜單動態(tài)展示的方法,需要的朋友可以參考下

layuimini左側(cè)菜單動態(tài)顯示

首先我們看一下layuimini的原有菜單顯示格式

{
  "homeInfo": {
    "title": "首頁",
    "href": "page/welcome-2.html?t=2"
  },
  "logoInfo": {
    "title": "LAYUI MINI",
    "image": "images/logo.png",
    "href": ""
  },
  "menuInfo": [
    {
      "title": "系統(tǒng)管理",
      "icon": "fa fa-address-book",
      "href": "",
      "target": "_self",
      "child": [
        {
          "title": "權(quán)限管理",
          "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顯示頁面

var options = {
            //后端動態(tài)生成的接口
            // iniUrl: "/auth/getResources",    // 初始化接口
            //原有的接口鏈接
            iniUrl:"api/init.json",
            clearUrl: "api/clear.json", // 緩存清理接口
            urlHashLocation: true,      // 是否打開hash定位
            bgColorDefault: false,      // 主題默認(rèn)配置
            multiModule: false,          // 是否開啟多模塊
            menuChildOpen: false,       // 是否默認(rèn)展開菜單
            loadingTime: 0,             // 初始化加載時間
            pageAnim: true,             // iframe窗口動畫
            maxTabNum: 20,              // 最大的tab打開數(shù)量
        };
        miniAdmin.render(options);

這是layuimini給出的左側(cè)菜單

在這里插入圖片描述

接下來開始我們的改變，將靜態(tài)菜單改為動態(tài)菜單

1.數(shù)據(jù)庫準(zhǔn)備，這里我們需要四張數(shù)據(jù)庫表

在這里插入圖片描述

sys_role_resource

在這里插入圖片描述

2.sys_role

在這里插入圖片描述

3.sys_user

在這里插入圖片描述

4.sys_resource

在這里插入圖片描述

后端代碼塊實現(xiàn)（后端主要需要的實現(xiàn)類就只要，資源和角色資源兩個類即可）

1.ResourceEntity

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;
    //資源圖標(biāo)
    private String icon;
    //頁面資源跳轉(zhuǎn)鏈接
    private String href;
    //父級資源
    private Integer parentId;
    //排序
    private Integer  sort;
    //ztree會檢查返回的數(shù)據(jù)中有沒有 checked 屬性 如果為true就會把這個節(jié)點設(shè)為選中狀態(tài)
    private String checked;
    //子菜單，這里可以使用vo類來代替
    private List<ResourceEntity> child;

}

2.RoleResourceEntity

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;
    //權(quán)限id
    private Integer roleId;
    //資源id
    private Integer resourceId;

}

3.loginConreoller

在這里插入圖片描述

  /*
    * 根據(jù)角色id獲取對應(yīng)的權(quán)限
    * */
    @GetMapping("/getResources")
    // 定義一個方法，用于獲取資源信息
    public Map<String, Object> getResources(HttpSession session) {
        // 創(chuàng)建一個map對象，用于存儲資源信息
        Map<String, Object> map = new HashMap<>();
        // 創(chuàng)建一個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);
        // 創(chuàng)建一個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);
        // 創(chuàng)建一個menuInfo列表，用于存儲菜單信息
        List<Object> menuInfo = new ArrayList<>();
        // 獲取當(dāng)前登錄人保存的getRoleId信息
        Integer roleId = (Integer) session.getAttribute("roleId");
        // 打印測試當(dāng)前登陸的角色id是多少是否與數(shù)據(jù)庫中id相對應(yīng)。
        System.out.println(roleId);
        // 根據(jù)roleId查詢后面對應(yīng)的資源菜單
        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接口

//根據(jù)角色id查詢資源數(shù)據(jù)
  List<ResourceEntity> getAllResourcesByRoleId(Integer roleId);

5.service實現(xiàn)類

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;

    // 構(gòu)造函數(shù)，接收一個RoleResourceMapper對象作為參數(shù)，并將其賦值給當(dāng)前對象的roleResourceMapper屬性
    public RoleResourceServiceImpl(RoleResourceMapper roleResourceMapper) {
        this.roleResourceMapper = roleResourceMapper;
    }


    @Override
    // 獲取指定角色I(xiàn)D的所有資源列表
    public List<ResourceEntity> getAllResourcesByRoleId(Integer roleId) {
        // 這里返回的resourceEntityList 沒有實現(xiàn)排序
        // 以后 可以考慮下 返回 resourceEntityList之前 根據(jù)resource對象的sort進(jìn)行排序
        // 那么左側(cè)顯示的菜單就可以排序了
        List<ResourceEntity> resourceEntityList = new ArrayList<>();
        // roleResourceEntity里面就是一個中間表 兩個字段 roleId resourceId 關(guān)聯(lián)起來
        List<RoleResourceEntity> roleResourceEntities = roleResourceMapper.selectRoleResourceByRoleId(roleId);
        System.out.println("impl輸出測試目錄"+roleResourceEntities);
        // 新建一個對象數(shù)組繼續(xù)寧條件判斷資源
        // 用for循環(huán)遍歷，如果i=0且小于資源則菜單資源進(jìn)行想相加在循環(huán)
        if (roleResourceEntities != null && roleResourceEntities.size() > 0) {
            List<ResourceEntity> noChildrenResourceEntities = new ArrayList<>();
            // 進(jìn)行資源判斷是否為空或者大于0
            for (int i = 0; i < roleResourceEntities.size(); i++) {
                // 獲取roleResource(資源中間表)中的resourceId(資源id)
                ResourceEntity resourceEntity = roleResourceMapper.getResourceById(roleResourceEntities.get(i).getResourceId());
                // 就是根據(jù)這個登陸者的roleId 所擁有的資源取出來
                noChildrenResourceEntities.add(resourceEntity);
            }
            for (int i = 0; i < noChildrenResourceEntities.size(); i++) {
                if (noChildrenResourceEntities.get(i).getParentId() == 0) {
                    // 說明這個菜單是一級菜單 沒有上一級菜單
                    // 如果這里不為0 表示這個菜單是二級菜單 或者三級菜單 ParentId對應(yīng)了屬于哪個上級菜
                    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);
                }
            }
        }
        // 下面是根據(jù)資源的sort進(jìn)行排序 升序排列 這樣左側(cè)菜單就會按照升序排列
        Collections.sort(resourceEntityList, new Comparator<ResourceEntity>() {
            @Override
            public int compare(ResourceEntity o1, ResourceEntity o2) {
                return o1.getSort().compareTo(o2.getSort());
            }
        });
        return resourceEntityList;
    }


}

6.mapper接口

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

7.mybatis

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

8.前端頁面代碼修改

在這里插入圖片描述