实际项目中使用mockjs模拟数据

项目中的痛点

1. 自己模拟的数据对代码的侵入程度太高，接口完成后要删掉对应的代码，导致接口开发完后端同事开发完，前端自己得加班；
2. 接口联调的时间有可能会延期，接口完成的质量参差不齐；
3. 对于数据量过大的模拟，手动模拟太费时；

使用mockjs的好处

Mock.js 可以帮助前端开发人员创建模拟数据，实现前后端的分离开发，提高开发效率，加速前端调试和开发速度，并且具有灵活的数据模拟和拦截功能，使前端开发更加方便和高效。

1. 模拟数据：Mock.js 可以方便地创建模拟数据，可以自定义数据结构、类型、规则和数量，以满足前端开发过程中对于数据的需求。
2. 独立于后端开发：在前后端分离开发模式下，前端开发人员可以使用 Mock.js 创建模拟数据并进行前端代码的开发和调试，无需依赖后端提供真实的接口数据。
3. 提高开发效率：Mock.js 提供了丰富的数据模拟功能，可以快速生成符合需求的模拟数据，加快前端开发的速度。
4. 数据随机化：Mock.js 可以随机生成各种类型的数据，如文本、日期、数字等，可以模拟真实情况下的多样化数据，帮助测试和调试前端代码。
5. 数据拦截：Mock.js 可以拦截发出的 AJAX 请求，根据预先设置的规则返回模拟数据，方便前端开发人员在不完善或不可用的后端接口的情况下进行开发和调试。

使用方式

基于语法规范和官方示例文档，大致看一下之后就可以很好的模拟出自己在实际项目中需要用到的mock api数据。

基于mockjs@1.1.0、vue2、vite、axios实现的mock接口数据，在构建中添加判断是开发环境才使用mockjs，代码地址

// 安装
pnpm i mockjs -D
// main.js
import './mock/mock.js';
// src/mock/mock.js 
import Mock from 'mockjs';
Mock.setup({
  timeout: '500'
})
Mock.mock('/api/building', 'get', () => {
  return Mock.mock({
    'status': 200,
    "message": '成功',
    'data|3': [
      {
        'id|+1': 1,
        'storey|+1': 1,
        'title': '@CTITLE',
        'email': '@EMAIL',
        'date': Mock.Random.date('yyyy-MM-dd hh:mm:ss'),
        'date2': Mock.Random.datetime(),
        'name': '@CNAME',
        'image': Mock.Random.image('350x150', '#258EFF', '#fff', 'png', 'demo image')
      }
    ]
  })
});


// 返回的随机结果
// {
//   "status": 200,
//   "message": "成功",
//   "data": [
//     {
//       "id": 1,
//       "storey": 1,
//       "title": "改院现放万群",
//       "email": "k.mlcw@nlaoqseyse.cx",
//       "date": "1996-10-05 01:55:02",
//       "date2": "2017-12-27 19:06:06",
//       "name": "徐平",
//       "image": "http://dummyimage.com/350x150/258EFF/fff.png&text=demo image"
//     },
//     {
//       "id": 2,
//       "storey": 2,
//       "title": "红例老",
//       "email": "k.gssge@nkkwt.be",
//       "date": "1996-10-05 01:55:02",
//       "date2": "2017-12-27 19:06:06",
//       "name": "蔡强",
//       "image": "http://dummyimage.com/350x150/258EFF/fff.png&text=demo image"
//     },
//     {
//       "id": 3,
//       "storey": 3,
//       "title": "位治江基思",
//       "email": "y.azchn@vduwo.mo",
//       "date": "1996-10-05 01:55:02",
//       "date2": "2017-12-27 19:06:06",
//       "name": "杜静",
//       "image": "http://dummyimage.com/350x150/258EFF/fff.png&text=demo image"
//     }
//   ]
// }


// src/pages/ScrollPage.vue 页面调用
export default {
  // ...
  mounted() {
    axios.get("/api/building").then(({ data }) => {
      this.list = data.data;
    });
  },
}

mock原理

mockjs对底层的XMLHttpRequest进行了代理，兼容 XMLHttpRequest 和 ActiveXObject，如果使用fetch api的话是不会被拦截的。

模板到模拟数据的策略，将特殊标记的语法转换成对应的模拟数据。