精选文章 Layui动态加载菜单

Layui动态加载菜单

作者:aa821198112 时间: 2020-08-04 05:51:01
aa821198112 2020-08-04 05:51:01

话不多说,直接代码:

1、数据准备

动态加载菜单,肯定要先从数据库获取到菜单才行。

实体类:

public class Resource {
    //主键id
    private Integer id;
    //标题
    private String title;
    //头像
    private String icon;
    //地址
    private String href;
    //描述
    private String description;
    //父节点
    private Integer pId;

    private String seq;
    //状态 0正常  1删除
    private Byte status;

    private Byte spread;
    //类型  0菜单 1页面 2按钮
    private Byte resourceType;

    @TableField(exist = false)
    private List children;
}
工具类TreeBuilder(转换成树形格式):
public class TreeBuilder {
    public static List bulid(List resources) {

        List trees = new ArrayList<>();

        for (Resource resource : resources) {

            if (resource.getpId()==0) {
                trees.add(resource);
            }

            for (Resource it : resources) {
                if (it.getpId() == resource.getId().intValue()) {
                    if (resource.getChildren() == null) {
                        resource.setChildren(new ArrayList<>());
                    }
                    resource.getChildren().add(it);
                }
            }
        }
        return trees;
    }

}

controller:

 @GetMapping("/menuInfo.json")
    @ApiOperation("获取资源接口")
    @ResponseBody
    public Result getResource(){
        //直接查询所有的菜单
        List resourceList = resourceService.getMenuInfo();
        if (resourceList!=null&&resourceList.size()>0){
            //通过工具类转成树形格式
            List tree = TreeBuilder.bulid(resourceList);
            return Result.success("获取成功!",tree);
        }
        return Result.fail("数据异常");
    }

通过swagger测试接口获取的数据:

{
  "status": 0,
  "message": "获取成功!",
  "data": [
    {
      "id": 1,
      "title": "主页",
      "icon": null,
      "href": "",
      "description": "主页",
      "pId": 0,
      "seq": "0",
      "status": 0,
      "spread": 0,
      "resourceType": 0,
      "children": [
        {
          "id": 2,
          "title": "控制台",
          "icon": null,
          "href": "/console.html",
          "description": "控制台",
          "pId": 1,
          "seq": "0",
          "status": 0,
          "spread": 0,
          "resourceType": 1,
          "children": null
        }
      ]
    },
    {
      "id": 3,
      "title": "页面",
      "icon": null,
      "href": "",
      "description": "页面",
      "pId": 0,
      "seq": "0",
      "status": 0,
      "spread": 0,
      "resourceType": 0,
      "children": [
        {
          "id": 4,
          "title": "表单",
          "icon": null,
          "href": "/form.html",
          "description": "表单",
          "pId": 3,
          "seq": "0",
          "status": 0,
          "spread": 0,
          "resourceType": 1,
          "children": null
        }
      ]
    },
    {
      "id": 5,
      "title": "用户",
      "icon": null,
      "href": "",
      "description": "用户",
      "pId": 0,
      "seq": "0",
      "status": 0,
      "spread": 0,
      "resourceType": 0,
      "children": [
        {
          "id": 6,
          "title": "用户组",
          "icon": null,
          "href": "/user.html",
          "description": "用户组",
          "pId": 5,
          "seq": "0",
          "status": 0,
          "spread": 0,
          "resourceType": 1,
          "children": null
        },
        {
          "id": 7,
          "title": "权限配置",
          "icon": null,
          "href": "/operaterule.html",
          "description": "权限配置",
          "pId": 5,
          "seq": "0",
          "status": 0,
          "spread": 0,
          "resourceType": 1,
          "children": null
        }
      ]
    },
    {
      "id": 8,
      "title": "系统设置",
      "icon": null,
      "href": null,
      "description": "系统设置",
      "pId": 0,
      "seq": "0",
      "status": 0,
      "spread": 0,
      "resourceType": 0,
      "children": [
        {
          "id": 9,
          "title": "资源配置",
          "icon": null,
          "href": "/resources.html",
          "description": "资源配置",
          "pId": 8,
          "seq": "0",
          "status": 0,
          "spread": 0,
          "resourceType": 1,
          "children": null
        }
      ]
    }
  ]
}

2、前端渲染


HTML:

Layui动态加载菜单1

Admin Pro

      js部分:

      3、最终效果

      Layui动态加载菜单2

       

      源码地址:https://github.com/MemoryLL/demo(springboot+layui+freemarker+swagger实现管理后台模板,持续更新中...........如果有时间会加上shiro,因为本人不是前端开发,写前端以及调试实在是有点吃力。写的的不好请谅解。)

      勿删,copyright占位
      分享文章到微博
      分享文章到朋友圈

      上一篇:【SQL】 关于join on and 查询

      下一篇:Relocating a PDB

      您可能感兴趣

      • 抢滩直播基地:有人黯然退场,有人闪亮进场,还有人只当跳板

        图片来源于网络 文|陈小江 来源 | 螳螂财经(ID:TanglangFin) 一支穿云箭,千军万马来相见;两副忠义胆,刀山火海提命现。 当年因星爷《功夫》爆红网络的经典台词,正成为如今火爆天际的直播经济的真实写照。 受疫情影响,众多城市和平台纷纷加码直播电商,各路英雄齐聚直播带货——明星、企业家、政府官员、学者、网红和草根接连登场,全民直播迅速燎原。正是众人拾柴,将直播经济这把火越烧越旺。...

      • 基于 QGIS 在内网中离线加载卫星地图的方法

        1. 概述 我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载。 另外,也为大家分享过在二维开源平台离线加载卫星影像的方法,主要包括基于OpenLayers的内网WebGIS离线部署、基于MapBox的内网WebGIS离线部署和基于 GoogleMap 离线 API ...

      • 《深入浅出玩转FPGA》笔记

        关于这本书,算是囫囵吞枣地读完了。网上很多人推荐这本书,评价很不错。以我的观点来看,确实是本不错的关于FPGA方面的书,作者确实经验丰富,书中有很多值得学习的东西,但是可能不是很适合初学者看,比较适合有一定项目经验的人读。因为这本书本身就是将作者许多自己的亲身经历总结出来的经验编纂出来的,可能作者也是看烦了市面上一众读物都秉持着介绍某类知识一定要事无巨细地从头说到尾的风格,所以作者对基础的介...

      • 计算机必备专用英语词汇

        非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

      • SQL Server Management Studio 17.4中的新增功能; Always On AG仪表板增强功能及更多

        As all other database engines that require a GUI too to interact with, Microsoft built SQL Server Management Studio as a tool that provides an environment to manage, configure, monitor and administ...

      • 安装SQL Server 2016

        介绍 (Introduction) Microsoft SQL Server 2016 provides faster transactions and queries, deeper insights on any device, advanced analytics, new security technology, and new hybrid cloud scenarios. Alo...

      • ROS系列:七、熟练使用rviz

        7.熟练使用rviz (1)rviz整体界面 rviz是ROS自带的图形化工具,可以很方便的让用户通过图形界面开发调试ROS。操作界面也十分简洁,如图29,界面主要分为上侧菜单区、左侧显示内容设置区、中间显示区、右侧显示视角设置区、下侧ROS状态区。 (2)添加显示内容 如图30,启动rviz界面后,首先要对Global Options进行设置,Global Options里面的参数是一些全...

      • Virtual Studio2017下编译Openssl静态库

        1,去openssl官网:https://www.openssl.org 下载最新版源码 2,安装Perl(编译过程中会用到它)官网:http://strawberryperl.com/,安装完成把类似C:\Strawberry\perl\bin这个的路径加入到环境变量PATH中 3,安装NASM(编译过程中会用到它)官网:https://www.nasm.us,安装完成把类似D:\Prog...

      华为云40多款云服务产品0元试用活动

      免费套餐,马上领取!
      CSDN

      CSDN

      中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。