Springboot单体架构搭建|第四章 前端框架选择和菜单管理

前言

该架构是参考公司原架构做了优化，计划慢慢从0开始完全独立自己搭建一个基于springboot的restful服务后台架构，并且完全后端分离。系列文章所涉及的项目源码都放在了个人github上，前台采用vue技术。
这章开始着重讲述前台的搭建和后端的菜单管理，这篇文章需要对 vue-element-admin和shiro比较了解，基础要求略高。

vue-element-admin

本系列是站在后端Java开发的角度编写，所以对于vue不会详细介绍，着重于框架的使用。
这边采用vue-element-admin框架，该框架是基于vue+elementUI搭建admin管理界面，具体可以点击文中链接。对于非专业前端来说，只要会用这个框架基本就能完成独立的开发，这边也要感谢这位花裤衩大牛能够开源这么好的前端框架。阅读这边文章之前需要先查看花裤衩的文档，学会vue-element-admin基本使用。

改造vue-element-admin

对于admin管理系统化来说，主要的几个基础功能是登陆注册，用户管理，菜单管理，角色管理。我们先从简单的需求开始，不必要一步到位完成成熟的一个admin系统（比如部门管理和权限管理等）。这些功能虽然看似简单基础，但开发难度不低而且代码量也不小，而且大部分公司这块逻辑早已写好，无需你过多修改。所以我只选择菜单管理模块来讲解。

菜单管理

vue-element-admin是纯前端的框架，所以完整的路由表是存在前台的，虽然花裤衩大牛也提供了菜单分配的思路，但是站在后台开发来看，路由表肯定是存在后台更安全，前台在登陆后，后台直接传menus即可。
这样我们就需要用到vue的路由动态加载。

router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表

这边对于vue-element-admin掌握要求比较高，如果没有学习完花裤衩的文档，或者说你完全不会vue，这边就无法进行下去。

先打开src目录下的permission.js，主要修改就是router.beforeEach方法内第一个else后的方法，这边涉及到vue里缓存store知识点。主要思路就是在permission.js中完成对路由的动态加载，从store中取得路由表，那store里的数据又是哪来的呢，在登陆成功后后端会返回userinfo，然后根据其中的roleslist去请求后台getMenus，返回包装好的路由表存到store中。 具体代码看起来非常复杂，但是你只需要知道逻辑就行。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie

NProgress.configure({ showSpinner: false })// NProgress Configuration

// permission judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

const whiteList = ['/logi