SPA项目开发之首页导航+左侧菜单

一、mock.js模拟响应ajax请求

1.1安装mockjs依赖

 npm install mockjs -D              #只在开发环境使用
1

1.2配置开发环境及生产环境

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

1.2.1 dev.env.js配置

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
   MOCK: 'true'
      })

1
2
3
4
5
6
7
8
9

1.2.2 prod.env.js配置

'use strict'
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
      }

1
2
3
4
5
6

1.2.3 main.js配置

//开发环境下才会引入mockjs

代码

// import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
//    后者支持动态引入，也就是require(${path}/xx.js)
process.env.MOCK && require('@/mock')
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import axios from '@/api/http'  /* vue项目对axios的全局配置     */  
import VueAxios from 'vue-axios'

1
2
3
4
5
6
7
8
9
10
11

1.3 mock的使用

使用
      在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，
      /src/mock/index.js
      
      导入公共模块及mockjs全局设置
      import Mock from 'mockjs' //引入mockjs，npm已安装
      import action from '@/api/action' //引入封装的请求地址
 
      //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
      Mock.setup({
// timeout: 400  //延时400s请求到数据
timeout: 200 - 400 //延时200-400s请求到数据
      })
       
 
      注1：index.js文件的作用很显然,就是将分散的xxx-mock文件集合起来.后面再添加新的mock文件,都需要在这里引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.3.1mock文件

index.js

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})

//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

login-mock.js

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|0-1': 0,
	'msg|3-10': 'msg'
}
export default loginInfo;

1
2
3
4
5
6
7
8
9
10
11
12

然后关闭eclipse，重新运行项目，
执行结果：

二 、后台主界面搭建

AppMain.vue

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

LeftNav.vue

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

TopNav.vue

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

login.vue


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

然后index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }, {
      path: '/Login',
      name: 'Login',
      component: Login
    },{
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },{
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }


  ]
})

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

运行结果：

三、退出功能和左侧树收缩功能

3.1退出功能

添加事件即可

exit(){
        this.$router.push({path:'Login'})
      }
1
2
3

点击退出就会推到主界面

3.2左侧树收缩功能

LeftNav.vue

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

TopNav.vue

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

AppMain.vue

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

折叠：

展开：