spring boot+iview 前后端分离架构之菜单管理首页的实现（十四）

公众号

大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg14】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

菜单管理

以下就是我们实现完成以后的效果图：

菜单管理布局

首先我们在sys目录底下创建一个tree目录，接着创建一个treeList.vue文件，代码如下：

接着我们打开我们的router目录底下的index.js在之前的数据字典的配置后面增加以下的配置：

{
          path: 'treeList',
          name: 'treeList',
          meta: {
            icon: 'md-git-network',
            title: '菜单管理',
            code:'system-manage-tree',
            requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
          },
          component: resolve => {
            require(['../view/sys/tree/treeList.vue'], resolve);
          }
        }

接着打开我们的main.vue修改当前页面的如下部分：

修改完成以后代码如下：

         
              
              数据字典
              菜单管理
              Option 3
         

到此处我们就完成了菜单管理首页的布局，我们运行我们项目可以看到如下的页面，则说明我们的布局已经完成了：

左侧的菜单栏的效果的实现

改造我们的treeList.vue的代码，改造完成以后代码如下：

接着我们再次查看我们的页面，大家会看到如下的页面：

到此处我们就完成了左侧菜单栏的加载和几个按钮的事件的绑定，接着我们来实现我们右侧的列表框。

右侧列表框的实现

改造我们的treeList.vue的代码，改造完成以后代码如下：

接着我们再次查看我们的页面，大家会看到如下的效果图：

到此处我们就完成了本章的菜单管理首页的实现了，下一章将接着讲解菜单管理的剩余的部分。
上一篇文章地址：spring boot+iview 前后端分离架构之数据字典新增字典的实现（十三）
下一篇文章地址：spring boot+iview 前后端分离架构之菜单管理菜单的增删改的实现（十五）