路由简化

侧边栏增加排序参数
页脚内容修改

vue/src/layout/components/Footer.vue

@@ -1,6 +1,8 @@
 <template>
     <footer class="page-footer">
-        我是footer
+        <div class="copyright">
+            Copyright © 2020 - <a href="https://github.com/toesbieya" target="_blank">toesbieya</a>
+        </div>
     </footer>
 </template>
 
@@ -14,5 +16,10 @@
     .page-footer {
         padding: 48px 24px 24px 24px;
         text-align: center;
+
+        .copyright {
+            color: #808695;
+            font-size: 14px;
+        }
     }
 </style>

vue/src/layout/components/Main.vue

@@ -29,8 +29,6 @@
     import {mapState} from 'vuex'
     import Footer from "./Footer"
 
-    const FooterConstructor = Vue.extend(Footer)
-
     export default {
         name: 'AppMain',
         computed: {
@@ -52,13 +50,13 @@
         },
         watch: {
             scrollTop(v) {
-                if (v >= 0) this.$refs.scrollbar.$refs['wrap'].scrollTop = v
+                if (v >= 0) this.$refs.scrollbar.$refs.wrap.scrollTop = v
             }
         },
         mounted() {
             //插入footer
-            const footerInstance = new FooterConstructor()
+            const FooterConstructor = Vue.extend(Footer)
-            footerInstance.$mount()
+            const footerInstance = new FooterConstructor().$mount()
             this.$refs.scrollbar.$refs.wrap.appendChild(footerInstance.$el)
         }
     }

vue/src/router/authority/index.js

@@ -0,0 +1,9 @@
+/*需要权限控制的路由表*/
+const modulesFiles = require.context('./modules', false, /\.js$/)
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+    const value = modulesFiles(modulePath).default
+    Array.isArray(value) ? modules.push(...value) : modules.push(value)
+    return modules
+}, [])
+
+export default modules

vue/src/router/authorityRoutes/index.js

@@ -1,17 +0,0 @@
-/*需要权限控制的路由表*/
-import purchaseRouter from '@/router/modules/purchase'
-import sellRouter from '@/router/modules/sell'
-import stockRouter from '@/router/modules/stock'
-import messageRouter from '@/router/modules/message'
-import systemRouter from '@/router/modules/system'
-
-
-const authorityRoutes = [
-    purchaseRouter,
-    sellRouter,
-    stockRouter,
-    messageRouter,
-    systemRouter,
-]
-
-export default authorityRoutes

vue/src/router/constant/index.js

@@ -1,40 +1,23 @@
-/*
+/**
  * 不需要权限控制的路由表
-* */
+ * constant/modules下的所有route都会加上noAuth:true
+ */
 import Layout from '@/layout'
-import exampleRouter from '@/router/modules/example'
 
-const constantRoutes = [
+const modulesFiles = require.context('./modules', false, /\.js$/)
-    {
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
-        path: '/redirect',
+    const value = modulesFiles(modulePath).default
-        component: Layout,
+    Array.isArray(value) ? modules.push(...value) : modules.push(value)
-        children: [
+    return modules
-            {
+}, [])
-                path: '/redirect/:path(.*)',
+
-                component: () => import('@/views/app/redirect')
+const routes = [
-            }
+    ...modules,
-        ]
-    },
-    {
-        path: '/login',
-        component: () => import('@/views/app/login')
-    },
-    {
-        path: '/register',
-        component: () => import('@/views/app/register')
-    },
-    {
-        path: '/404',
-        component: () => import('@/views/app/404')
-    },
-    {
-        path: '/403',
-        component: () => import('@/views/app/403')
-    },
     {
         path: '/',
         component: Layout,
         redirect: '/index',
+        sort: 0,
         children: [
             {
                 path: 'index',
@@ -57,8 +40,7 @@ const constantRoutes = [
             }
         ],
         hidden: true
-    },
+    }
-    exampleRouter
 ]
 
 function addNoAuth(routes) {
@@ -69,6 +51,6 @@ function addNoAuth(routes) {
     })
 }
 
-addNoAuth(constantRoutes)
+addNoAuth(routes)
 
-export default constantRoutes
+export default routes

vue/src/router/constant/modules/app.js

@@ -0,0 +1,33 @@
+/*路由表：系统页面*/
+import Layout from '@/layout'
+
+const router = [
+    {
+        path: '/redirect',
+        component: Layout,
+        children: [
+            {
+                path: '/redirect/:path(.*)',
+                component: () => import('@/views/app/redirect')
+            }
+        ]
+    },
+    {
+        path: '/login',
+        component: () => import('@/views/app/login')
+    },
+    {
+        path: '/register',
+        component: () => import('@/views/app/register')
+    },
+    {
+        path: '/404',
+        component: () => import('@/views/app/404')
+    },
+    {
+        path: '/403',
+        component: () => import('@/views/app/403')
+    }
+]
+
+export default router

vue/src/router/index.js

@@ -3,6 +3,7 @@
 *
 * 需要鉴权的路由：meta && !meta.noAuth
 * 左侧菜单显示：name && !hidden && meta.title
+* 左侧菜单排序：能显示 && sort，升序排列
 * 左侧菜单不折叠只有一个children的路由：alwaysShow
 * 面包屑显示：meta.title
 * 搜索选项显示：name && meta.title
@@ -12,14 +13,13 @@
 * */
 import Vue from 'vue'
 import Router from 'vue-router'
-import {pathToRegexp} from 'path-to-regexp'
 import NProgress from 'nprogress'
 import {isUserExist} from "@/utils/sessionStorage"
 import {auth, needAuth} from "@/utils/auth"
-import {isEmpty} from "@/utils"
+import {getPageTitle, transformWhiteList, metaExtend} from './util'
-import {title, routerMode} from '@/config'
+import {routerMode} from '@/config'
-import constantRoutes from '@/router/constantRoutes'
+import constantRoutes from '@/router/constant'
-import authorityRoutes from '@/router/authorityRoutes'
+import authorityRoutes from '@/router/authority'
 import store from "@/store"
 
 Vue.use(Router)
@@ -28,9 +28,7 @@ NProgress.configure({showSpinner: false})
 
 const endRoute = [{path: '*', redirect: '/404', hidden: true}]
 
-const urlNoNeedLogin = [
+const whiteList = transformWhiteList(['/login', '/register', '/404', '/403'])
-    '/login', '/register', '/404', '/403'
-].map(url => pathToRegexp(url))
 
 metaExtend(constantRoutes)
 metaExtend(authorityRoutes)
@@ -47,8 +45,8 @@ router.beforeEach(async (to, from, next) => {
 
     document.title = getPageTitle(to.meta.title)
 
-    //不需要登录的页面也不需要进行权限控制
+    //白名单内不需要进行权限控制
-    if (urlNoNeedLogin.some(reg => reg.test(to.path))) return next()
+    if (whiteList.some(reg => reg.test(to.path))) return next()
 
     const isLogin = isUserExist()
 
@@ -81,32 +79,10 @@ function initMenu() {
     return Promise.resolve()
 }
 
-//拼接页面标题
-function getPageTitle(pageTitle) {
-    return pageTitle ? `${pageTitle} - ${title}` : title
-}
-
 //判断是否需要打开iframe
 function iframeControl(route) {
     let operate = route.meta.iframe ? 'open' : 'close'
     store.dispatch(`iframe/${operate}`, route.meta.iframe)
 }
 
-//子路由继承父路由meta上的{affix,noAuth,noCache}，优先使用子路由的值
-function metaExtend(routes, meta) {
-    routes.forEach(route => {
-        if (meta) {
-            const keys = ['affix', 'noAuth', 'noCache']
-            Object.keys(meta).forEach(key => {
-                if (keys.includes(key) && !isEmpty(meta[key]) && isEmpty(route.meta[key])) {
-                    route.meta[key] = meta[key]
-                }
-            })
-        }
-        if (route.children) {
-            metaExtend(route.children, route.meta)
-        }
-    })
-}
-
 export default router

vue/src/router/util.js

@@ -0,0 +1,30 @@
+import {pathToRegexp} from 'path-to-regexp'
+import {isEmpty} from "@/utils"
+import {title} from "@/config"
+
+//拼接页面标题
+export function getPageTitle(pageTitle) {
+    return pageTitle ? `${pageTitle} - ${title}` : title
+}
+
+//将给定的白名单url转换为正则
+export function transformWhiteList(list) {
+    return list.map(url => pathToRegexp(url))
+}
+
+//子路由继承父路由meta上的{affix,noAuth,noCache}，优先使用子路由的值
+export function metaExtend(routes, meta) {
+    routes.forEach(route => {
+        if (meta) {
+            const keys = ['affix', 'noAuth', 'noCache']
+            Object.keys(meta).forEach(key => {
+                if (keys.includes(key) && !isEmpty(meta[key]) && isEmpty(route.meta[key])) {
+                    route.meta[key] = meta[key]
+                }
+            })
+        }
+        if (route.children) {
+            metaExtend(route.children, route.meta)
+        }
+    })
+}

vue/src/store/modules/resource.js

@@ -1,10 +1,11 @@
 import path from 'path'
-import constantRoutes from '@/router/constantRoutes'
+import constantRoutes from '@/router/constant'
-import authorityRoutes from '@/router/authorityRoutes'
+import authorityRoutes from '@/router/authority'
 import {needAuth} from "@/utils/auth"
 import {createTree} from "@/utils/tree"
 import {getLocalResource, setLocalResource} from "@/utils/localStorage"
 import {getResources} from "@/api/system/resource"
+import {isEmpty} from "@/utils"
 
 const finalConstantRoutes = transformOriginRoutes(constantRoutes)
 const finalAuthorityRoutes = transformOriginRoutes(authorityRoutes)
@@ -26,10 +27,15 @@ const mutations = {
     routes(state, routes) {
         let tempConstantRoutes = JSON.parse(JSON.stringify(finalConstantRoutes))
         let tempAuthorityRoutes = JSON.parse(JSON.stringify(routes))
+
         clean(tempConstantRoutes)
         clean(tempAuthorityRoutes)
+
         state.routes = finalConstantRoutes.concat(routes)
-        state.sidebarMenus = tempConstantRoutes.concat(tempAuthorityRoutes)
+
+        const sidebarMenus = tempConstantRoutes.concat(tempAuthorityRoutes)
+        sort(sidebarMenus)
+        state.sidebarMenus = sidebarMenus
     },
     data(state, data) {
         state.data = data || []
@@ -140,6 +146,39 @@ function filter(arr, fun) {
     }
 }
 
+//菜单排序
+function sort(routes, getSortValue = defaultGetSortValue) {
+    routes.sort((pre, next) => {
+        const preSort = getSortValue(pre),
+            nextSort = getSortValue(next)
+        if (preSort < nextSort) return -1
+        else if (preSort === nextSort) return 0
+        else return 1
+    })
+    routes.forEach(route => {
+        if (route.children && route.children.length > 1) {
+            sort(route.children, getSortValue)
+        }
+    })
+}
+
+const defaultGetSortValue = item => {
+    item = deepTap(item)
+    return !item || isEmpty(item.sort) ? 10000 : item.sort
+}
+
+const deepTap = item => {
+    if (item.hidden) return null
+    if (!isEmpty(item.sort)) return item
+    if (isEmpty(item.name, item.meta.title)) {
+        //如果是类似首页那样的路由层级
+        if (item.children && item.children.length === 1) {
+            return deepTap(item.children[0])
+        }
+    }
+    return null
+}
+
 export default {
     namespaced: true,
     state,