前后端开发分离之Mock

摘要：为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。覆盖拦截请求，目前内置支持。

有时候我们开发一般会分为前后端，前端负责数据显示和UI交互，后端负责数据IO等等。因此造成前端对后端有严重依赖，使得前端的开发进度普遍滞后于后端。

为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。然而编写这些假数据又是一个及其消耗时间、精力的工作；在测试中，由于假数据是手工编写的，测试用例覆盖率低，难以真正进行有效测试。

以上问题的痛点是：

前端依赖后端，工作难以开展

假数据编写工作量大、覆盖率低

针对以上痛点，Mock的需求和解决方案是：

不依赖后端：模拟后端，接受前端请求

自动生成假数据：数据类型多样、覆盖率高

系统耦合：低耦合，当后端真正上线，可以立即替换

引用Mock.js文档的一段话：

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据

Mock这种想法在大部分语言都有具体实现的工具包，此处只介绍JavaScript上的使用。一下例子大部分是从Mock.js中来，请查看具体文档。

HTML中：