标签：CI ElementUI views component item state import vipinfo Vue2.0

一、后端数据传输

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()
})

完成

标签：CI,ElementUI,views,component,item,state,import,vipinfo,Vue2.0
来源： https://blog.csdn.net/weixin_43168287/article/details/122674901

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。