1.当我们在进行前端开发的时候,有的时候后端接口没有完成,但是我们需要数据进行前端页面的调整,这个时候,我们就可以使用mockjs来模拟后端接口,生成随机的数据,来提高自己的工作效率。
2.我们开始安装mockjs,执行命令 `npm install mockjs --save` 等待安装完成。
3.随后,我们在根目录下新建,目录结构如下:
![](https://img.kancloud.cn/a6/51/a6519915117bb5f3f776dd4368958331_263x265.png)
index.js内容如下
```
~~~
import Mock from 'mockjs'
const url = {
test: 'http://mock.test/test', // 自定义 axios 请求的地址
}
export default [
Mock.mock(url.test, {
'data|5':[{
'id|+1': 1,
'mockName|1':['name1','name2','name3']
}]
})
]
~~~
```
![](https://img.kancloud.cn/57/21/5721aeeb4efd4f1638a357d594203938_1001x292.png)
具体的参数,可以去[GitHub](https://github.com/nuysoft/Mock/wiki/Getting-Started)上查询相关文档
4.在main.js引入mock
![](https://img.kancloud.cn/66/f8/66f8d103466b2d0397447ab671b4092b_605x365.png)
5.接下来我们开始请求
![](https://img.kancloud.cn/69/4c/694c63a5194bfdcf04bce08eaa7e6309_776x182.png)
控制台打印出的数据
![](https://img.kancloud.cn/3f/08/3f08b2e4f3e676b5614db445cb220481_936x328.png)
这样就是成功啦