Yapi接口管理工具[安装以及详细使用指南]

希望有一天大家都能在借鉴中创新

写在前面：本篇文章篇幅较大，前部分侧重Yapi的环境安装，后半部分介绍详细使用方式，如果侧重某部分的了解请自行选择浏览方式！！！！！

第一部分：环境搭建

随着前端技术的浪潮层起不断，前后端分离项目越来越多，接口管理以及规范的接口文档可以使得前后端调试流程更加省时省力。

重要的是：后端接口项目一般缺少优雅的接口管理工具，一旦项目完成年代久远或者是后续修改接口，文档丢失、接口更新不及时将成为一大难题。

省时省力的反之就是费时费力。。。。。。成为老大难项目。

因此我推荐工作环境中的同事使用这个接口管理工具，自己也部署了一套，实地使用了一下：不吹不黑，和apizza相比，开源软件做成这个样子就想说一句：大发了

页面预览：

因为linux的环境公司没有给我，所以我这里自己使用window装了一个。除了安装时命令区别，linux和window的安装环境基本上没有什么区别。

安装有两种方式，这里面我都会提到。因为考虑到大家如果要是在公司测试环境搭建这个，似乎基本上都是属于没有网络的情况，因此这里面我着重介绍一下离线安装：

安装包提前准备着：

mongodb（window or linux）—根据自己的使用环境有关

node 环境（window or linux） —根据自己的使用环境有关

YApi（离线安装需要准备的）

mongodb下载地址（网络导致的下载问题后面我会给分享链接）：

https://www.mongodb.com/download-center/community

一顿疯狂操作，安装之后启动mongodb。安装的时候不建议勾选安装compass，否则由于网络问题导致的安装失败将会浪费很多时间。

点击启动项目：

查看是否启动成功：

Yapi在线安装方式：

node环境安装完成之后，执行命令 npm intall yapi-cli -g

安装完成之后启动Yapi服务： yapi server

注意：在线安装的时候Yapi命令会有对应的配置页面，如果这里采用的是离线安装需要下载对应的安装文件，启动server/app.js即可：

下载地址

github.com/YMFE/yapi

在线安装启动yapi server之后可以看到提示：

提示的意思是服务启动就绪了，我们可以在浏览器中访问主机所在的ip加上执行的端口浏览配置页面：

点击部署，不出意外的话你可以看到提示页面

像牢记使命一样记住初始化密码，如果忘记了看看我这张图，反正初始化的密码都是这个！！！！！！！！！

成功之后部署的项目目录：

如果采用的是离线安装的方式，在其他环境具备的前提下，下载Yapi的安装包之后下面的操作就都是一样的了

启动yapi项目：

简单粗暴可以直接使用node启动项目：

node ./server/app.js

也许是觉得这种启动方式有点粗糙了，因此你可以选择安装pm2进行资源管理，如果是离线的话可以选择有网的机器安装好之后拷到对应的本地node_modules里面去，如果是linux的环境，那么记得配置profile或者配置ln -s 软连接

官方文档中也介绍了如何使用：

npm install pm2 -g  //安装pm2
cd  {项目目录}
pm2 start "vendors/server/app.js" --name yapi //pm2管理yapi服务
pm2 info yapi //查看服务信息
pm2 stop yapi //停止服务
pm2 restart yapi //重启服务

更新或者维护服务

cd  {项目目录}
yapi ls //查看版本号列表
yapi update //更新到最新版本
yapi update -v {Version} //更新到指定版本

资源管理的页面这里面展示一下，这样总会显得我的文章活力满满

启动之后，登陆用户进得去基本上就是没什么大问题了：

tips:如果你有足够的时间和学习能力，官方文档介绍的说明基本上很快就可以使用的通透，如果一些特殊操作不懂，你可以继续看我下面的文章。

官方介绍文档地址：

hellosean1025.github.io/yapi/documents/index.html

第二部分 Yai的使用

由于我这里面演示使用的是管理员账号，普通用户登录不可见操作可忽略！！！！

总览页面操作介绍

创建一个项目

添加一个接口

这里还是比较人性化的，可以看到接口有对应的状态，如果前后端都在这个平台可以实时看到接口的开发进度。

接口编辑设置：

至于预览编辑运行等，操作几遍就知道大致流程，高级Mock是需要时间去学习的

接口文档定义结束之后就可以使用mock地址进行请求访问，但是编写mock期望又是很浪费时间的一个操作，所以推荐文档写的详细点，如果对于前后端分离有严格流程或者前端比较擅长mock，主导权可以交给他们来。

数据管理

数据管理在这里面是没得说的，我这里面列举一下支持的导出种类：

导出：

html
markdown
swaggerApi.json
json

导入：

postMan
swagger
har
json

导入导出不仅可以消除跨平台导入的问题，有利于文档分享，还可以定时做备份和恢复，岂不是delicious。

环境配置：

环境列表：

一般都是定义为：

开发环境测试环境本地环境等

在接口调用的时候可以选择

global介绍

在global中可以定义全局的参数，举例说明。

使用测试环境中，每次都有一个token需要在请求的时候发送进去，但是每次拷贝到请求中显得十分麻烦，可以在此处定义参数的数值，在参数改变或者需要更新的时候只需要修改全局参数中的这个参数就可以使用，在接口参数中使用需要使用{
{global.name}}。截图详细说明：

为了实现这个请求，还可以使用其他的方式实现，这个还是需要看一下官方的文档才能写的出来的，有点小难度：

——————————————————————————————————————

———————————————重点来了—————————————

问题：

请求的时候每次都需要在header中传入一个token数据，但是token不需要每次都用，只需要在失效的时候刷新就行了，如果设置成每次都更改global中的参数，还是需要隔一段时间之后就进行更新操作。

解决：

token失效的时候每次都会返回403，因此这里判断返回状态如果是403的时候重新请求登录操作获取token的数据，然后每次请求的时候都塞到header中既可以解决。

一些请求参数和返回参数都能在context中找到，代码脚本如下（代码隶属个人风格，仅供参考）

preview

/*请求执行之前使用脚本控制*/
var token = storage.getItem("T-Authorization");
context.requestHeader['T-Authorization'] = token;

/*请求结束之后使用脚本控制*/
var requestPath = context.pathname
var statusCode = context.responseStatus
var token = storage.getItem("T-Authorization");

if (403 == statusCode) {
    
    const api = context.utils.axios.post('http://127.0.0.1:10001/bjDemographics/auth/getToken?account=admin&password=21232f297a57a5a743894a0e4a801fc3'
        );
    api.then((resp) => {
        var codeResult = resp.status
        if (codeResult == 200) {
            var token = resp.data.obj.token
            storage.setItem("T-Authorization", token)
            console.log(token)
        } else {
            console.error("请检查鉴权接口是否正常");
        }
    });

如有兴趣或问题欢迎关注：

公众号—码农的技术分享

知乎—曦曦春风