search

youngjuning / issues

一寸欢喜 - 怕什么真理无穷，进一寸有一寸的欢喜
https://youngjuning.js.org
44 stars 4 forks source link

Mock入门指北 #189

Closed youngjuning closed 10 months ago

youngjuning commented 5 years ago

一、背景

1.1 前后端分离

前后端分离后, 大家从此进入了所谓的并行开发时代. 一旦完成前后端的(边界)分工, 大家就可以各司其职了。

前端在与后端交互时, 要想有效地提高工作效率, 后端的接口文档就是重中之重了。

1.2 只有接口文档不如没有

所谓的接口文档, 即一份数据的契约书. 前端的所有逻辑和展现全部依赖接口文档中规定的数据结构。

但是光有接口文档不足以提升前端的开发效率, 因为前端开发时, 必须调用实实在在的接口和数据才能看到结果, 尽早跑通所有的前端流程, 这才是效率的根本。

对于后端来说手动维护接口文档，短期内对项目的推进弊大于利，甚至会拖慢进度。

在前后端并行开发的时代, 前端开发时, 后端也才开发, 接口还没有开发完, 后端拿什么给前端调用。

那么问题来了, 我们怎么做一份能够调用的接口文档呢?

1.3 假数据时代

前端不可以傻傻地等后端接口开发完, 才开始做前端的逻辑, 因此我们习惯了做假的接口数据, 让前端工作可以顺利地进行下去, 加快开发进度。

原始的静态数据文件

例如将 mock-data.json 放在项目的根目录, 直接通过 ajax 调用即可。

这种方式弊端很大：

如果项目的接口较少维护起来还比较容易，但是一旦涉及到数十个接口的调用，我们就需要在项目里写新建许多个json 文件，如果恰好后端接口的路径又比较长的话，那项目目录将会十分的混乱。就算文件很少，那么文件里面就几条死的数据, 肯定做不到随机变化. 假如前端需要看 100 条数据的结果呢? 你是复制粘帖 100 次吗?

除此之外，通常情况下接口并不一定就会以 json 结尾（后端同学也许并不会听你解释。。） 如果按照RESTFUL的格式书写，比如"api/zoos/animals"，那么我们需要准备书写两套调用接口代码，一种以json格式结尾作为本地mock，另一套才是线上接口代码,每次build构建代码时，一定得记得将调用接口的地方改为线上代码。这种做法效率太低了!!!

Mock.js

因为 Mock.js 可以拦截前端的 ajax 请求, 因此我只要在开发时按照接口文档给出的接口和数据, 让 Mock.js 去拦截接口并提供随机的假数据即可, 例如实现一个开发时用的 mock-api.js。

这种方式弊端也不小：

当后端接口开发完成后, 去掉 mock-api.js, 即可切换到后端接口, 前端代码不需要做任何修改。

在前端使用 Mock.js 是可以造出一个"假的接口", 还可以配置出随机数据, 但毕竟不是真正的后端接口, 还需要在前端引用一段定义假接口的代码(例如 mock-api.js), 势必会造成管理上的问题. 想一想如果有 20, 30 个页面都要引用了 mock-api.js, 后端接口完成后, 你千万得记得将 mock-api.js从这些页面中去掉, 是不是觉得有点累赘, 不够智能啊。

看来是时候自己写一个 mock server 来提供假接口假数据了, 为前端提供像模像样的假后端接口。

1.4 mock server 才是未来

什么是Mock Server ?

专门实现 mock 功能的一个服务。

Mock Server的作用？

现今的业务系统很少有孤立存在的，它们或多或少需要使用兄弟团队或是其他公司提供的服务，这给我们的联调和测试造成了麻烦。对于这种情况，我们常见的解决方案是搭建一个临时的server，模拟那些服务，提供数据进行联调和测试。这就是 mock server 出现原因。

下图很好的解释了Mock Server 位置和作用：

youngjuning commented 5 years ago

二、mock库

youngjuning commented 5 years ago

三、API 描述语言规范

3.1 swagger GitHub stars

Swagger是一种Rest API的 简单但强大的表示方式，标准的，语言无关，这种 表示方式不但人可读，而且机器可读。 可以作为Rest API的交互式文档，也可以作为Rest API的形式化的接口描述，生成客户端和服务端的代码。

为什么用swagger

配套工具

参考资源

3.2 api-blueprint GitHub stars

如果你正在使用 markdown 来编写 api 文档的话，API Blueprint 一定会成为你的更好的选择。

API Blueprint 是一套基于 markdown 的 API 描述语言规范，如果你按照它的规范来编写你的 API 文档的话，你就可以享受到配套的工具服务了。

为什么不用api-blueprint

配套工具

参考资源

youngjuning commented 5 years ago

四、Mock Server

4.1 easy-mockGitHub stars

Easy Mock 是一个可视化，并且能快速生成模拟数据的持久化服务。支持中文文档，基于 Node.js、MongoDB、Redis 搭建。

特性

4.2 rap2-delos GitHub stars

RAPGitHub stars

阿里妈妈MUX团队出品！阿里巴巴都在用！1000+公司的选择！阿里妈妈前端团队出品的开源接口管理工具RAP第二代http://rap2.taobao.org

RAP通过GUI工具帮助WEB工程师更高效的管理接口文档，同时通过分析接口结构自动生成Mock数据、校验真实接口的正确性，使接口文档成为开发流程中的强依赖。有了结构化的API数据，RAP可以做的更多，而我们可以避免更多重复劳动。

img

特性

4.4 yapi GitHub stars

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。

特性

4.3 其他

youngjuning commented 5 years ago

五、预选方案

5.1 rap2-delos GitHub stars

其实这个库第一个版本RAPGitHub stars 9k 的星星。阿里的库总喜欢迁移库

官方测试地址：http://rap2.taobao.org/

参考资源

5.2 easy-mock GitHub stars

官方测试地址：https://easy-mock.com/

参考资源

5.3 yapi GitHub stars 去哪开发

参考资源

youngjuning commented 5 years ago

参考资源

youngjuning commented 5 years ago

191

youngjuning commented 5 years ago

杂文