一个后台项目的总结

后台项目总结

 

一.动态路由的添加

• 1.在首页请求权限菜单

 openMenu(item = {}) {
   this.$store.dispatch("GetMenu",{type: true,id: item.id}).then(data => {
       if (data.length !== 0) {
           this.$router.$avueRouter.formatRoutes(data, true);
       }
   });
 },

• 2.动态添加路由

 const RouterPlugin = function() {
   this.$router = null
   this.$store = null
 }
 RouterPlugin.install = function(router, store) {
   this.$router = router
   this.$store = store
   function isURL(s) {
     return /^http[s]?://.*/.test(s)
   }
   function objToform(obj) {
     const result = []
     Object.keys(obj).forEach(ele => {
       result.push(`${ele}=${obj[ele]}`)
     })
     return result.join('&')
   }
   this.$router.$avueRouter = {
     // 全局配置
     

     $website: this.$store.getters.website,
     routerList: [],
     group: '',
     safe: this,
     // 设置标题
     setTitle: function(title) {
       title = title ? `${title}——${this.$website.title}` : this.$website.title
       document.title = title
     },
     closeTag: (value) => {
       const tag = value || this.$store.getters.tag
       this.$store.commit('DEL_TAG', tag)
     },
     // 处理路由
     getPath: function(params) {
       const { src } = params
       let result = src || '/'
       if (src.includes('http') || src.includes('https')) {
         result = `/myiframe/urlPath?${objToform(params)}`
       }
       return result
     },
     // 正则处理路由
     vaildPath: function(list, path) {
       let result = false
       list.forEach(ele => {
         if (new RegExp('^' + ele + '.*', 'g').test(path)) {
           result = true
         }
       })
       return result
     },
     // 设置路由值
     getValue: function(route) {
       let value = ''
       if (route.query.src) {
         value = route.query.src
       } else {
         value = route.path
       }
       return value
     },
     // 动态路由
     formatRoutes: function(aMenu = [], first) {
       const aRouter = []
       const propsConfig = this.$website.menu.props
       debugger
       const propsDefault = {
         label: propsConfig.label || 'label',
         path: propsConfig.path || 'path',
         icon: propsConfig.icon || 'icon',
         children: propsConfig.children || 'children',
         meta: propsConfig.meta || 'meta'
       }
       if (aMenu.length === 0) return
       for (let i = 0; i < aMenu.length; i++) {
         const oMenu = aMenu[i]
         if (this.routerList.includes(oMenu[propsDefault.path])) return
         const path = (() => {
           if (!oMenu[propsDefault.path]) {
             return
           } else if (first) {
             return oMenu[propsDefault.path].replace('/index', '')
           } else {
             return oMenu[propsDefault.path]
           }
         })()

         //特殊处理组件
         const component = 'views' + oMenu.path

         const name = oMenu[propsDefault.label]

         const icon = oMenu[propsDefault.icon]

         const children = oMenu[propsDefault.children]

         const meta = {
           keepAlive: Number(oMenu['keepAlive']) === 1
         }
         const isChild = children.length !== 0
         const oRouter = {
           path: path,
           component(resolve) {
             // 判断是否为首路由
             if (first) {
               require(['../page/index'], resolve)

               // 判断是否为多层路由
             } else if (isChild && !first) {
               require(['../page/index/layout'], resolve)

               // 判断是否为最终的页面视图
             } else {
               require([`../${component}.vue`], resolve)
             }
           },
           name: name,
           icon: icon,
           meta: meta,
           redirect: (() => {
             if (!isChild && first && !isURL(path)) return `${path}/index`
             else return ''
           })(),
           // 处理是否为一级路由
           children: !isChild ? (() => {
             if (first) {
               if (!isURL(path)) oMenu[propsDefault.path] = `${path}/index`
               return [{
                 component(resolve) { require([`../${component}.vue`], resolve) },
                 icon: icon,
                 name: name,
                 meta: meta,
                 path: 'index'
               }]
             }
             return []
           })() : (() => {
             return this.formatRoutes(children, false)
           })()
         }
         aRouter.push(oRouter)
       }
       if (first) {
         if (!this.routerList.includes(aRouter[0][propsDefault.path])) {
           this.safe.$router.addRoutes(aRouter)
           this.routerList.push(aRouter[0][propsDefault.path])
         }
       } else {
         return aRouter
       }
     }
   }
 }

 export default RouterPlugin

 

import PageRouter from './page/'
import ViewsRouter from './views/'
import AvueRouter from './avue-router'
import Store from '../store/'
Vue.use(VueRouter)
//创建路由

const createRouter = () => {
  return new VueRouter({
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        if (from.meta.keepAlive) {
          from.meta.savedPosition = document.body.scrollTop
        }
        return {
          x: 0,
          y: to.meta.savedPosition || 0
        }
      }
    },
    routes: [...PageRouter, ...ViewsRouter]
  })
}
const Router = createRouter()
AvueRouter.install(Router, Store)

Router.$avueRouter.formatRoutes(Store.state.user.menu, true)

 

2.全局配置

在src 目录下创建config/env.js
全局的配置在这里统一修改，在main.js 中添加到全局

// 配置编译环境和线上环境之间的切换

const env = process.env
const baseUrl = ''
const cfg = {}
// 图表库为avue和pig2套地址
const iconfontVersion = ['567566_qo5lxgtishg', '667895_v7uduh4zui']
const iconfontUrl = '//at.alicdn.com/t/font_$key.css'
const codeUrl = `${window.location.origin}/code`
const actUrl = `${window.location.origin}/act/modeler.html?modelId=`
if (env.NODE_ENV === 'development') {
 cfg.bucket = 'xjj-dev'
 cfg.host = 'http://x99.task987.cn/'
} else if (env.NODE_ENV === 'production') {
 cfg.bucket = 'xjj-dev'
 cfg.host = 'http://x99.task987.cn/'
} else if (env.NODE_ENV === 'test') {
 cfg.bucket = 'xjj-dev'
 cfg.host = 'http://x99.task987.cn/'
}
cfg.basePath = `https://${cfg.bucket}.bj.bcebos.com`
export {
 baseUrl,
 actUrl,
 iconfontUrl,
 iconfontVersion,
 codeUrl,
 env,
 cfg
}

main.js

 import * as urls from '@/config/env'
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
   Vue.prototype[key] = urls[key]
 })