feat: dynamic menu

wj-vue/src/components/Login.vue

@@ -49,7 +49,7 @@
               var data = resp.data.data
               _this.$store.commit('login', data)
               var path = _this.$route.query.redirect
-              _this.$router.replace({path: path === '/' || path === undefined ? '/home' : path})
+              _this.$router.replace({path: path === '/' || path === undefined ? '/admin' : path})
             }
           })
           .catch(failResponse => {})

wj-vue/src/components/admin/AdminIndex.vue

@@ -4,10 +4,10 @@
       <Header style="position: absolute;width: 100%;"></Header>
     </el-row>
     <el-row style="z-index: 0;">
-      <el-col style="width: 250px" >
+      <el-col :span="4" >
         <admin-menu></admin-menu>
       </el-col>
-      <el-col>
+      <el-col :span="20" style="margin-top: 80px">
         <router-view/>
       </el-col>
     </el-row>
@@ -20,10 +20,8 @@
 
   export default {
     name: 'AdminIndex',
-    components: {AdminMenu, Header},
+    components: {AdminMenu, Header}
     // 配置获取菜单方法
-    mounted () {
-    }
   }
 </script>
 

wj-vue/src/components/admin/AdminMenu.vue

@@ -9,20 +9,19 @@
       text-color="#fff"
       active-text-color="#ffd04b">
       <div style="height: 80px;"></div>
-      <!--<template v-for="(item,i) in navList">-->
+      <template v-for="(item,i) in adminMenus">
         <!--index 没有用但是必需字段-->
-        <!--<el-submenu :key="i" index="i + ''">-->
-          <!--<span slot="title">测试</span>-->
-          <!--<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" style="font-size: 18px">-->
-            <!--<i :class="item.icon"></i>-->
-            <!--{{ item.navItem }}-->
-          <!--</el-menu-item>-->
-        <!--</el-submenu>-->
-      <!--</template>-->
-      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" style="font-size: 18px">
-        <i :class="item.icon"></i>
-        {{ item.navItem }}
-      </el-menu-item>
+        <el-submenu :key="i" :index="i + ''" style="text-align: left">
+          <span slot="title" style="font-size: 17px;">
+            <i :class="item.iconCls"></i>
+            {{item.nameZh}}
+          </span>
+          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
+            <i :class="child.icon"></i>
+            {{ child.nameZh }}
+          </el-menu-item>
+        </el-submenu>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -30,15 +29,9 @@
 <script>
     export default {
       name: 'AdminMenu',
-      data () {
-        return {
-          navList: [
-            {name: '/admin/users', navItem: '用户管理', icon: 'el-icon-user'},
-            {name: '/admin/library', navItem: '图书管理', icon: 'el-icon-tickets'},
-            {name: '/admin/news', navItem: '新闻管理', icon: 'el-icon-news'},
-            {name: '/system', navItem: '系统设置', icon: 'el-icon-s-tools'}
-          ],
-          keywords: ''
+      computed: {
+        adminMenus () {
+          return this.$store.state.adminMenus
         }
       }
     }
@@ -47,7 +40,6 @@
 <style scoped>
   .el-menu-admin {
     height: 1200px;
-    font-size: 30px;
     border-radius: 5px;
   }
 </style>

wj-vue/src/components/admin/Header.vue

@@ -4,8 +4,7 @@
       <img src="../../assets/img/icon/icon2.png" alt="" width="55px" style="float: left;margin-top: -5px;">
     </a>
     <span style="font-size: 32px;font-weight: bold;position:absolute;left: 100px">白  卷</span>
-    <i class="el-icon-s-unfold" style="font-size: 40px;float: right"></i>
-    <el-button @click="getMenus">测试接口</el-button>
+    <i class="el-icon-switch-button" v-on:click="logout" style="font-size: 40px;float: right"></i>
   </el-card>
 </template>
 
@@ -13,11 +12,14 @@
   export default {
     name: 'Header',
     methods: {
-      getMenus () {
-        this.$axios.get('/menu').then(resp => {
-          if (resp && resp.status === 200) {
+      logout () {
+        var _this = this
+        this.$axios.get('/logout').then(resp => {
+          if (resp.data.code === 200) {
+            _this.$store.commit('logout')
+            _this.$router.replace('/index')
           }
-        })
+        }).catch(failResponse => {})
       }
     }
   }
@@ -29,4 +31,8 @@
     opacity: 0.85;
     line-height: 40px;
   }
+  .el-icon-switch-button {
+    cursor: pointer;
+    outline:0;
+  }
 </style>

wj-vue/src/components/admin/user/UserBasic.vue

 <template>
-  <div>test</div>
+  <span style="font-size: 200px">test</span>
 </template>
 
 <script>

wj-vue/src/components/common/NavMenu.vue

@@ -4,7 +4,6 @@
       :default-active="'/index'"
       router
       mode="horizontal"
-      @select="handleSelect"
       background-color="white"
       text-color="#222"
       active-text-color="red"
@@ -45,10 +44,6 @@
       }
     },
     methods: {
-      handleSelect (key, keyPath) {
-        console.log(key, keyPath)
-      },
-
       logout () {
         var _this = this
         this.$axios.get('/logout').then(resp => {

wj-vue/src/main.js

@@ -21,11 +21,18 @@ Vue.use(mavonEditor)
 
 // 如果前端没有登录信息则直接拦截，如果有则判断后端是否正常登录（防止构造参数绕过）
 router.beforeEach((to, from, next) => {
+    if (store.state.user.username && to.path.startsWith('/admin')) {
+      axios.get('/authentication').then(resp => {
+        console.log('菜单加载成功')
+        initAdminMenu(router, store)
+      })
+    }
     if (to.meta.requireAuth) {
       if (store.state.user.username) {
         axios.get('/authentication').then(resp => {
           if (resp) next()
         })
+        next()
       } else {
         next({
           path: 'login',
@@ -38,7 +45,7 @@ router.beforeEach((to, from, next) => {
   }
 )
 
-// http request拦截器，为请求加上 token，测试用，没有必要
+// http request拦截器，为请求加上 token，测试用
 /* axios.interceptors.request.use(
   config => {
     // 输出当前状态下的 token
@@ -66,14 +73,66 @@ axios.interceptors.response.use(
     console.log(error.response)
     if (error) {
       router.replace({
-        path: 'login',
-        query: {redirect: router.currentRoute.fullPath}
+        path: 'login'
+        // query: {redirect: router.currentRoute.fullPath}
       })
     }
     // 返回接口返回的错误信息
     return Promise.reject(error.response.data)
   })
 
+export const initAdminMenu = (router, store) => {
+  if (store.state.adminMenus.length > 0) {
+    return
+  }
+  axios.get('/menu').then(resp => {
+    if (resp && resp.status === 200) {
+      var fmtRoutes = formatRoutes(resp.data)
+      router.addRoutes(fmtRoutes)
+      store.commit('initAdminMenu', fmtRoutes)
+    }
+  })
+}
+
+export const formatRoutes = (routes) => {
+  let fmtRoutes = []
+  routes.forEach(route => {
+    let {
+      path,
+      component,
+      name,
+      nameZh,
+      icon,
+      children
+    } = route
+
+    if (children) {
+      children = formatRoutes(children)
+    }
+    let fmtRoute = {
+      path: path,
+      component: resolve => {
+        if (component.startsWith('User')) {
+          require(['./components/admin/user/' + component + '.vue'], resolve)
+        } else if (component.startsWith('Library')) {
+          // require(['./library/' + component + '.vue'], resolve)
+        } else if (component.startsWith('Admin')) {
+          require(['./components/admin/' + component + '.vue'], resolve)
+        }
+      },
+      name: name,
+      nameZh: nameZh,
+      meta: {
+        requireAuth: true
+      },
+      iconCls: icon,
+      children: children
+    }
+    fmtRoutes.push(fmtRoute)
+  })
+  return fmtRoutes
+}
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

wj-vue/src/router/index.js

@@ -8,6 +8,7 @@ import Login from '../components/Login'
 import Home from '../components/Home'
 import AdminIndex from '../components/admin/AdminIndex'
 import Register from '../components/Register'
+// import UserBasic from '../components/admin/user/UserBasic'
 
 Vue.use(Router)
 
@@ -33,18 +34,12 @@ export default new Router({
         {
           path: '/index',
           name: 'AppIndex',
-          component: AppIndex,
-          meta: {
-            requireAuth: true
-          }
+          component: AppIndex
         },
         {
           path: '/jotter',
           name: 'Jotter',
-          component: JotterIndex,
-          meta: {
-            requireAuth: true
-          }
+          component: JotterIndex
         },
         {
           path: '/editor',
@@ -57,10 +52,7 @@ export default new Router({
         {
           path: '/library',
           name: 'Library',
-          component: LibraryIndex,
-          meta: {
-            requireAuth: true
-          }
+          component: LibraryIndex
         }
       ]
     },
@@ -81,6 +73,13 @@ export default new Router({
       meta: {
         requireAuth: true
       }
+      // children: [
+      //   {
+      //     path: '/admin/basic',
+      //     name: 'basic',
+      //     component: UserBasic
+      //   }
+      // ]
     }
   ]
 })

wj-vue/src/store/index.js

@@ -11,11 +11,11 @@ export default new Vuex.Store({
       username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
       // roles: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).roles
     },
-    menuItems: []
+    adminMenus: []
   },
   mutations: {
-    initMenu (state, menus) {
-      state.routes = menus
+    initAdminMenu (state, menus) {
+      state.adminMenus = menus
     },
     login (state, data) {
       state.user = data
@@ -25,7 +25,7 @@ export default new Vuex.Store({
       // 注意不能用 null 清除，否则将无法判断 user 里具体的内容
       state.user = []
       window.localStorage.removeItem('user')
-      // state.routes = []
+      state.adminMenus = []
     }
   },
   actions: {

wj/src/main/java/com/gm/wj/config/MyWebConfigurer.java

@@ -20,7 +20,8 @@ public class MyWebConfigurer implements WebMvcConfigurer {
                 .excludePathPatterns("/index.html")
                 .excludePathPatterns("/api/register")
                 .excludePathPatterns("/api/login")
-                .excludePathPatterns("/api/logout");
+                .excludePathPatterns("/api/logout")
+                .excludePathPatterns("/api/books");
     }
 
     @Override

wj/src/main/java/com/gm/wj/controller/MenuController.java

@@ -14,6 +14,7 @@ import org.springframework.web.bind.annotation.*;
 
 import java.awt.*;
 import java.util.ArrayList;
+import java.util.Iterator;
 import java.util.List;
 
 @RestController
@@ -29,13 +30,12 @@ public class MenuController {
 
     @GetMapping("/api/menu")
     public List<AdminMenu> menu() {
-        return getMenuByRole();
+        return respMenu(getMenuByRole());
     }
 
     public List<AdminMenu> getMenuByRole() {
         String username = SecurityUtils.getSubject().getPrincipal().toString();
         User user = userService.getByUserName(username);
-        System.out.println(user.getName());
         List<AdminUserRole> userRoleList = adminUserRoleService.listAllByUid(user.getId());
         List<AdminMenu> menus = new ArrayList<>();
         for (AdminUserRole userRole : userRoleList) {
@@ -46,4 +46,19 @@ public class MenuController {
         }
         return menus;
     }
+
+    public List<AdminMenu> respMenu(List<AdminMenu> menus) {
+        for (AdminMenu menu : menus) {
+            menu.setChildren(adminMenuService.getAllByParentId(menu.getId()));
+        }
+
+        Iterator<AdminMenu> iterator = menus.iterator();
+        while (iterator.hasNext()) {
+            AdminMenu menu = iterator.next();
+            if (menu.getParentId() != 0) {
+                iterator.remove();
+            }
+        }
+        return menus;
+    }
 }

wj/src/main/java/com/gm/wj/dao/AdminMenuDAO.java

 package com.gm.wj.dao;
 
 import com.gm.wj.pojo.AdminMenu;
+import io.lettuce.core.dynamic.annotation.Param;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+
+import java.util.List;
 
 
 public interface AdminMenuDAO extends JpaRepository<AdminMenu, Integer> {
      AdminMenu findById(int id);
+     List<AdminMenu> findAllByParentId(int parentId);
 }
 

wj/src/main/java/com/gm/wj/pojo/AdminMenu.java

@@ -14,16 +14,16 @@ public class AdminMenu {
     @Column(name = "id")
     int id;
     String path;
+    String name;
+    @Column(name = "name_zh")
+    String nameZh;
     String icon;
     String component;
     @Column(name = "parent_id")
-    String parentId;
+    int parentId;
     @Transient
     List<AdminMenu> children;
 
-    @Transient
-    MenuMeta menuMeta;
-
     public int getId() {
         return id;
     }
@@ -40,6 +40,22 @@ public class AdminMenu {
         this.path = path;
     }
 
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getNameZh() {
+        return nameZh;
+    }
+
+    public void setNameZh(String nameZh) {
+        this.nameZh = nameZh;
+    }
+
     public String getIcon() {
         return icon;
     }
@@ -64,19 +80,11 @@ public class AdminMenu {
         this.children = children;
     }
 
-    public String getParentId() {
+    public int getParentId() {
         return parentId;
     }
 
-    public void setParentId(String parentId) {
+    public void setParentId(int parentId) {
         this.parentId = parentId;
     }
-
-    public MenuMeta getMenuMeta() {
-        return menuMeta;
-    }
-
-    public void setMenuMeta(MenuMeta menuMeta) {
-        this.menuMeta = menuMeta;
-    }
 }

wj/src/main/java/com/gm/wj/pojo/MenuMeta.java

-package com.gm.wj.pojo;
-
-public class MenuMeta {
-    private boolean requireAuth;
-
-    public boolean isRequireAuth() {
-        return requireAuth;
-    }
-
-    public void setRequireAuth(boolean requireAuth) {
-        this.requireAuth = requireAuth;
-    }
-}

wj/src/main/java/com/gm/wj/service/AdminMenuService.java

@@ -5,6 +5,8 @@ import com.gm.wj.pojo.AdminMenu;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 @Service
 public class AdminMenuService {
     @Autowired
@@ -13,4 +15,5 @@ public class AdminMenuService {
     public AdminMenu getOneById(int id) {
         return adminMenuDAO.findById(id);
     }
+    public List<AdminMenu> getAllByParentId(int parentId) {return adminMenuDAO.findAllByParentId(parentId);}
 }