1、背景
在前后端分离的架构中，前后端约定好接口后就可以并行开发，最后双方再进行联调。但在联调过程中，“等接口”，“调接口”，“改接口”等实际情况无不影响了开发效率。所以前端同学有必要学会本地模拟数据，提高开发效率。
2、前端模拟数据方式
2.1 最笨的方法，直接在业务代码里模拟数据
在业务代码里创建假数据变量供页面调用，等后端提供接口后再将其删除，改成调用接口。
缺点：当数据量大或复杂的时候，十分麻烦，删除时候可能误删业务代码。
2.2 本地请求json
把假数据放在json文件中，本地请求json文件。如下：
业务代码里可这样引用：
import jsonData from './data.json'
通过jsonData即可获取到json数据
优点：比直接在业务代码里写一大堆假数据好一些
缺点：当数据量很大时，比如需要50条类似上面的数据，则需要批量地复制粘贴和修改，浪费时间且不够优雅。
2.3 使用Mock.js
使用Mock.js，按照Mock模板生成指定数量的随机数据。可在前端新建一个data.jsx：
【补充】一些基本的Mock知识
Mock方式：硬编码 拦截请求： 代码拦截 代码工具（Fiddler、Charles等）
Mock.js规范：
数据模板中每个属性由三个部分组成：属性名、生成规则、属性值。
'name|rule': value
其中属性值类型：String、Number、Boolean、Object、Array、Function、RegRxp
生成规则(可选)有7种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
dmin最少小数位，dmax最多小数位
step递增，dcount固定位数的小数位
了解更多可至官网http://mockjs.com/
使用Mock优点：前后端分离、用法简单，方便扩展，通过随机数据可以模拟各种场景。
缺点：
修改接口时不能前后端同步：如果在双方并行开发时，后端又修改了某个字段，需要及时知会前端，让前端同学去相应修改本地的Mock模版。不能做到前后端协同一次修改，即可用。这也是所有前端本地模拟数据不可避免的弊端。
不能模拟出根据不同请求参数，返回不同结果的情况。
在实际开发中，可以配合使用一些mock工具。这些工具能够确保前端在开发过程中的模拟数据可控，且在使用之后不会对前端或者服务端的流程有任何影响。常见的前端接口模拟工具有RAP2，EasyMock，NEI，YApi，Apiary等，这些工具基于Mock.js来进行数据模拟，并在此基础上做了不同的拓展。
2.4 搭建本地服务器
重点介绍一下用node.js搭建本地服务器，模拟接口请求，点击另一篇文章
网友评论