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("請檢查鑑權接口是否正常");
        }
    });

如有興趣或問題歡迎關注:

公衆號---碼農的技術分享

知 乎---曦曦春風

 

發佈了87 篇原創文章 · 獲贊 17 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章