前端mock數據使用yApi構建本地接口文檔

原文鏈接:https://dsx2016.com/?p=1114

公衆號:大師兄2016

yApi

官方文檔地址

https://hellosean1025.github.io/yapi/devops/index.html

yApi的特點:

  • 免費開源

  • 可視化本地部署和管理

  • 數據mock

  • 自動化接口測試

  • 權限管理

前端在後端開發完API前往往,需要mock數據,來校對樣式和交互.

但是後端的開發時間節點和數據內容往往不可控,無法有效並行開發.

數據mock

參考地址:

http://mockjs.com/

一種簡單的數據mock,是在代碼裏寫假數據,和業務代碼放在一些.

需要的時候調用,不需要的時候註釋,方便,可控,但是無法覆蓋真實的api場景,如慢網和報錯等.

如果上線前忘了還原和註釋掉,就是一場未知級別的災難.

其他常見的方案是mock.js第三方庫,在api層攔截.

在項目構建一份數據文件,把api返回的數據給替換按指定內容返回.

依然需要添加一些業務代碼,增大了項目體積,稍有提升,但是仍然不太符合實際場景,仍然是侵入式mock.

部署流程

下載mongodb

參考地址:

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

啓動mongodb

mongodb的安裝目錄下,點擊mongod.exe,啓動

可視化部署

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

 

確認賬戶

部署細節

 

部署成功

成功之後會提示如何啓動本地服務和當前的賬戶密碼

啓動服務

按照部署成功後的提示,啓動服務

登錄後臺

打開啓動的服務地址,輸入賬戶登錄

編輯API

按官方文檔操作即可

內網穿透

要想開發微信公衆號和其他需要域名的場景,需要內網穿透到代理域名,並且支持https

natapp官網:https://natapp.cn/

END.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章