当前位置: 首页 > Web前端 > vue.js

开源界面管理工具,基于Vue和Eelctron

时间:2023-04-01 10:58:59 vue.js

传送门GitHub地址Gitee地址完整文档前言【快乐摸鱼】是一款基于Vue和Electron的开源界面管理工具。当初搭建这个项目的时候,就是为了学习Node.js,解决前后端团队的协调问题。社区中有YApi、Rap2、Doclever、Nei、Swagger、Apidoc等开源方案,也有Postman、Eolinker、ApiPost等商业方案。在此之前,团队尝试了YApi、Rap2等社区解决方案,可以满足一些基本需求,但深入使用后,仍然存在一些影响效率的问题。当时使用这两个工具最大的问题是接口不能支持多级嵌套,有些项目如果接口太多会大大降低搜索效率。于是我尝试从零开始写一个接口管理工具。团队协作是一个非常核心的功能。在前后端分离的情况下,简单的团队管理策略将大大提高分工效率。我们将权限分为三类:只读、读写和管理员。只读:只允许用户查看文档(一般前端开发人员可以分配此角色)读写:允许对文档进行增删改查等(一般后端开发人员可以分配)这个角色)Administrator:除了读写之外,他们还可以添加或删除用户以上三个角色可以满足大部分的日常需求。在一些特殊情况下,你可能需要更细粒度的权限控制,例如:对于一个有读写权限的用户,你只希望他能编辑文档,但不希望他能导出所有文件。我们提供自定义角色功能,可以精确到每个接口和路由(一般情况下不用)。【权限管理】目录导航是一个非常核心的功能。设计一个方便易用的目录导航,可以大大提升入口体验。我们从其他开源项目问题中总结了一些常见的需求。支持无限层级嵌套支持拖放文件支持拖放目录支持单个或批量复制文件支持单个或多个复制目录同时,一些实用的功能也得到了扩展。单个目录下的文档超过10个会降低文档检索的效率。默认情况下,该工具将单个目录限制为仅8个文档。当然,您也可以自定义限制。由于目录导航空间有限,工具允许使用Ctrl+鼠标左键查看节点的附加信息【批量删除节点】【批量文档复制粘贴】Tab导航Tab导航是为了方便开发者之间的导航多接口开源产品之间的快速切换并不完美。我们在实践中总结了这些要求。顶部导航标签应与左侧目录导航链接。导航标签应该允许拖放。导航标签需要用鼠标右键操作。当文档发生变化时,导航标签需要有一个小圆点来提示导航标签标明请求类型大多数商业接口工具都有导航标签功能,但开源产品大多没有标签导航功能或功能完成度不高。人员只需使用一种工具即可完成界面调试和界面入口。但是由于浏览器本身的限制(同源策略),web端直接HTTP请求很可能会失败。以下是一些常见的解决方案。方案缺点:浏览器插件安装和cookie支持度不高。192.168这样的内网网段无法访问远程服务器代理转发。同源策略是一个很好的做法。同时,依托客户端强大的API,还可以完成很多web上无法完成的事情。当然,安装客户端也会给用户带来一些不便。目前主流商业项目大多采用client的形式为用户提供界面调试功能,部分工具甚至不提供web端使用。我们采用客户端的方式实现界面调试,同时保留了web端的功能。web端和client端除了不能使用接口调试和Mock功能外,其他功能没有区别。后续我们还会提供浏览器插件功能,方便用户在web端使用界面调试功能。我们总结了一些常见的接口调试需求支持常见的GET、POST、PUT、DELETE、OPTIONS、PATCH支持RESTFUL类型查询参数支持常见的MIME类型如x-www-form-urlencoded、multipart/form-data、json、xml、binary等multipart/form-data支持传输文件支持自定义headers支持发送cookies支持自定义变量支持格式化预览返回Value,json,text/html,image等类型的pre-operations,post-operationswebsocket[Non-JSON格式数据返回展示][json类型返回数据展示]接口入口接口的增删改查是整个接口工具的核心部分,常见的开源产品对请求参数的支持比较弱(Body)和多个返回参数。我们得出结论,在典型的业务场景下,接口入口应该包括以下几个核心模块。请求方法和请求URL输入接口标签输入请求参数(Params)/api/demo?id=3&name=lee请求参数(Path)/api/demo/{id}请求参数(Body)noneform-data(可以传文件)x-www-form-urlencoded(表单提交方式)application/jsontext/plain,text/plain,application/javascript,application/xml等MIME类型二进制请求头返回参数(通常可以添加多个返回参数)备注(富文本格式)草稿状态变量支持丰富的参数类型Number,Integer,String,Array,Object,File,Binary,Boolean,Null,Enum接口工具区分正文入口方法,目的是格式化某些类型的数据,这些数据是通过HTTPbody传输,程序通过header中的Content-Type来区分数据格式。【界面入口工作区】除了完善必要的界面模块外,工具在入口效率上也想了很多办法。我们从Yapi、Rap2等开源项目的issues中梳理出用户常见的输入需求。每个字段的录入都希望有补全功能参数模板功能json类型数据导入功能,并能自动补全备注。在发送模拟请求时,希望能够将真实的返回值应用到文档中。【json数据导入】【应用于文档的返回参数】导入功能目前市面上的接口工具种类繁多,在处理导入时主要存在以下问题。大多数接口工具没有严格的数据格式定义。目前的系统数据接口与第三方接口的兼容性不是很好。部分工具不提供可处理格式数据(JSON、YAML等)的导出功能openapi/swagger等规范细节非常丰富,需要处理很多类似openapi/swagger的逻辑规范,用户写的不严格不符合规范,导致导入错误,导入数据会有一些额外的配置要求(如:指定导出位置,指定导出数据量等)目前比较稳定,大家普遍认可specification是OpenAPI规范,很多商业工具都支持这个规范。postman等工具的市场占有率非常大,大多数工具也支持这种数据导入。我们收集了一些常用的接口工具,并列出了它们对导入的支持。文档类型支持备注Openapi/Swagger支持单个文件,支持3.0及以上版本,兼容常用语法规则,并提供长期支持。openpai规范有非常丰富的实现细节。工具会长期完善并兼容此规范,后续会提供多文件导入支持Postman支持2.1及以上版本,兼容常用语法规则,提供长期支持Yapi支持导入,兼容commongrammarrules开源社区非常知名的界面工具,可惜已经不再维护,我们提供迁移支持Rap2不支持准备支持ShowDoc,目前不支持Nei,目前不支持Docway,目前不支持支持ApiPost,暂不支持Eolinker,暂不支持ReadySupport针对一般的导入需求,我们扩展了部分功能,提高了部分项目的迁移效率。允许多个项目相互导出数据允许用户在导入时指定挂载目录【项目内相互导入】【附加导入数据配置】导出功能导出功能一方面方便用户共享文件与第三方用户,另一方面,它也提供了一定的迁移和备份能力。以下是一些常见的导出场景。导出格式是否支持笔记JSON(摸鱼格式)支持开心摸鱼.json,提供标准接口数据导出,方便用户备份或迁移到其他接口工具,支持指定内容导出HTML支持开心摸鱼.html,提供非常完整的预览功能支持,支持指定内容导出Markdown目前不支持备案支持PDF目前不支持备案支持有限Word支持基于officegen,缺少目录生成功能,样式丑陋OpenApi目前不支持备案支持可以使用openapi丰富的工具链生成在线链接支持在线链接(密码:111111),支持指定内容导出,分享给第三方时非常有用。由于HTML具有非常好的UI表现能力,我们在静态HTML上花费了很多精力。我们建议使用HTML作为首选的离线文档。【按需导出】回收站和日志功能日志功能是团队管理和安全操作中非常重要的一环。该工具详细记录了界面的每个步骤。删除单个文档删除单个目录批量删除节点编辑文档创建新文件夹创建新文件夹复制文档复制文档更改文档位置重命名导入导出权限更改除了基本记录外,该工具还提供一个非常丰富的搜索。在某些操作中,用户可能希望获得更详细的日志信息。例如,对于编辑文档,用户可能想知道具体更改了哪些内容。该工具目前对这方面的支持有限,未来会继续完善这方面的内容。[日志功能][回收站功能]界面预览工具区分界面进入和界面预览。界面录入的目的是实现高效录入,界面预览的目的是实现高效检索。与其他导出数据的工具不同,该工具在检索和预览方面做了一些优化。在实际项目开发过程中,联合调查员更关注某个人最近修改过的数据,通过过滤条件可以非常高效地进行数据检索。【支持丰富的过滤条件】相对于表格形式的json展示,下面的展示形式对开发者非常友好。[带备注的JSON显示][界面预览界面]可以使用Mock功能进行快速开发。和大多数接口工具一样,我们支持Mock.js语法,我们简化了整个mocking过程,不需要任何额外的工作Configuration。该工具会在本地启动一个Mock服务器,你可以简单地将此服务器作为后端服务器。由于浏览器限制,只有客户端可以启动Mock服务器自动化测试。不幸的是,目前还不支持这个功能,但我们已经开始开发这个非常重要的功能。二次开发&部署客户端技术栈VueElementUIElectron服务端技术栈Egg.jsMongoDB目前大部分开源接口工具只提供使用和部署文档,二次开发对用户来说会比较困难。为了延长项目的生命周期,吸引更多的开发者参与,我们将完善开发文档和产品设计思路作为最重要的开发工作之一。由于项目本身的复杂性,一份完整的开发文档会占用大量的打开时间,而且文档会有一定的滞后性。由于个人技术能力的限制,代码不能很优雅,但是态度还是端正的,必要的注释还是会写的很认真!【端正态度点评信息】产品设计思路总结、开发文档、部署文档来了。