关于restful:开源接口管理工具基于Vue和Eelctron

传送门

GitHub 地址
Gitee 地址
残缺文档

前言

【高兴摸鱼】是一款基于 Vue 和 Electron 的开源接口管理工具。
最后构建这个我的项目的时候是为了学习 Node.js 和解决团队前后端协调问题。社区中有 YApi、Rap2、Doclever、Nei、Swagger、Apidoc 等开源解决方案，同时也存在 Postman、Eolinker、ApiPost 等商业解决方案。
​

在这之前团队尝试了 YApi 和 Rap2 等社区计划，他们可能满足一些根本的需要，然而在深刻应用当前，还是呈现了一些影响效率的问题。过后应用这两个工具最大的问题就是接口无奈反对多级嵌套，某些我的项目接口多了当前会导致检索效率大大降低。于是尝试从头开始写一款接口管理工具。
​

团队合作

​

十分外围的一个性能，在前后端拆散状况下，一套简洁的团队管理策略会大大提高分工效率。咱们将权限分为 只读、读写、管理员三类。

• 只读：只容许用户查看文档(个别能够给前端开发人员赋予这个角色)
• 读写：容许对文档进行增删改查等(个别能够给后端开发人员赋予这个角色)
• 管理员：除了读写以外还能够减少或者删除用户

​

下面的三种角色能够满足大部分日常应用需要。在一些非凡状况下你可能须要更加细粒度的权限管制，比方：领有读写权限的用户你只心愿他能编辑文档，但不心愿他能导出全副文档。咱们提供了自定义角色性能，能够准确到每一个接口和路由(个别状况下用不到)。
​

【权限治理】
​

目录导航

​

十分外围的一个性能，设计一个不便并且易使用的目录导航可能大大加强录入体验。咱们从其余开源我的项目 issue 中总结了一些常见需要。

• 反对有限级别嵌套
• 反对拖拽文件
• 反对拖拽目录
• 反对单个或者批量拷贝文件
• 反对单个或者多个拷贝目录
• 反对一些右键菜单
• 可能批量删除
• 导航栏接口要与目录联动开展

​

工具实现了下面的全副性能，同时也扩大了一些实用的性能。

• 单个目录上面领有超过 10 个文档会升高文档检索效率，默认状况下工具限度单个目录只容许 8 个文档存在，当然也容许你自定义限度个数。
• 因为目录导航空间无限，工具容许你应用 Ctrl + 鼠标左键 来查看节点的额定信息

【批量删除节点​】
​

【批量文档复制粘贴】

​

标签导航

​

标签导航是为了不便开发人员在多个接口之间疾速切换，开源的产品这块做的并不是很欠缺，咱们在实践中总结了这些需要。

• 顶部导航标签要与左侧目录导航一起联动
• 导航标签要容许拖拽
• 导航标签须要鼠标右键操作
• 在文档产生变动的时候导航标签须要有小圆点提醒
• 导航标签须要标注申请类型

​

大部分商用的接口工具都具备导航标签性能，然而开源产品这块大都不具备标签导航性能或者性能完成度不高

【导航栏相干操作】
​

接口调试(模仿申请)

​

大部分的接口工具都会内置接口调试性能，这样开发人员只须要应用一个工具就能实现接口调试和接口录入。不过因为浏览器自身的限度(同源策略)，间接在 web 端发动 HTTP 申请大概率会失败。这里列举了一些常见的解决方案。

从技术上来说，应用客户端来躲避同源策略是一种比拟好的实际，同时依靠客户端弱小的 api 还能实现很多 web 端无奈实现的事件，当然装置客户端也会给用户带来一些不不便。目前支流的商业我的项目大都采纳客户端的模式来为用户提供接口调试性能，局部工具甚至不提供 web 端的应用。咱们采纳了客户端的形式来实现接口调试，同时也保留了 web 端的应用性能，除了接口调试和 Mock 性能无奈应用外，web 端和客户端在性能上没有其余区别。咱们也会在将来提供浏览器插件性能，这样用户就能够在 web 端应用接口调试性能了
​

咱们总结一些常见的接口调试需要

• 反对常见的 GET、POST、PUT、DELETE、OPTIONS、PATCH
• 反对 RESTFUL 类型查问参数
• 反对 x-www-form-urlencoded、multipart/form-data、json、xml、binary 等常见 MIME 类型
• multipart/form-data 反对传递文件
• 反对自定义 Header
• 反对发送 Cookie
• 反对自定义变量
• 反对格式化的预览返回值，json，text/html，image 等类型
• 前置操作，后置操作
• websocket

​

【非 JSON 类型格局数据返回展现】
​

【json 类型返回数据展现】
​

接口录入

​

对接口的增删改查是整个接口工具最外围的局部，常见的开源产品对 申请参数(Body)，多个返回参数方面反对比拟弱。咱们总结了在典型业务场景下，接口录入应该蕴含以下外围模块。

• 申请办法和申请 URL 录入
• 接口标签录入
• 申请参数(Params) /api/demo?id=3&name=lee
• 申请参数(Path) /api/demo/{id}

• 申请参数(Body)

  • none
  • form-data(能够传文件)
  • x-www-form-urlencoded(表单提交形式)
  • application/json
  • text/plain、text/plain、application/javascript、application/xml 等 MIME 类型
  • binary
• 申请头
• 返回参数(通常来说能够增加多个返回参数)
• 备注信息(富文本格式)
• 草稿状态
• 变量反对

• 反对丰盛的参数类型 Number、Integer、String、Array、Object、File、Binary、Boolean、Null、Enum

  接口工具辨别 body 录入形式，目标是对某些特定类型数据进行格式化解决，这些数据都通过 HTTP body 传输，程序通过 header 外面的 Content-Type 辨别数据格式。

【接口录入工作区】
​

除了欠缺必要的接口模块，工具还在录入效率方面想了很多方法。咱们从 Yapi、Rap2 等开源我的项目 issue 中整顿用户常见的录入需要。

• 每个字段的录入都心愿存在补全性能
• 参数模板性能
• json 类型数据导入性能，并且能主动补全备注
• 发送模仿申请时，心愿能将实在返回值利用于文档

【字段快捷补全】

【参数模板】

【json 数据导入】

【返回参数利用于文档】
​

导入性能

​

目前市面上接口工具总类繁多，在解决导入的时候会有以下几个次要问题。

• 大部分接口工具并没有严格的数据格式定义
• 以后零碎数据接口并不能很好的和第三方接口兼容
• 局部工具不提供可解决格局数据 (JSON，YAML 等) 导出性能
• openapi/swagger 这类标准细节十分丰盛，须要解决大量逻辑
• openapi/swagger 这类标准，用户未能严格依照标准书写导致导入出错
• 导入数据会有一些额定的配置需要(eg: 指定导出地位，指定导出数据量等)

​

目前比较稳定和被广泛认可的标准是 OpenAPI 标准，很多商业化的工具都是反对这种标准的。postman 这类工具领有十分大的市场占有率，大部分工具也都反对这种类型数据导入。咱们收集了一些罕用的接口工具，并且列出了工具对导入的反对状况。

在惯例导入需要下面，咱们扩大了一些性能，进步了局部我的项目内迁徙效率。

• 容许多个我的项目之间相互导出数据
• 容许用户指定导入时候挂载目录

【我的项目内相互导入】
​

​

【额定导入数据配置】
​

导出性能

​

导出性能一方面是不便用户分享文档给第三方用户，另一方面也提供了肯定的迁徙和备份能力。上面是一些常见的导出场景

因为 HTML 领有十分不错的 UI 体现能力，咱们破费了相当多的精力在动态 HTML 上。咱们举荐应用 HTML 作为首选的离线文档。

​

【按需导出】
​

回收站和日志性能

​

日志性能是团队治理和平安操作中十分重要的一环，工具对接口的每一步操作都做具体记录。

• 删除单个文档
• 删除单个目录
• 批量删除节点
• 编辑文档
• 新建文档
• 新建文件夹
• 复制文档
• 生成文档正本
• 扭转文档地位
• 重命名
• 导入导出
• 权限扭转

除了根本的记录以外，工具也提供十分丰盛的检索。在某些操作下面用户可能心愿获取更加具体的日志信息，例如：对于编辑文档，用户可能更心愿晓得具体扭转了哪些内容。工具目前在这方面的反对度无限，将来会持续欠缺这块内容。

【日志性能】
​

【回收站性能】

接口预览

工具辨别 接口录入 和接口预览 两个状态，接口录入的目标是达到高效录入，接口预览的目标是达到高效检索。和其余工具导出数据不同，工具在检索和预览方面做了一些优化。
​

在理论我的项目开发的时候，联调人员更关怀某某人批改的最近几条数据，通过过滤条件可能十分高效的进行数据检索。

【反对丰盛的过滤条件】

绝对于表格模式的 json 展现，上面这种出现模式对开发人员来说是十分敌对的。

【带备注信息的 json 展现】

【接口预览界面】
​

Mock 性能

能够应用 Mock 性能来进行疾速开发，和大部分接口工具一样咱们反对 Mock.js 语法，同时咱们简化了整个 mock 过程你无需做任何额定的配置。工具会在本地启动一个 Mock 服务器，你能够简略的把这个服务器当作后端的服务器。

受浏览器限度，仅客户端能够启动 Mock 服务器

自动化测试

十分遗憾，目前还不反对这个性能，不过咱们曾经开始开发这个十分重要的性能了。

二次开发 & 部署

客户端技术栈

• Vue
• ElementUI
• Electron

服务端技术栈

• Egg.js
• MongoDB

​

目前开源类的接口工具大都只提供应用以及部署文档，二次开发对于用户来说会比拟艰难。为了缩短我的项目寿命，同时也为了吸引更多开发者参加，咱们把欠缺 开发文档 和产品设计思路 作为了最重要的开发工作之一。因为我的项目自身的复杂性，欠缺的开发文档将会占据大量的凋谢工夫，文档会有肯定的滞后性。
​

因为集体技术能力限度，代码无奈做到十分优雅，然而态度还算端正，该有的正文还是会十分认真的写！

【态度端正的正文信息】

产品设计思路

开发文档

部署文档

总结

咱们心愿给正在寻找接口管理工具的用户多提供一种抉择，同时也不断完善产品设计和开发文档，心愿吸引更多的人参加到我的项目中来。

​