SpringBoot+Vue+ElementUI实现系统中的菜单管理（部分）

悠悠 2024-03-31 16:18 51阅读 0赞

编写了菜单管理部分的接口，特别想看到前端的页面展示情况，就同时也编写了相应的前端代码。技术水平不足，以能实现功能为主。  
只想看到数据的显示的情况，所以只接了查询数据的接口

使用到的技术：  
后端使用springBoot框架＋mybatis-plus  
前端使用vue+elementui进行开发  
开发工具：IDEA、VsCode

### 实现效果： ###

#### 1、新增菜单 ####

使用弹窗新增菜单  
![在这里插入图片描述][00b01b761c8b4b74813da799621cd2ba.png]

点击`上级菜单`下拉框后，出现树形控件：

![在这里插入图片描述][a122ffc2f64641e5b7baad2fc3f58c1c.png]

#### 2、主菜单页面列表显示 ####

![在这里插入图片描述][64d043f7e5e94021a89982136efb41bb.png]

列表数据根据`上下级关系`可进行`折叠显示`：

![在这里插入图片描述][eb1b8897f9424f66bbfd6d9632a41e1b.png]

### 具体实现代码： ###

#### 测试数据： ####

![在这里插入图片描述][3d79c837a5324663ab8620f429c25ec0.png]

#### 1、新增菜单 ####

##### 后端： #####

首先查询数据库菜单项数据，以树形结构返回

###### 返回结果： ######

[
        {
        
            "value": 1,
            "label": "首页",
            "hasChildren": false,
            "children": null
        },
        {
        
            "value": 2,
            "label": "我的会议",
            "hasChildren": true,
            "children": [
                {
        
                    "value": 7,
                    "label": "今日会议",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 8,
                    "label": "已通过会议",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 9,
                    "label": "已拒绝会议",
                    "hasChildren": false,
                    "children": null
                }
            ]
        },
        {
        
            "value": 3,
            "label": "会议预定",
            "hasChildren": true,
            "children": [
                {
        
                    "value": 10,
                    "label": "快速预定",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 11,
                    "label": "标准预定",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 12,
                    "label": "周期会议",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 13,
                    "label": "月视图预定",
                    "hasChildren": false,
                    "children": null
                }
            ]
        },
        {
        
            "value": 4,
            "label": "会议审核",
            "hasChildren": false,
            "children": null
        },
        {
        
            "value": 18,
            "label": "门牌管理",
            "hasChildren": false,
            "children": null
        },
        {
        
            "value": 6,
            "label": "系统管理",
            "hasChildren": true,
            "children": [
                {
        
                    "value": 14,
                    "label": "用户中心",
                    "hasChildren": false,
                    "children": null
                },
                {
        
                    "value": 15,
                    "label": "设置",
                    "hasChildren": true,
                    "children": [
                        {
        
                            "value": 17,
                            "label": "退出",
                            "hasChildren": false,
                            "children": null
                        },
                        {
        
                            "value": 16,
                            "label": "注销",
                            "hasChildren": false,
                            "children": null
                        }
                    ]
                }
            ]
        }
    ]

###### Entity： ######

@Data
    public class MenuTree {
        
      /** id */
      private Integer value;
      /** 菜单名称 */
      private String label;
      /** 是否含有子节点 */
      private Boolean hasChildren;
      /** 子节点 */
      private List<MenuTree> children;
    }

###### controller层： ######

@ApiOperation(value = "获取菜单列表树状结构")
    @ApiImplicitParam(value = "传入id表明查询这个id下的子集菜单，id为0表明查询整个树状菜单", name = "id")
    @GetMapping("/tree")
    List<MenuTree> getMenuTree(@RequestParam Integer id) {
        
      return menuService.getMenuTree(id);
    }

###### dao层： ######

@Mapper
    public interface MenuMapper extends BaseMapper<Menu> {
        
      /**
       * 根据id查询子节点菜单
       *
       * @param id
       * @return
       */
      List<MenuInfoRes> getMenuChildById(Integer id);
    }

对应的menuMapper.xml：

<sql id="tableName">t_b_authority</sql>
    <sql id="menuTreeCols">id
        ,parent_id,menu_name</sql>
    <select id="getMenuChildById" resultType="com.boc.pojos.auth.res.MenuInfoRes">
            SELECT
        <include refid="menuTreeCols"/>
            FROM
        <include refid="tableName"/>
            WHERE parent_id=#{id}
            ORDER BY menu_sort
    </select>

###### service层： ######

/**
       * 获取菜单列表树状结构
       *
       * @return
       * @throws ServiceException
       * @param id
       */
      List<MenuTree> getMenuTree(Integer id) throws ServiceException;

实现service方法，使用到了递归：  
思路：

1.  先找出第一层节点，即parent\_id为null的数据，并按照menu\_sort排序
2.  找第一层的子节点【根据子节点的parent\_id==父节点的id】
3.  对寻找到的子节点进行递归，寻找子节点的子节点，以此类推……

/**
       * 获取菜单列表树状结构
       *
       * @return
       * @throws ServiceException
       * @param id 传入id表明查询这个id下的子集菜单，id为0，表明查询整个树状菜单
       */
      @Override
      public List<MenuTree> getMenuTree(Integer id) throws ServiceException {
        
        if (id != 0) {
        
          MenuTree tree = getMenuTreeById(id, true);
          if (tree != null && tree.getHasChildren()) {
        
            return tree.getChildren();
          }
          return null;
        }
        List<Menu> firstLevel =
            menuMapper.selectList(
                new QueryWrapper<Menu>().isNull("parent_id").orderByAsc("menu_sort")); // 查询到的第一级
        if (CollectionUtils.isNotEmpty(firstLevel)) {
        
          List<MenuTree> res =
              firstLevel.stream()
                  .map(menu -> getMenuTreeById(menu.getId(), true))
                  .collect(Collectors.toList());
          return res;
        }
        return null;
      }
    
      /**
       * 根据菜单id获取其下子节点列表
       *
       * @param id
       * @param allLevel true:找所有层（子节点下的子节点）；false:只找一层
       * @return
       * @throws ServiceException
       */
      private MenuTree getMenuTreeById(Integer id, Boolean allLevel) throws ServiceException {
        
    
        Menu currMenu = menuMapper.selectById(id);
        if (currMenu == null) {
        
          return null;
        }
    
        MenuTree menuTree = new MenuTree();
        menuTree.setValue(id);
        menuTree.setLabel(currMenu.getMenuName());
        List<MenuInfoRes> menus = menuMapper.getMenuChildById(id);
        if (CollectionUtils.isNotEmpty(menus)) {
        
          menuTree.setHasChildren(true);
          List<MenuTree> children =
              menus.stream()
                  .map(
                      menu -> {
        
                        MenuTree child = new MenuTree();
                        child.setValue(menu.getId());
                        child.setLabel(menu.getMenuName());
                        if (allLevel) {
        
                          // 进入递归，递归结束条件为子节点无孩子节点
                          return getMenuTreeById(child.getValue(), true);
                        }
                        return child;
                      })
                  .collect(Collectors.toList());
          menuTree.setChildren(children);
        } else {
        
          menuTree.setHasChildren(false);
        }
    
        return menuTree;
      }

##### 前端： #####

这里只展示`上级菜单`下拉框部分代码：

###### html部分：`<template>标签里` ######

由`el-select`＋`el-option`\+`el-tree`构成：  
`el-option`用于设置一个隐藏的下拉选项，不然下面的树形控件`el-tree`无法正常使用

<el-form ref="menuForm" :inline="true" :rules="rules" :model="menuForm" label-position="right">
        <el-form-item label="上级菜单：" prop="parentMenu" class="col4-end">
            <el-select ref="select" v-model="menuForm.parentMenu" placeholder="请选择上级菜单">
                <el-option label="请选择" value="0" style="display: none"></el-option>
                    <el-tree :data="options" accordion :props="defaultProps" @node-click="setInput"> </el-tree>
            </el-select>
        </el-form-item>
    </el-form>

###### js部分：`<script>标签里` ######

getData()方法里获取到的就是上面的返回结果

export default {
        
      data () {
        
        return {
        
          dialogVisible: false,
          menuForm: {
        
            parentMenu: '',
            menuType: '',
            menuIcon: '目录',
            hidden: '是'
          },
          rules: {
        
            "parentMenu": [{
         required: true, message: '请选择上级菜单', trigger: 'blur' }],
            "menuName": [{
         required: true, message: '请输入菜单名称', trigger: 'blur' }],
            "menuType": [{
         required: true, message: '请选择菜单类型', trigger: 'blur' }]
          },
          options: [],
          defaultProps: {
        
            children: 'children',
            label: 'label',
            value: 'value',
            hasChildren: 'hasChildren'
          }
        }
      },
      created () {
        
        this.getData();
      },
      methods: {
        
        // 获取 菜单数据
        getData () {
        
          getMenuTree(0).then(res => {
        
            console.log(res);
            this.options = res;
          });
        },
        //树形控件选项点击事件
        setInput (selectName) {
        
          console.log(selectName)
          this.menuForm.parentMenu = selectName.label
          this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后 select 不会自动折叠
        }
    }

#### 2、主菜单页面列表显示 ####

##### 后端： #####

这里后端只是单纯的把数据库里的数据查询出来，没有做任何处理；数据的处理工作放在了前端；【让前端拿到数据后想怎么玩就怎么玩】

###### 返回结果： ######

{
        
        "data": [
            {
        
                "id": 1,
                "parentId": null,
                "menuName": "首页",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 1,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 2,
                "parentId": null,
                "menuName": "我的会议",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 2,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 3,
                "parentId": null,
                "menuName": "会议预定",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 3,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 4,
                "parentId": null,
                "menuName": "会议审核",
                "menuType": 0,
                "menuIcon": null,
                "authMark": "audit:meet",
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 4,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 6,
                "parentId": null,
                "menuName": "系统管理",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 6,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 7,
                "parentId": 2,
                "menuName": "今日会议",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 1,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 8,
                "parentId": 2,
                "menuName": "已通过会议",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 2,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 9,
                "parentId": 2,
                "menuName": "已拒绝会议",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 3,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 10,
                "parentId": 3,
                "menuName": "快速预定",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 1,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 11,
                "parentId": 3,
                "menuName": "标准预定",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 2,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 12,
                "parentId": 3,
                "menuName": "周期会议",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 3,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 13,
                "parentId": 3,
                "menuName": "月视图预定",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 4,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 14,
                "parentId": 6,
                "menuName": "用户中心",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 1,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 15,
                "parentId": 6,
                "menuName": "设置",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 2,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 16,
                "parentId": 15,
                "menuName": "注销",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 2,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 17,
                "parentId": 15,
                "menuName": "退出",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 1,
                "componentPath": null,
                "description": null
            },
            {
        
                "id": 18,
                "parentId": null,
                "menuName": "门牌管理",
                "menuType": 0,
                "menuIcon": null,
                "authMark": null,
                "routeUrl": null,
                "hidden": 0,
                "menuSort": 5,
                "componentPath": null,
                "description": null
            }
        ],
        "total": 17
    }

后端代码部分通过selectList\\selectPage等方法，可以很容易查到，在这里就不做赘述了

##### 前端： #####

###### html部分：`<template>标签里` ######

<el-table :data="menuTree" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column prop="menuName" label="名称">
                            
                        </el-table-column>
        <el-table-column prop="authMark" label="权限标识" />
        <el-table-column prop="routeUrl" label="路由地址" />
        <el-table-column prop="menuSort" label="菜单排序" />
        <el-table-column prop="componentPath" label="组件路径" />
        <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
                <el-button type="text" size="mini" @click="add(scope.row)">新增下一级</el-button>
                <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="remove(scope.row)" type="text" size="small" class="delete">删除</el-button>
            </template>
         </el-table-column>
    </el-table>

###### js部分：`<script>标签里` ######

export default {
        
      components: {
         dialogToCreateMenu },
      name: 'basemenu',
      data () {
        
    
        return {
        
          query: {
        
            address: '',
            name: '',
            pageNum: 1,
            pageSize: 100
          },
          menuTree: [],
          spanIndex: [],
          pageTotal: 0
        }
      },
      created () {
        
        this.getData(this.query);
      },
      methods: {
        
        // 获取 菜单数据
        getData () {
        
          getMenuList(this.query).then(res => {
        
            console.log("接口返回值：", res);
            this.menuTree = res.data;
            let firstLevel = this.getFirstLevel(this.menuTree)
            console.log("第一层数据：", firstLevel)
            this.menuTree = this.listToTree(firstLevel, this.menuTree)
            console.log("listToTree:", this.menuTree)
          })
        },
        // 根据 menuSort 排序方法
        menuSort (a, b) {
        
          const val1 = a['menuSort'];
          const val2 = b['menuSort'];
          return val1 - val2;
    
        },
        //获取第一层数据
        getFirstLevel (menuTree = []) {
        
          let firstLevel = []
          menuTree.forEach(item => {
        
            if (item["parentId"] === null)
              firstLevel.push(item)
          })
          firstLevel.sort(this.menuSort)
          return firstLevel
        },
        listToTree (firstLevel = [], menuTree = []) {
        
          let arr = []
          for (var i = 0; i < firstLevel.length; i++) {
        
            if (arr.indexOf(firstLevel[i] < -1)) {
        
              //不存在就先添加
              firstLevel[i]["children"] = []
              arr.push(firstLevel[i])
    
              //查它的子节点
              for (var j = 0; j < menuTree.length; j++) {
        
                if (menuTree[j]["parentId"] === firstLevel[i]["id"]) {
        
                  //说明是它的子节点，然后，在对这个子节点进行寻找子节点
                  let child = this.listToTree([menuTree[j]], menuTree)
                  let sortChildPart = child.slice(1).sort(this.menuSort)
                  child = child.slice(0, 1).concat(sortChildPart)
                  arr[arr.length - 1]["children"] = arr[arr.length - 1]["children"].concat(child)
                }
              }
            } else {
        
              continue
            }
          }
          return arr
        }
    }

###### 处理后的数据形式： ######

![在这里插入图片描述][b7d02cd88cfc43279dad15b56591fc9e.png]

完整的实现代码，希望能在这个月底前整理出来！！！

*  菜单功能的实现要做路由配置route.js

[00b01b761c8b4b74813da799621cd2ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8cbc0ebefd674911b6472975c17aa60f.png
[a122ffc2f64641e5b7baad2fc3f58c1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b9197778a246449892fbfd47a093e4a6.png
[64d043f7e5e94021a89982136efb41bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bf948b99208e4342a800b69a08b3b620.png
[eb1b8897f9424f66bbfd6d9632a41e1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f64dd3f8f42549199fa08d87a6a4e7a8.png
[3d79c837a5324663ab8620f429c25ec0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/88a2674b151b4f7b90a3bf478e5e8eec.png
[b7d02cd88cfc43279dad15b56591fc9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cc7ffad1736d42ddaf9574439013f88a.png