百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

【Linux】搭建Yapi接口管理工具(yapi接口测试的流程和步骤)

myzbx 2025-03-29 19:55 34 浏览

在年前员工访谈时发现,前后端协作开发会出现一定的内耗现象,在当前前后端分离的情况下前端往往会因为后端接口存在问题影响对接速度,在接口设计不明确的情况下还需要反复确认和沟通。公司过往使用ApiManager做接口信息归档,然而ApiManager无法做到在线调试和验证。在经过一段时间调研后最终选择了Yapi作为ApiManager的后继者(说白了又不想花钱,又要功能齐全的话开源的Yapi不失为一个比较理想的解决方案)。

那为什么不直接在项目中使用SwaggerUI呢?随项目启动且不用额外编写接口信息,通过注解就直接解决大部分文字注释的问题,并且可以直接对项目进行调试非常方便。

首先并不是SwaggerUI不好用,这边主要考虑的点有几个:

  1. Swagger是非必要依赖,整合它不会在性能上给到项目提升,反而会在加载的时候给额外分配资源(AutoConfigure会加载),在生产环境上是没有必要的;
  2. 接口信息不能随意暴露出来,譬如现在在测试环境有个项目整合了Swagger,而这个项目由于需要演示进行了外部映射,这个时候外网就能够扫描到Swagger的页面和接口地址,从而增加了运维面临的风险,同理生产环境下也是如此。当然了,在生产的环境下把Swagger做成配置型开启和关闭就可以了。是的,这样做是可以的,但是这样集成它又何苦呢;
  3. 接口信息属于项目组织过程资产的一部分,你项目停了就不能看了,也不能归档了?
  4. 一般代码中是不建议写中文的,这个看过编码规范的都知道;

...除了这些还有很多很多,就不一一举证了。

但是在搭建Yapi的过程中也不是一帆风顺的(按照网上提供的搭建文章来一步一步做还是没有办法完整整合插件,最后只能靠猜给搞定了),下面就讲讲这个Yapi是如何搭建的。

首先为了方便我这边下载MongoDB的Docker镜像并部署:

docker pull mongo:latest

创建挂载目录并启动mongodb

mkdir -p /data/docker/mongodb
docker run -p 27017:27017 -name mongodb -v /data/docker/mongodb:/data/db -d mongo:latest

这样就可以了,先不用初始化mongodb因为后面cli安装时会初始化的。接着就安装nodejs和npm,这个比较简单就不详说了。在安装好nodejs之后就可以通过命令安装yapi

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

到此之外的安装都比较顺利,但是要注意安装后的yapi-cli执行文件是否有创建软连接到/usr/bin目录下,如果没有的话自己通过ln -s创建两个软连接到/usr/bin目录底下,一个命名为yapi,另一个命名为yapi-cli。接下来就可以通过yapi server启动初始化界面。接着就可以通过访问
http://xxx.xxx.xxx.xxx:9090就能够访问到部署页面,如下图:

到了这个环节就可以按照界面提示进行配置。在完成平台部署后先找到安装目录,并通过以下命令启动Yapi:

nohup node vendors/server/app.js &

之后就能够通过
http://xxx.xxx.xxx.xxx:3000访问到Yapi页面了。如下图:

登录账号是“管理员邮箱”,密码初始化为ymfe.org.自此Yapi算是搭建ok了,但是真正困难的来了。

由于管理系统一般都需要登录后访问,为的是拿到一个token信息。而接口调试时为了尽可能贴近真实场景也需要先获取token后再触发接口请求,因此每一次都需要重复“先登录,拷贝token,粘贴到接口header,再触发接口”是非常麻烦。因此需要在Yapi中安装一个插件使其在每一次请求前都先自动获取token,那就不用人手去“复制、粘贴”了。

还好为了解决这个问题yapi提供了一个
yapi-plugin-interface-oauth2-token的插件,如下图:

本想按照npm官网提示去做,结果还出现的各种报错。根据上图中版本描述所说,最新的插件版本在2020年10月,也就是说近1年多2年没有更新了。在使用

yapi plugin --name yapi-plugin-interface-oauth2-token

命令安装时先是报node-sass组件“访问权限不足”的问题,接着在命令前面加上sudo后又引发了新的问题......
通过npm rebuild node-sass后还是出现错误。在经过sudo npm audit fix修复后接着就尝试修改
yapi-plugin-interface-oauth2-token的版本为1.2.3(因为npm官网说如果用yapi plugin升级不行就将
yapi-plugin-interface-oauth2-token降级为1.2.3之后删除node_modules文件夹重新npm install)结果还是不行。

多次尝试无果后我就想会不会是我yapi的版本太高而插件的版本太低导致的,结果将yapi版本换为1.9.2(2022年5月版本),在安装完yapi之后再尝试进行插件的整合,结果还是报各种异常。

最终还是用回yapi和插件的最新版本,虽然结果跟第一次一样,如下图:

但是根据这个编译结果还是看出了点端倪,于是我对源码进行了修改,先是componentWillMount替换成UNSAFE_componentWillMount,再将componentWillReceiveProps替换成
UNSAFE_componentWillReceiveProps,全部替换后重新进行插件安装基本上所有的编译问题都已经解决了,就还剩下

Module parse failed: /data/yapi/vendors/node_modules/swagger-client/lib/resolver.js Unexpected token (119:38)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (119:38)

这个问题。经过排查发现这个是因为swagger-client未能固定好版本引起的,于是修改了package.json中有关swagger-client的版本信息固定其为3.5.1版本后再尝试安装插件,结果就编译成功了。如下图:

编译成功后进入到yapi目录重新通过node vendors/server/app.js启动程序后就会发现在设置中多了个tab,如下图:

至此插件安装和yapi安装都完成了。

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...