引入
mock（模拟）: 是在项目测试中，对项目外部或不容易获取的对象/接口，用一个虚拟的对象/接口来模拟，以便测试。
背景
前后端分离
前后端仅仅通过异步接口(AJAX/JSONP)来编程
前后端都各自有自己的开发流程，构建工具，测试集合
关注点分离，前后端变得相对独立并松耦合
开发流程
面临问题
解决方法
接口文档服务器
功能
接口编辑功能
类型1：根据接口描述语法书写接口，并保存为文本文件，然后使用生成工具生成在线接文档（HTML）
-- 也有一些类似 Markdown 的接口文档编辑器，参见：There Are Four API Design Editors To Choose From Now。
类型2：提供在线的接口编辑平台，进行可交互的接口编辑
接口查看功能
提供友好的接口文档查看功能
用法
优点
前端 mock 方法回顾
前端开发过程中，使用 mock 数据来模拟接口的返回，对开发的代码进行业务逻辑测试。解决开发过程中对后台接口的依赖。
硬编码数据
将 mock 数据写在代码中。
示例
// $.ajax({
// url: ‘https://cntchen.github.io/userInfo’,// type: 'GET',// success: function(dt) {
var dt = {
"isSuccess": true,"errMsg": "This is error.","data": {
"userName": "Cntchen","about": "FE"
},};
if (dt.isSuccess) {
render(dt.data);
} else {
console.log(dt.errMsg);
}
// },// fail: function() {}
// });
优点
痛点
请求拦截 & mock 数据
hijack（劫持）接口的网络请求，将请求的返回替换为代码中的 mock 数据。
实例
The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses
优点
痛点
依赖特定的框架，如
Jquery增加最终上真实环境的切换成本
接口文档变换需要手动更新
本地 mock 服务器
将 mock 数据保存为本地文件。在前端调试的构建流中，用 node 开本地 mock 服务器，请求接口指向本地 mock 服务器，本地 mock 服务器 response mock 文件。
mock 文件
.mock ├── userInfo.json ├── userStars.json ├── blogs.json └── following.json
接口调用
https://github.com/CntChen/userInfo --> localhost:port/userInfo
优点
痛点
json 文件非常多
接口文档变化需要手动更新
代理服务器
map local
接口请求的返回映射为本地 mock 数据
https://github.com/CntChen/userInfo-->localPath/userInfo
编辑映射规则
map remote
接口请求的返回映射为另一个远程接口的调用
rewrite
修改接口调用的 request 或 response，添加/删除/修改 HTTP
request line/response line/headers/body解决跨域问题
使用 map 后，接口调用的 response 不带 CORS headers，跨域请求在浏览器端会报错。需要重写接口返回的 header，添加 CORS 的字段。
优点
痛点
需要处理跨域问题
一个变更需要代理服务器进行多处改动，配置效率低下
不支持 HTTP method 的区分
-- CORS 的 preflight 请求(OPTION)也会返回数据
mock 平台
接口文档服务器
使用接口文档服务器来定义接口数据结构
mock服务器
mock 服务器根据接口文档自动生成 mock 数据，实现了接口文档即API
优点
缺点
可能存在跨域问题
业界实践
公司实践
没有找到公司级别的框架，除了阿里的 RAP。可能原因：
非关键性、开创性技术，没有太多研究价值
许多大公司是小团队作战，没有统一的 mock 平台
已经有一些稳定的接口，并不存在后台接口没有开发完成的问题
-- 而我们想探究的问题是：前后端同时开发时的 mock
github 开源库
A powerful high-level API design language for web APIs.
一种使用类markdown语法的接口编写语言，使用json-schema和mson作为接口字段描述。有完善的工具链进行接口文件 Edit，Test，Mock，Parse，Converter等。
Swagger是一种 Rest API 的简单但强大的表示方式，标准的，语言无关，这种表示方式不但人可读，而且机器可读。可以作为 Rest API 的交互式文档，也可以作为 Rest API 的形式化的接口描述，生成客户端和服务端的代码。 --Swagger：Rest API的描述语言
定义了一套接口文档编写语法，然后可以自动生成接口文档。相关项目: Swagger Editor ，用于编写 API 文档。Swagger UI restful 接口文档在线自动生成与功能测试软件。点击查看Swagger-UI在线示例。
WireMock is a simulator for HTTP-based APIs. Some might consider it a service virtualization tool or a mock server. It supports testing of edge cases and failure modes that the real API won't reliably produce.
商业化方案
其他实践
总结
对于前后端分离开发方式，已经有比较成熟的 mock 平台，主要解决了2个问题：
后记
预研时间比较有限，有一些新的 mock 模式或优秀的 mock 平台没有覆盖到，欢迎补充。
笔者所在公司选用的平台是 RAP，后续会整理一篇 RAP 实践方面的文章。
问题来了：你开发中的 mock 方式是什么？
References
图解基于node.js实现前后端分离
TestDouble(介绍 mock 相关的概念)
There Are Four API Design Editors To Choose From Now
联调之痛--契约测试
Swagger：Rest API的描述语言
Swagger - 前后端分离后的契约
Swagger UI教程 API 文档神器 搭配Node使用
