丁香园开源接口管理系统

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使用文档