1 基础知识

image-20190813192524806

2 路由和菜单

image-20190813193916129

image-20190813193958378

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'
import {Message} from 'element-ui'
import NProgress from 'nprogress'
import Layout from '@/module-dashboard/pages/layout'
import {getToken} from '@/utils/auth'
import {hasPermissionPoint, hasPermission} from '@/utils/permission'

// 定义
const _import = require('./import_' + process.env.NODE_ENV) // 懒加载 导包
const whiteList = ['/login', '/reg', '/authredirect'] // 白名单 无需跳转

// 配置
Vue.use(Router)
NProgress.configure({showSpinner: false}) // NProgress Configuration

/**
 * 基础路由
 * 
* root: true                     在一级栏目显示
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
*                                if not set alwaysShow, only more than one route under the children
*                                it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar,
    noCache: true                if true ,the page will no be cached(default is false)
  }
**/
export const constantRouterMap = [
  {
    path: '/login',
    component: _import('dashboard/pages/login'),
    hidden: true
  },
  
  
  {
    path: '/reg',
    component: _import('dashboard/pages/reg'),
    hidden: true
  },
  
  
  {
    path: '/authredirect',
    component: _import('dashboard/pages/authredirect'),
    hidden: true
  },
  
  
  {path: '/404', component: _import('dashboard/pages/404'), hidden: true},
  {path: '/401', component: _import('dashboard/pages/401'), hidden: true},
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: _import('dashboard/pages/dashboard'),
        name: 'dashboard',
        meta: {title: 'dashboard', icon: 'dashboard', noCache: true}
      }
    ]
  }
]

/**
 * 配置路由
 **/
let router = new Router({
  scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap
})

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) {
    // determine if there has token
    /* has token */
    if (to.path === '/login') {
      next({path: '/'})
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store
          .dispatch('GetUserInfo')
          .then(res => {
            // 拉取user_info
            const roles = res.data.data.roles // note: roles must be a array! such as: ['editor','develop']
            store.dispatch('GenerateRoutes', {roles}).then(() => {
              // 根据roles权限生成可访问的路由表
              router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
              next({...to, replace: true}) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
            })
          })
          .catch(() => {
            store.dispatch('FedLogOut').then(() => {
              Message.error('验证失败, 请重新登录')
              next({path: '/login'})
            })
          })
      } else {
        next()
      }
    }
  } else {
    /* has no token */
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})


/**
 * 导出 基础路由
 **/
export default router

/**
 * 导出 业务路由
 **/
export let asyncRouterMap = [
  {path: '*', redirect: '/404', hidden: true}
]

image-20190813194213441

image-20190813194230275

image-20190813194408861

image-20190813194453879

image-20190813194542523

asyncRouterMap 代表那些业务中通过 addRouters 动态添加的页面。

image-20190813195038879

image-20190813195315155

image-20190813195340903

image-20190813195859042

Mock 数据

image-20190813200124946

image-20190813200136266

如何启动一个工程

image-20190813201905652

  • 删除node_modules
  • Node-v
  • Nvm use 8
  • Cpm install
  • cnpm run dev
  • image-20190813202023943

注册模块

image-20190813202230518

image-20190813202426656

image-20190813202510397

image-20190813202607279

image-20190813202744174

配置路由菜单

image-20190813202830227

image-20190813202917078

image-20190813203107612

创建api

image-20190813203248725

image-20190813203330162

image-20190813203831940

image-20190813203909587

image-20190813204200120

构造数据

image-20190813205307331

image-20190813205340115

1
2
3
4
5
6
7
8
import CompanyAPI from './company'



//配置模拟数据接口
//  /company/12
//Mock.mock(/\/company\/+/, 'get', CompanyAPI.sassDetail)//根据id查询
//Mock.mock(/\/company/, 'get', CompanyAPI.list)  //访问企业列表

构造页面

image-20190813205802383

image-20190813205831824

image-20190813205850056

image-20190813211051773

image-20190813212154388

image-20190813212850018

image-20190813213122166

前后端 联调试

image-20190813213704214

image-20190813213811082

注册模块

image-20190814101027877

开课吧java架构师：[itjc8.com_vUlsWGu7RkIcysjP](/Users/apple/Library/Application Support/typora-user-images/AB113F18-2A06-44C4-91DE-0C5918B3B336/itjc8.com_vUlsWGu7RkIcysjP)

1
开课吧java架构师：itjc8.com_vUlsWGu7RkIcysjP