丁香园开源接口管理系统

API Mocker

先贴上项目地址：DXY-F2E/api-mocker

随着web发展，前后端分离的演进，网页的交互变的越来越复杂。在项目开发过程中，前后端并行开发时，在涉及到接口的部分，总是遇到各类问题。诸如接口假数据、接口参数的约定、代理调试等等，极大的影响了开发效率。

API Mocker致力于解决前后端开发协作过程中出现的各类问题，提高开发效率，对接口做统一管理，同时也能为后续的迭代维护提供更便捷的方式。

系统功能

接口约定

API Mocker提供操作简单但功能丰富的接口编辑，接口约定者能方便的设置接口的各类信息，其中：

• 结构化的接口参数输入与输出

  • 支持不同维度的请求参数约定（query，body，path, header）
  • 支持参数的类型约定（string，number，boolean，object，array）
  • 参数备注、示例
• 支持Json数据逆向生成参数结构
• 保留一定接口历史记录

Mock数据

API Mocker认为，mock不仅仅体现在返回数据中，mock请求本身也应该符合接口约定。因此，我们提供更加符合业务场景的mock服务。

• Mock请求会根据接口约定，自动生成假数据。
• Mock请求会根据接口约定，对请求参数做校验。（校验是否选填、参数类型是否正确）。
• 根据接口约定与用户设置，能模拟不同的网络响应状态，如：200，404，500。
• 支持接口代理，代理mock请求到线上or测试地址，避免开发环境跨域，省下Charles代理过程。
• 支持Mock.js语法。

接口文档

API Mocker会根据接口约定自动生成简洁优美、结构清晰的接口文档。同时，可以订阅接口，当接口发送变化时，及时收到邮件通知。

接口权限

API Mocker提供简单易用的权限控制。

• 组级别、API级别控制
• 可见性、可写性权限控制

其他功能点

• 接口测试。开发人员可以在系统上直接测试接口，避免在postman等请求工具上又填写众多参数
• 便捷的接口搜索。（可以按接口地址、管理员等维度搜索接口）
• 数据呈现
• 支持rap的导入

技术栈与第三方库

• ES6
• ESLint (Standard)
• Ramda
• ...

Client

• Vue全家桶（vue + vuex + vue-router + webpack）
• ElementUI, Mock.js, etc...
• Less

架构图如下：

Server

• Egg, Koa
• MongoDB
• Mongoose

架构图如下：

其他部署相关内容可看项目github地址的介绍。

系统未来展望

更加强大的接口约定

• 更多校验属性的添加（日期、范围、正则）

• 更便捷的编辑

  • 模板选择
  • 组内接口字段智能提示
  • 完善restful api的支持
• 接口状态管理、版本管理

更完善的周边功能

• swagger导入
• markdown格式文档导出
• Model文件导出（TypeScript等）

• 自动化测试

  • 随机数据
  • 多次请求
  • 生成报表

其他完善的点

• 完善mock的体验
• 更多维度的数据统计
• 完善使用文档
• 国际化

致谢

项目本身也引用了众多开源项目，在此再次感谢这些项目对社会与技术圈作出的杰出贡献。丁香园也将努力、持续的做技术输出、产品输出，为开源社区做出自己的一份力量。

Github地址     API Mocker使用文档