背景

在前后端分離項(xiàng)目開發(fā)前期，為了項(xiàng)目能夠并行進(jìn)而縮短開發(fā)周期，前端項(xiàng)目經(jīng)常需要自己mock一些數(shù)據(jù)供項(xiàng)目使用。目前常見且較合理的做法是直接使用第三方平臺(tái)或者基于開源的項(xiàng)目搭建自己的mock服務(wù)平臺(tái)，另一種簡單粗暴的方式就是直接在項(xiàng)目里根據(jù)需求硬編碼數(shù)據(jù)。上述兩種方式，前一種外部依賴較重，后一種后續(xù)切換真實(shí)接口時(shí)成本高，硬編碼的數(shù)據(jù)復(fù)用性也較低。基于上述兩點(diǎn)原因,教大家是用一款輕量、無依賴、簡單、靈活的vscode mock插件amock。

文檔 :https://github.com/gamedilong/amock

使用方法

• 安裝Amock Server插件: 在vscode 插件搜索窗口搜索 amock 然后按裝即可.

• 配置 AMock 服務(wù):當(dāng)打開你的項(xiàng)目時(shí) ,該插件會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的.amock 文件夾 和 ./amock/setting.json文件在當(dāng)前workpace. Setting.json 是服務(wù)配置項(xiàng), 可以按需設(shè)置。
• 配置 AMock 單元: 你可以.amock 文件夾下新增Amock配置. Amock 單元配置文件名必須按該規(guī)則命名(否則啟動(dòng)服務(wù)時(shí)不會(huì)檢測該配置) *.amock.js.

• 啟動(dòng) AMock 服務(wù): 在VS Code的explorer最下方找到點(diǎn)擊AMock項(xiàng), 然后點(diǎn)擊啟動(dòng)服務(wù)按鈕 啟動(dòng)。當(dāng)Amock output控制臺(tái)啟動(dòng)成功，即可開始使用。可直接在 前端工程使用 或者用瀏覽器 or postman等接口測試工具測試.

• 重載 Amock 服務(wù): 當(dāng)你修改或者保存 settings.json or *.amock.js 文件. 可以在VS Code的exploer最下方的AMock項(xiàng)點(diǎn)擊重載按鈕，使修改生效

#前端##GitHub##架構(gòu)# #app#

總結(jié)

以上是生活随笔為你收集整理的前端打印第三方插件_vscode mock服务插件amock教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。