一、后端数据传输

1.数据库格式

2.后端数据交互格式(json)

二、前端处理

1.静态路由

(1)在router/index.js界面设置静态路由，即必定会显示的页面

export const constantRouterMap = [
  {path: '/login', component: () => import('@/views/login/index'), hidden: true},
  {path: '/404', component: () => import('@/views/404'), hidden: true},
  {
    path: '',
    component: Layout,
    redirect: '/home',
    children: [{
      path: 'home',
      name: 'home',
      component: () => import('@/views/home/index'),
      meta: {title: '个人信息', icon: 'dashboard'}
    }]
  }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap,
})

(2)在router/index.js中指定动态路由的路径，与数据库里的path相对应

export const menuMap = {
  'normal':{
    component: Layout,
  },
  'vipinfo_index': {
    component: () => import('@/views/vipinfo/vipinfo_index'),
  },
  'vipinfo_manage': {
    component: () => import('@/views/vipinfo/vipinfo_manage'),
  },
  'vipinfo_role': {
    component: () => import('@/views/vipinfo/vipinfo_role'),
  },
  'vipinfo_detail': {
    component: () => import('@/views/vipinfo/vipinfo_detail'),
  },
  'good_list': {
    component: () => import('@/views/goodmanage/good_list'),
  },
  'good_size': {
    component: () => import('@/views/goodmanage/good_size'),
  },
  'good_detail': {
    component: () => import('@/views/goodmanage/good_detail'),
  },
  'good_add': {
    component: () => import('@/views/goodmanage/good_add'),
  },
  'order_list': {
    component: () => import('@/views/order/order_list'),
  },
  'refund_list': {
    component: () => import('@/views/order/refund_list'),
  },
  'order_detail': {
    component: () => import('@/views/order/order_detail'),
  },
  'refund_detail': {
    component: () => import('@/views/order/refund_detail'),
  },
  'market_list': {
    component: () => import('@/views/market/market_list'),
  },
}

(3)在store/modules下创建permission.js

import { menuMap,constantRouterMap } from '@/router/index';

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers;
      state.routers = constantRouterMap.concat(routers);
    }
  },
  actions: {
    //生成菜单列表
    addroute({ commit }){
      return new Promise(resolve => {
        const menulist = [];
        const menu = JSON.parse(localStorage.getItem('menu'))
        menu.map((item,i)=>{
          let temp = [];
          temp = item;
          console.log(temp)
          if(item['module_parent_code']!='0'){
            let path = item['path']
            temp['component'] = menuMap[path]['component']
          }
          else{
            temp['component'] = menuMap['normal']['component']
          }
          menulist.push(temp)
        })
        let menul = toTree(menulist)
        commit('SET_ROUTERS', menul);
        resolve();
      })
    }
  }
};

//树形结构
function toTree(data) {
  let treeData = [];
  if (!Array.isArray(data)) return treeData;

  data.forEach(item => {
    delete item.children;  //删除item下的children，以防多次调用
  });

  let map = {};
  data.forEach(item => {
    map[item.module_code] = item;
  });

  data.forEach(item => {
    let parent = map[item.module_parent_code];  //判断item的parent_code是否是否存在map中
    if (parent) {  //如果存在则表示item不是最顶层的数据
      (parent.children || (parent.children = [])).push(item)
    }
    else {
      treeData.push(item)  // 如果不存在 则是顶层数据
    }
  });
  return treeData;
};


export default permission;

(4)在store/getters.js下加入routers和addRouters

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  addRouters: state => state.permission.addRouters,
  routers: state => state.permission.routers
}
export default getters

(5)在src/permission.js中引用

import store from './store'
import router from './router'

router.beforeEach(async(to, from, next) => {
  // start progress bar
  console.log('getters',store.getters.addRouters)
  store.dispatch('addroute', {}).then(() => { // 生成可访问的路由表
    router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
    // next({ ...to, replace: true })
  })
  NProgress.start()
})

完成