API管理之YApi实现前后端高度分离

全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11972789.html,多谢,=。=~

背景描述

??前后端分离已成为互联网项目开发的业界标准使用方式,有效解耦使得后端一套接口可以同时提供给 web端和移动端使用,大大提高了开发效率。但与此同时,也带来了前端UI依赖后端数据的问题,在后端接口没有开发完成之前,前端需要根据定义的接口规范模拟数据。这个问题看似简单,但实际上在开发过程中,会是一个比较头疼的问题。

现状分析

??现今在不使用API管理工具的前提下,基于前端的解决方案主要是在业务代码里先根据接口定义写一套模拟数据,或者基于Mockjs通过拦截XHR的方式实现。而基于后端的解决方案主要是先写一套测试数据的接口,提供给前端调用,等接口开发完成之后,再进行切换。上述解决方案存在以下问题:

1. 影响实际的业务代码(原逻辑代码与模拟数据代码的注释切换);
2. 后端接口数据结构变动,更新滞后(无法及时反馈给前端开发者);
3.不易模拟复杂情况(如接口响应时间,类型繁多的数据字段:邮箱、手机号等);
4.不易模拟特殊情况(如数据出错、数据为空的情况);
5. 模拟数据无法复用(项目发布后接口模拟数据无记录,后续即使遇到相同接口也无法复用);

API管理工具对比

??针对上述现状,API管理工具相继出现,一方面起到链接前后端开发人员的作用,另一方面也可以作为传统的接口文档使用,且比文档的实时性更强。由于接口管理需求各有不同,导致API管理工具功能各不相同,下面根据我们的需求提取8个关键特征对常见接口管理工具进行横向对比:

YApi Rap Nei eolinker Paw Postman Easy-Mock
文档管理 ×
Mock × ×
接口调试 × ×
自动化测试 × × ×
插件机制 × × × × × ×
开源 × × × × ×
本地部署 × ×
学习成本低

1、RAP是我们在使用YApi之前的接口管理工具,由阿里妈妈 MUX 团队于2013年推出。具备接口管理的常用功能,但不支持接口测试,其中常用功能由我们二次开发实现,维护成本高。可以实现数据Mock,但功能单一,需自行撰写模拟代码,操作不便,该功能基本闲置。

2、Nei是网易前端事业部的产品,专注做 saas 服务,功能全面,但没有开源版本,也不支持本地部署,出于安全考虑我们不会把公司机密的接口数据放到第三方平台。

3、eolinker是银云信息科技的一款产品,与我们的需求匹配度高,但致力于在线API接口管理服务供应。功能按免费版和收费版区分,在安全问题上与Nei存在同样问题。

4、PawPostman类似,主要用于后端接口测试。Paw仅支持Mac平台,存在平台局限性。在文档管理上虽然可以通过导出导入共享,但时效性差,存在更新不及时的问题。对于前端急需的response数据mock功能不支持。

5、Easy-Mock是大搜车无线团队的产品,其定位是接口数据的模拟,解决前端依赖后端接口数据的问题,在同类产品中 mock 服务做得比较好,但功能单一,无法满足我们现在的需求。

??通过一系列对比,最终选择Yapi作为我们的接口管理工具。YApi是由去哪网前端团队开源的一款接口管理工具,功能强大,可以轻松内网部署。同时支持docker部署,使用成本低,安全性能高。

功能描述

权限管理

由于接口管理操作频繁,传统的金字塔管理模式中层层审批严重影响开发效率,所以YApi 采用扁平化管理模式,其中超级管理员拥有最高权限,并将权限分配给若干组长(包括分组组长和项目组长),未被加入分组和项目的用户称为游客。权限一览表如下:


API管理之YApi实现前后端高度分离

项目管理

创建分组后,可在分组中新建项目。


接口

接口列表:进行接口管理;
测试集合:测试用例管理,方便后续进行自动化测试,自动化测试过程可参见下图流程;

API管理之YApi实现前后端高度分离

动态

查看该项目下接口的变更动态,可以具体到变更人、变更时间、变更接口、变更操作(改动详情);

成员管理

控制成员的新增、删除、邮件接收、角色权限

数据管理

支持数据的导入导出,目前数据导入格式支持:Postman、HAR、Swagger、json;导出格式支持:html、markdown、json、swaggerjson。

设置

项目配置:项目基本信息配置,这里可以总控是否开启项目中接口变动的邮件通知;
环境配置:配置项目接口测试的后端环境,支持添加多个环境;
请求配置:可以通过自定义 js 脚本方式改变请求的参数和返回的 response 数据;
token配置:每个项目都有唯一的标识 token,用户可以使用这个 token 值来请求 openapi;
全局mock脚本:方便用户在项目层面上全局设置公共的mock数据,例如全局接口返回code:0;

Wiki

项目描述信息

项目管理界面如下:

API管理之YApi实现前后端高度分离

接口管理

创建项目后,可在项目中新建接口。


预览

查看接口信息(包括基本信息、请求参数、返回数据)

编辑

接口管理的主体,用于请求参数和返回数据的设置与可视化mock,支持常用数据类型string、number、array、object、boolean、integer的模拟,其中字段业务类型支持47种,例如@image、@url、@id、@datetime、@email、@province等。
还可对字段进行高级配置,包括默认值、长度控制、大小控制、正则过滤、枚举等。

运行

针对单个接口的个性化测试,可将测试配置保存至测试集合。

高级Mock

Mock 期望根据设置的请求过滤规则,返回期望数据;
自定义 Mock 脚本可以根据用户请求的参数修改返回内容;

接口管理界面如下:

API管理之YApi实现前后端高度分离

内网部署

环境要求

1、nodejs(7.6+)
2、mongodb(2.6+)
3、git

本机环境如下:

API管理之YApi实现前后端高度分离

安装yapi-cli

yapi-cli工具可视化部署:

npm install -g yapi-cli --registry https://registry.npm.taobao.org

API管理之YApi实现前后端高度分离

可视化部署yapi

启动可视化部署程序:

yapi server

API管理之YApi实现前后端高度分离

API管理之YApi实现前后端高度分离

API管理之YApi实现前后端高度分离

内网邮箱配置

内网邮箱配置如下(config.json):

API管理之YApi实现前后端高度分离

变更邮件通知如下:

API管理之YApi实现前后端高度分离

总结

??本文首先就前后端分离开发现状存在的问题进行分析,表明其中亟待解决的问题点并引出API管理工具使用的重要性。其次,提取我们需求中的特征点对目前常用API管理工具进行了横向对比,表明Yapi选型的缘由。随后对YApi常用功能点进行描述,总结了各个功能模块的主要作用。最后提供了详细的内网部署方案以及邮箱配置教程。

参考资料

YApi官方教程:https://yapi.ymfe.org/documents/index.html
YApi git地址:https://github.com/ymfe/yapi

API管理之YApi实现前后端高度分离

上一篇:RTSP播放器高起播低延时RTSP网页无插件流媒体播放器EasyPlayer-RTSP代码解析(C#版)


下一篇:安装linux windows双系统