# mock.js 模拟数据
# 介绍
很多时候我们前端来定接口数据结构，easy-mock等在线工具也好用，但是经常出现不稳定，网址频繁挂掉。这里的 moack 主要引入axios-mock-adapter库，配合axios来做了拦截处理。
// ./data/users.js 文件
module.exports = {
code: 200,
message: 'success',
data: {
'list|100': [
{
'id|+1': 1,
userName: '@cname()'
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 核心方法
在src/mock/index.js里封装了一个CreateInterface类，然后创建一个实例，调用类中的init()方法自执行，最后将创建的实例中的mocker暴露出去：
import Mock from 'mockjs'
import MockAdapter from 'axios-mock-adapter'
import request from '@/api/request'
const files = require.context('./data/', false, /\.js$/) // 获取data文件夹下所有js格式文件
const interfaces = files.keys().map(key => key.replace(/(\.\/|\.js)/g, '')) // 过滤仅保留文件名
class CreateInterface {
constructor() {
this.SUCCESS_STATUS = 200 // 成功状态
this.FAIL_STATUS = 500 // 失败状态
this.mocker = new MockAdapter(request)
this.interfaces = interfaces // mock接口列表
}
init() {
const { interfaces, mocker, SUCCESS_STATUS } = this
interfaces.forEach(filename => {
mocker.onGet(filename).reply(() => [SUCCESS_STATUS, Mock.mock(require(`./data/${filename}`))])
})
}
}
const createInterface = new CreateInterface()
createInterface.init()
export default createInterface.mocker
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
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
最后，在入口文件main.js里引入import '@/mock'即可。
import '@/mock'
1