VUE中使用Mock模拟数据请求


Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求,生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

记录一下在项目中的使用方法

安装

1
npm install mockjs

当然通常在项目中会在package.json中添加mockjs依赖,再npm install所有项目中需要依赖的库

1
2
3
"dependencies": {
"mockjs": "^1.1.0"
}

引用

src/mock/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//引入mock
import Mock from 'mockjs'

let configArray = []
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
if (key === './index.js') return
configArray = configArray.concat(files(key).default)
})

// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
});

// 注册所有的mock服务
configArray.forEach((item) => {
for (const [path, target] of Object.entries(item)) {
const protocol = path.split('|')
Mock.mock(protocol[1], protocol[0], target)
}
})

main.js中引入

1
2
3
4
//开发环境引入
if (process.env.NODE_ENV === 'development') {
require('@/mock')
}

mock文件下建立personList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let personList = [{
id: 1,
name: '小丽',
age: '18',
number: '8'
},{
id: 1,
name: '小芳',
age: '20',
number: '6'
}]

export default {
'get|/parameter/query': option => {
return {
status: 200,
message: 'success',
data: personList
};
}
}

接下来在网络请求时,发现如果是get请求路径是/parameter/query,就会返回我们mock定义好的数据。另外还有其它语法来生成随机数据。详细参考数据模板定义 DTD

参考

Mock.js
Mock

转载请标明出处:
http://blog.520wa.com/
本文出自Tu’s blog