在前端开发过程中,时常会遇到后端接口还没有开发完成的情况,这个时候需要开发前端页面原型的时候,我们需要利用Mock.js 进行模拟数据
1. 安装
npm install mockjs --save-dev
2. 使用
2.1 新建mock.js 文件,引入mock.js
// 引入mock,js
import Mock from 'mockjs'
// 使用mockjs模拟数据
Mock.mock('/api/personManage/queryPersonData', {
"ret":0,
"data":{
"tableData|5": [
{
"ordNum|+1": 1, // 属性值自动加一,初始值为1
"name": "@cname", // 随机生成中文名字
"birday": "@date", // 随机日期
"sex|1-2": true, // 随机Boolean值
"aihao|1": [
"篮球",
"羽毛球",
"足球",
"乒乓球"
], // 随机数组选取元素
}
]
}
});
//延时200-600毫秒请求到数据
Mock.setup({
timeout: '200-600'
})
2.2 main.js 引入创建的mock.js 文件
2.3 接口文件中就可以直接当作接口调用了,Mock会对请求自动拦截,并且返回相关数据
2.4 使用结果