Vue+Element UI+Spring Boot+MyBatis+MySQL实现动态多级菜单

已于 2022-04-04 13:59:51 修改
阅读量2k 收藏 13
点赞数
文章标签： vue spring boot javascript elementui database
于 2022-04-04 13:51:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daiyi666/article/details/123950901
版权

Vue+Spring Boot+MySQL实现动态多级菜单

通常在后台管理系统中，需要根据每个用户不同的权限来动态展示菜单；本文主要记录通过Vue+Element UI+Spring Boot+MyBatis+MySQL实现一个动态多级菜单的功能

开发环境

名称版本号
JDK1.8.0_291
IntelliJ IDEA2021.3.2
WebStorm2021.3.2
DataGrip2021.3.4
MySQL8.0.25
Spring Boot2.6.4
mybatis2.2.2
Vue2.6.14
Element UI2.15.6

数据库

创建数据库表

CREATE TABLE `menu` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL COMMENT 'menu name',
  `icon` varchar(255) DEFAULT NULL COMMENT 'menu icon',
  `route` varchar(255) DEFAULT NULL COMMENT 'vue route url',
  `superior_menu` int NOT NULL DEFAULT 0 COMMENT 'superior menu',
  `sort_number` int NOT NULL COMMENT 'sort number',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'creation time of this record',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'update time of this record',
  PRIMARY KEY (`id`),
  UNIQUE KEY (`superior_menu`,`name`),
  UNIQUE KEY (`superior_menu`,`sort_number`)
)

*数据表解释

name:菜单名称，icon：菜单的图标，route：menu-item的route属性，superior_menu：上级菜单，sort_number：排序号（用来指定菜单顺序的），id为主键且自增长，superior_menu和name是联合唯一键，因为同一个菜单下不能有同名的子菜单，superior_menu和sort_number也是联合唯一键，因为同一个菜单下排序号不能重复*

插入测试数据

INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (1, '电商业务管理', 'el-icon-sell', null, 0, 3, '2022-04-01 14:34:42', '2022-04-04 10:23:52');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (2, '店铺管理', 'el-icon-s-shop', null, 1, 2, '2022-04-03 19:35:11', '2022-04-04 10:26:24');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (3, '添加店铺', null, '/management-center/add-store', 2, 1, '2022-04-03 19:35:11', '2022-04-04 09:07:08');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (4, '店铺列表', null, '/management-center/store-list', 2, 2, '2022-04-03 19:35:11', '2022-04-04 09:07:08');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (5, '动态分管理', 'el-icon-s-data', null, 1, 1, '2022-04-04 08:56:46', '2022-04-04 10:26:24');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (6, '录入动态分', null, '/management-center/enter-dsr', 5, 1, '2022-04-04 08:56:46', '2022-04-04 08:57:00');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (7, '更新动态分', null, '/management-center/update-dsr', 5, 2, '2022-04-04 08:56:46', '2022-04-04 08:57:00');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (8, '行政业务管理', 'el-icon-suitcase', null, 0, 1, '2022-04-04 08:58:24', '2022-04-04 10:23:52');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (9, '经费管理', 'el-icon-s-order', null, 8, 1, '2022-04-04 08:58:53', '2022-04-04 09:44:08');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (10, '录入经费支出数据', null, '/management-center/enter-expenditure', 9, 1, '2022-04-04 08:59:43', '2022-04-04 10:08:00');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (11, '组织机构管理', 'el-icon-user-solid', null, 8, 2, '2022-04-04 09:01:19', '2022-04-04 09:44:08');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (12, '组织机构图', null, '/management-center/organization-chart', 11, 1, '2022-04-04 09:03:31', '2022-04-04 09:28:18');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (13, '云仓业务管理', 'el-icon-house', null, 0, 2, '2022-04-04 09:36:37', '2022-04-04 10:23:52');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (14, '商家管理', 'el-icon-s-custom', null, 13, 1, '2022-04-04 09:41:52', '2022-04-04 09:42:26');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (15, '商家列表', null, '/management-center/merchant-list', 14, 1, '2022-04-04 09:42:26', '2022-04-04 10:08:27');
INSERT INTO menu (id, name, icon, route, superior_menu, sort_number, create_time, update_time) VALUES (16, '添加商家', null, '/management-center/add-merchant', 14, 2, '2022-04-04 10:10:27', '2022-04-04 10:10:27');

JAVA后台

Menu实体类

package com.fenzhichuanmei.oa.security.pojo;

import com.fenzhichuanmei.oa.common.pojo.BasePojo;
import lombok.Data;
import lombok.EqualsAndHashCode;

import java.util.List;

/**
 * @author Yi Dai 484201132@qq.com
 * @since 2022/3/31 18:59
 */

@Data
@EqualsAndHashCode(callSuper = true)
public class Menu extends BasePojo {

    private String name;

    private String icon;

    private String route;

    private Integer superiorMenu;

    private Integer sortNumber;

    private List<Menu> subMenus;

    private List<Permission> permissions;

}

因为此处有多个实体类都有一些共同的字段，如id，createTime，updateTime。所以这里将这几个共有的字段抽取到一个抽象类中，并在这个类中实现Serializable接口，方便序列化等；这个类作为所有数据库表实体类的共同父类，减低代码冗余，代码如下：

package com.fenzhichuanmei.oa.common.pojo;

import lombok.Data;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * @author Yi Dai 484201132@qq.com
 * @since 2022/4/1 10:29
 */

@Data
public abstract class BasePojo implements Serializable {
    /**
     * the unique identification of this record in the database table
     */
    protected Integer id;
    /**
     * creation time of this record
     */
    protected LocalDateTime createTime;
    /**
     * update time of this record
     */
    protected LocalDateTime updateTime;
}

统一返回实体

package com.fenzhichuanmei.oa.common.response;

import lombok.Getter;
import lombok.ToString;

/**
 * generic response body
 *
 * @author Yi Dai 484201132@qq.com
 * @since 2022-02-06 20:42
 */

@Getter
@ToString
public class ResponseBody {
    /**
     * description request status
     */
    private final Integer statusCode;
    /**
     * sub status code
     */
    private Integer subStatusCode;
    /**
     * specific details
     */
    private String message;
    /**
     * the data carried in response
     */
    private Object data;

    public static ResponseBody build(Integer statusCode) {
        return new ResponseBody(statusCode);
    }

    public ResponseBody appendSubStatusCode(Integer subStatusCode) {
        this.subStatusCode = subStatusCode;
        return this;
    }

    public ResponseBody appendMessage(String message) {
        this.message = message;
        return this;
    }

    public ResponseBody appendData(Object data) {
        this.data = data;
        return this;
    }

    private ResponseBody(Integer statusCode) {
        this.statusCode = statusCode;
    }
}

Mapper接口

package com.fenzhichuanmei.oa.security.mapper;

import com.fenzhichuanmei.oa.security.pojo.Menu;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @author Yi Dai 484201132@qq.com
 * @since 2022/4/3 19:17
 */

@Mapper
public interface MenuMapper {

    List<Menu> queryMenus(@Param("menu") Menu menu);

}

XML映射文件

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fenzhichuanmei.oa.security.mapper.MenuMapper">

    <select id="queryMenus" parameterType="menu" resultType="menu">
        select `id`, `name`, `icon`, `route`, `superior_menu`,`sort_number`, `create_time`, `update_time`
        from `menu`
        <where>
            <if test="menu!=null and menu.id!=null">
                and `superior_menu`= #{menu.id}
            </if>
            <if test="menu==null or menu.superiorMenu==null">
                and `superior_menu`= 0
            </if>
        </where>
    </select>

</mapper>

主要实现代码

package com.fenzhichuanmei.oa.security.service.impl;

import com.fenzhichuanmei.oa.common.response.ResponseBody;
import com.fenzhichuanmei.oa.common.response.StatusCode;
import com.fenzhichuanmei.oa.security.mapper.MenuMapper;
import com.fenzhichuanmei.oa.security.pojo.Menu;
import com.fenzhichuanmei.oa.security.service.MenuService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Comparator;
import java.util.List;

/**
 * @author Yi Dai 484201132@qq.com
 * @since 2022/4/3 19:14
 */

@Service
public class MenuServiceImpl implements MenuService {

    @Resource
    private MenuMapper menuMapper;

    @Override
    public ResponseBody queryMenus() {
        List<Menu> menus = menuMapper.queryMenus(null);
        menus.sort(Comparator.comparingInt(Menu::getSortNumber));
        for (Menu menu : menus) {
            List<Menu> subMenus = querySubMenus(menu);
            menu.setSubMenus(subMenus);
        }
        return ResponseBody.build(StatusCode.SUCCESS).appendData(menus);
    }


    private List<Menu> querySubMenus(Menu menu) {
        List<Menu> subMenus = menuMapper.queryMenus(menu);
        if (subMenus.size() > 0) {
            subMenus.sort(Comparator.comparingInt(Menu::getSortNumber));
            menu.setSubMenus(subMenus);
            for (Menu subMenu : subMenus) {
                List<Menu> menus = querySubMenus(subMenu);
                subMenu.setSubMenus(menus);
            }
        }
        return subMenus;
    }
}

代码解释：先查询顶级菜单，然后递归查询其子菜单

前端

HomePage.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-row>
        <el-col>
          <el-menu class="top-menu" mode="horizontal">
            <el-submenu index="1" class="submenu">
              <template slot="title">代毅</template>
              <el-menu-item index="1-1">退出登录</el-menu-item>
              <el-menu-item index="1-2">修改密码</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>

      <br>

      <el-row>
        <el-col :span="3">
          <el-menu router class="side-menu">
            <template v-for="subMenu of subMenus">
              <sub-menu v-if="subMenu.subMenus.length" :sub-menu="subMenu" :key="subMenu.id"></sub-menu>
              <el-menu-item :index="getRandomIndex()"
                            v-else-if="subMenu.route"
                            :route="subMenu.route"
                            :key="subMenu.id">
                {{ subMenu.name }}
              </el-menu-item>
            </template>
          </el-menu>
        </el-col>

        <el-col :span="21">
          <el-col :span="24">
            <router-view></router-view>
          </el-col>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import SubMenu from "@/components/SubMenu";
import {nanoid} from "nanoid";
import {queryMenus} from "@/network";

export default {
  name: "HomePage",
  data() {
    return {
      subMenus: []
    };
  },
  components: {
    SubMenu
  },
  methods: {
    getRandomIndex() {
      return nanoid();
    }
  },
  async mounted() {
    this.subMenus = [...await queryMenus()];
  }
}
</script>

<style scoped>
.top-menu > .submenu {
  float: right;
}

.side-menu {
  height: 90vh;
  overflow: auto;
}

.top-menu, .side-menu {
  border-radius: 10px;
}
</style>

SubMenu.vue

<template>
  <el-submenu :index="getRandomIndex()">

    <template v-if="subMenu.subMenus.length">
      <template slot="title">
        <i :class="subMenu.icon"></i>
        <span>{{ subMenu.name }}</span>
      </template>

      <template v-for="subMenu of subMenu.subMenus">
        <sub-menu v-if="subMenu.subMenus.length" :sub-menu="subMenu" :key="subMenu.id"></sub-menu>
        <el-menu-item :index="getRandomIndex()" v-else-if="subMenu.route" :route="subMenu.route" :key="subMenu.id">
          {{ subMenu.name }}
        </el-menu-item>
      </template>
    </template>

  </el-submenu>
</template>

<script>
import {nanoid} from "nanoid";

export default {
  name: "SubMenu",
  computed: {},
  props: {
    /**
     * @param subMenu.subMenus
     */
    subMenu: {
      type: Object,
      required: true
    }
  },
  methods: {
    getRandomIndex() {
      return nanoid();
    }
  }
}
</script>

代码解释：判断菜单是否还有子菜单，如果有就递归判断

效果图

在这里插入图片描述

june-Dai Yi
关注
Spring Boot+Vue3 动态菜单实现思路梳理
YYniannian的博客
07-14 587
一个超链接，但不是外链，是一个在当前系统中打开的外部网页，点击之后，会在右边的主页面中新开一个选项卡，这个选项卡中显示的是一个外部网页（本质上是通过 iframe 标签引入的一个外部网页）。...
动态菜单：用Spring Boot+Vue3教你怎么实现
m0_48922996的博客
07-15 1779
在vhr中，考虑到菜单就是只有两级一级菜单和二级菜单，一级菜单是目录，二级菜单是则是具体的菜单项，没有三级菜单！所以在vhr中，查询菜单的时候我直接用了一个一对多的查询，将一级菜单做一的一方，二级菜单做多的一方，这样比较省事。这里所说的目录，相当于我们在vhr中所说的一级菜单，菜单相当于我们在vhr中所说的二级菜单。当用户从前端登录成功后，要去动态加载的菜单的时候，就查询M和C类型的数据即可，F类型的数据不是菜单项，查询的时候直接过滤掉即可，通过。整体上来说，就分为这四种情况。...
springboot+vue+mysql实现动态表单拖拽
烈日下的野草
11-24 4682
一：框架 springboot+vue+mysql+element-ui ，工具，作者用了idea，中间也穿插了(sts+vscode) 二：主要技术点， 1.表单构建事件（dragstart,drag,dragend），表单构建能充分体现vue双向绑定特性， 2.数据库表单设计(主要有表单模板主表【存一些主表信息，标题，说明之类的】，表单模板子表【存放表单字段类型，比如文本，多选，图片，等一些相关信息】)， 表单信息主表【存放设计好的表单使用保存后的标题，说明之类的，】，表单信息子表【主要存放..
element-ui+springboot功能实现
Bugxiu_fu的博客
12-03 567
springboot+element-ui实现新增，查询
多级菜单Mysql数据库表设计与创建
最新发布
shanxiwei01的博客
04-09 949
我们的菜单分为一级菜单和二级菜单，一个一级菜单对应多个二级菜单，一对多的关系，这个时候，很多学者认为需要两张表来维护菜单之间的关系，其实不然，一张表就可以。故而，可以使用一张表保存菜单数据，那么一张表如何维护一级菜单和二级菜单的关系呢，我们从菜单静态数据可以看到，无论是一级菜单还是二级菜单，核心字段都是一样的。fid为0的为一级菜单，二级菜单的fid 对应一级菜单的id(自关联)文章地址：http://t.csdnimg.cn/jrJhE。添加一个父id字段（fid）。设计后的表格数据应如下。
ElementUI——案例2用户管理（基于SpringBoot实现增删改）
G_change_的博客
01-02 797
ElementUI——案例2用户管理（基于SpringBoot实现增删改）
Agileboot 1.6.0 发布啦 - 一款致力于规范/精简/可维护 的Springboot + Vue3的快速开发脚手架
12-07 453
AgileBoot是一套开源的全栈精简快速开发平台，毫无保留给个人及企业免费使用。本项目的目标是做一款***精简可靠***，***代码风格优良***，***项目规范***的小型开发脚手架。 适合个人开发者的小型项目或者公司内部项目使用。也可作为供初学者学习使用的模板项目。
基于SpringBoot+SpringMVC+Mybatis的Java项目--幸运抽奖（lucky-draw）
qq_43799599的博客
09-08 1447
1、项目背景 2、项目功能 用户登录 用户注册 学生管理 3、项目使用技术 开发平台： java 、idea、maven 技术栈： servlet、Jackson、MySQL 4、 项目的基本流程 第一步：进行序列化、反序列化的操作 作用：使数据和对象之间可以转换，保证数据的完整性 第二步：进行数据库的操作 第三步：设计http请求基类 第四步：设计http请求基类 i 第五步：定义所需Dao类及实现与前端匹配的servlet完成所需功能 5、存在缺陷 1） 2） 3） 6、项目源码 由于篇幅问题此处不适宜
springboot+vue疫苗接种管理系统的设计详细描述下
05-18
疫苗接种管理系统是一个基于 Spring Boot 和 Vue 技术栈的 Web 应用程序，旨在帮助医疗机构更好地管理和跟踪疫苗接种情况。以下是该系统的设计详细描述： ## 技术栈 前端技术栈： - Vue.js 2.x - Element UI - ...
微服务[学成在线] day07：课程管理开发
通往体面生活的路上
07-24 439
???? 知识点概览 为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。 本章节为【学成在线】项目的 day07 的内容 对课程管理的CRUD 级联菜单 使用 mongoDB 储存数据字典 目录 内容会比较多，小伙伴们可以根据目录进行按需查阅。 文章目录???? 知识点概览目录一、课程查询0x01 需求分析0x02 定义API接口0x03 课程管理服务PageHelperDaoSer
多级目录的数据库设计
09-08
多级目录数据库设计方案 在实际工作中，经常碰到需要多级目录的情况，例如设计一个论坛，它的版面是分级的，而且为了灵活扩展，这种分级是没有限制的，也就是说设计者，不限制用户设定多少级目录。
ElementUI+springboot 项目实战前后端分离（用户管理系统的开发）
共勉
01-01 5936
前端设计使用ElementUI进行编写，后端使用springboot微服务架构，简单实现一个基于vue+springboot的增删改查案例
SpringBoot + Vue 实现侧边栏目录动态展示
帅帅气气的黑猫警长
08-29 1644
根据用户角色，来展示出不同的侧边栏，实现前端的权限控制
vue+Node.js+mySql实现动态路由菜单（保存在数据库）
weixin_45990436的博客
04-09 1542
前端在前置路由守卫中进行判断，若Vuex中无菜单数据，则通过接口请求菜单数据，处理格式后通过 router.addRoute动态进行渲染。菜单管理就一个表，通过层级及父级id进行判断，一级菜单level为0且父级id为null,子级level为1且父级id不为null。然后将处理好的菜单数据存于Vuex中供页面菜单栏进行展示。完成上面操作后，即可动态控制路由菜单，效果如下。在菜单处进行取出，通过循环完成渲染即可。
使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)
weixin_33762321的博客
08-10 2843
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧。 在此之前需要先了解vue的大致语法和规则，可先前往官方文档进行学习https://cn.vuejs.org/v2/guide/ 1.搭建vue工程 使用vue一般有直接引入vue.js方式,或者使用node.js进行构建,因为大部分的教程都是围绕node.js来...
Spring-boot+Element-ui简单三级联动实现
jjfolk的博客
11-23 494
Boot中利用vue实现省份三级联动
mysql菜单表设计_多级联动菜单的数据库表如何设计？
weixin_35377249的博客
01-19 2247
id intlevel int 级别： 省 | 市 | 区(县)name varcharparent_id int 外键 指向自身id name parent_id001 影音娱乐 000001001 热门 001001001001 爱奇艺 001001001001002 腾讯视频 001001001002 电视 001 00100100...
vue+elementui+springboot模块开发(一、环境搭建和项目准备)
qq_42434039的博客
11-17 1309
vue进行快速的模块开发 1.安装java jdk 2.安装idea和破解 3.vue环境安装 4.导入前后台项目 5.vue开发，home里写 6.css教学 7.springboot服务开发
数据库设计 一对多 多对多 无限级菜单 设计方法
热门推荐
哎呦呵-Net的专栏
02-25 1万+
设计规范 1、每一个列保持一个原子性，字段不可再划分 2、一个物体描述信息一个表存完 3、每一个字段都是跟主键直接相关的，一条数据只存一次 一对多 如下 通过ID 进行关联 多对多 如下 通过中间表(映射表)进行关联 无限级菜单 name:菜单名称 parentId：上级菜单的ID  也就是这个表里面的ID levelNum：菜单等级
Vue+Element UI 实现表格动态增删改功能
Vue+Element实现的表格操作功能充分利用了Vue的数据绑定和组件化特性，结合Element UI的便捷组件，使得开发这样的功能既高效又直观。开发者可以根据实际需求扩展这些基础功能，例如添加排序、过滤、分页等高级特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值