在vue项目中尝试Mock.js

再也不想撸完页面然后摸鱼半天只为了等后端的数据了,咱们自己也可以造数据!

安装方法什么的就不讲了,都知道的,我贴一下如何配置吧。

项目结构:

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
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── mock
│   │   └── index.js
│   ├── router
│   │   └── index.js
│   └── test.vue
└── static

在 src 文件夹下新建一个mock文件夹,再在文件夹里新建一个index.js,内容为:

1
2
3
4
5
6
7
8
9
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据

let data = {
'sstr': Random.string(2,10),
'nnum': Random.integer(1,100)
}

Mock.mock('/data/index', 'get', data) // 根据数据模板生成模拟数据

再在main.js中加一条require('./mock');

再在页面中,请求/data/index这个地址

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
<template>
<div>
<div>
<span>{{obj.sstr}}</span>
<span>{{obj.nnum}}</span>
</div>
</div>
</template>

<script>
export default {
data () {
return {
obj:{
sstr:'',
nnum:0
}
}
},
methods:{
async getInfo(){
let res= await this.$http.get('/data/index');
console.log(res);
this.obj=res.body;
}
},
created(){
this.getInfo();
}
}
</script>

效果如下,Mock成功拦截此次请求,然后返回自己生成的模拟数据。
tryMock

还有一种操作是利用cross-env创建一个dev环境,一个mock环境,不过在配置的时候总有莫名的报错,遂放弃。目前这种方法在前后端联调的时候可以把main.js中对mock的引入注释掉,请求就不会被拦截了。