在前端开发过程中,时常会遇到后端接口还没有开发完成的情况,这个时候需要开发前端页面原型的时候,我们需要利用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 使用结果

3. 语法规范

Mockjs 文档