步骤五:数据mock【React项目创建】

630 阅读1分钟

在前后端同时开发的过程中,如果前端过渡依赖后端返回的数据,往往会影响开发。所以数据mock是蛮重要的

方案选择

其实,当前情况下有很多方法可以实现数据mock,比如:

  • mockjs.com/:可以实现请求拦截,也可以实现数据模拟,生成符合规则的随机数等
  • json-server:本地启动服务,通过规则访问数据
  • swagger:类似这样的,又如postman、moco等,都可以实现在线数据的mock同时,也可以实现前后端的接口文档

其实方案一是我不太想考虑的,因为第一:我不在乎什么随机数据,制定的一套规则,相当复杂。我就是想mock一条数据,用于前期开发,我合并费这经

方案三其实是最理想的,也最规范。可以非常标准的实现一套前后端接口规范。但是这个需要多人合作,有点庞大。如果有团队有能力,是最好不过

所以最终选择的是方案二。可以启动简单的服务,用最快捷,最简单的方法实现本地数据的mock

配置

安装

npm i json-server -D

package.json

{
  "scripts": {
    "mock": "json-server ./src/mock/index.js -p 9090",
  },
}

mock目录

希望所有的mock数据都存放在固定的目录中。同时因为支持js文件,所以用的是js,因为可以加些注释,方便阅读

// src/mock/index.js
const test = require('./test');
module.exports = () => {
    return {
        test,
    };
};

// test.js
module.exports = {
    userName: 'test_name',
    password: 'test_password',
};

传送门

其他

mock数据的方式并没有好坏之分,只要能很好的支持项目的开发就是好的