前后端分离开发之前端模拟数据

1.背景

1.1背景介绍

前后端分离的架构中，前后端同学约定好接口后就可以并行开发，最后双方再进行接口的联调。不过实际开发时，前后端联调会遇到下面这些问题，这些问题无疑中会影响联调的效率，拉长整个开发的周期。

1.2联调的痛点

• “等接口”

前端和后端开发的进度不一致，例如前端同学已经按照交互完成了页面的开发，但是后端同学此时还不能及时提供出接口,此时前端同学会陷入“等接口”的境地。

• “改接口-调接口”

好不容易等来了接口，前端同学联调后发现接口存在一些问题，再把问题反馈给后端同学。后端同学本地复现问题，修改完接口后再重新部署，然后通知给前端同学。前端同学这时再重新调用，测试接口是否正常，如果又发现了新的问题，再重复上面的流程...

首先对于第一个“等接口”的痛点，只有后端同学及时提供接口才能从根本上解决，比如让后端同学先开发，前端同学稍后再介入开发。Sadly，现实很多模块都是前后端同学同时开发，碰到这种情况，我们除了“死等到底”，还可以“提前准备”。前后端同学可以在开发前，约定好接口，具体的形式可以有：

• 口头约定

=> 看似省事，实则后患无穷。可能导致双方记不清细节，以及日后出现问题后，容易互相甩锅。

• 接口文档

=> 写word、markdown文档，更新到公司的wiki上。更好一点的话，使用swagger生成文档。

约定好接口后，前后端同学并行开发。后端如若不能及时提供接口，前端可以本地模拟数据或者使用一些接口模拟工具，详细内容会在后面介绍。

针对第二个痛点，前端其实可以进行“工作转移”。具体就是前端同学本地开发完，确认好各个接口已经按照接口文档约定的参数传参后，无需做后端同学的陪练，可以把最新代码发布到某一个开发环境，让后端同学在写完接口后，在开发环境通过页面进行联调。服务端接口如果有问题，后端同学自己修改完重新发布后，再自己从前端页面测试。如果实在需要更改或再增加参数，再去找前端同学。这样前端同学就可以从“改接口-调接口”的循环圈中解脱出来，把更多精力地放在开发工作上。

2.前端本地模拟数据

本节三种姿势介绍如何本地模拟数据，如果不需要可以跳过。

2.1直接在业务代码里模拟数据

在业务代码里面使用假数据供页面使用，等到后端提供接口后，再将页面的假数据注释掉，改成调用接口。

缺点：

这样会导致业务代码里面混杂了大量冗余代码；

2.2本地请求json

把假数据放到json文件中，本地请求json文件。

示例(数据为假数据)：

{
  "Code": 200,
  "Message": "",
  "Data": {
    "items": [{
        "exp1": "fbcc7d9e-9be1",
        "exp2": "xxx",
        "enabled": true,
        "size": 0,
        "createBy": "",
        "createTime": "2019-07-12T02:56:54.17+08:00",
        "updateBy": "",
        "updateTime": "2019-08-06T03:03:37.859+08:00",
        "comment": ""
      }
    ],
    "totalCount": 1
  }
}

业务代码里：

import jsonData from './data.json';

通过jsonData（例如jsonData.Data.items）即可获取到json数据

优点：比上一个方法好一些，因为没有直接在业务代码里写入大量的假数据。

缺点：如果希望模拟50条数据的返回，简单粗暴地硬写50条（大量复制粘贴+修改）又有些浪费时间，不够优雅。

2.3使用Mock.js

使用Mock.js，按照Mock模版生成指定数量的随机数据

2.3.1在前端新建一个data.jsx

import Mock from 'mockjs';
var responseData = Mock.mock({
    Code:200,
    Message:"",
    Data:{
        'items|10': [{
            "exp1": /[a-z][0-9]{8}-[0-9]{4}/,
            "exp2|1": [ "xxx", "xxx", "xxx"],
            "enabled|1&#