先後端分離
的項目開發前期,爲了項目可以並行進而縮短開發週期,前端項目常常須要本身mock一些數據供項目使用。目前常見且較合理的作法是直接使用第三方平臺或者基於開源的項目搭建本身的mock服務平臺,另外一種簡單粗暴的方式就是直接在項目里根據需求硬編碼數據。上述兩種方式,前一種外部依賴較重,後一種後續切換真實接口時成本高,硬編碼的數據複用性也較低。基於上述兩點緣由,在此給你們推薦一款輕量、無依賴、簡單、靈活的vscode mock插件項目github。安裝Amock Server插件
*: 在vscode 插件搜索窗口搜索 amock
而後按裝便可.配置 AMock 服務
:當打開你的項目時 ,該插件會自動建立一個默認的.amock
文件夾 和 ./amock/setting.json
文件在當前workpace. Setting.json
是服務配置項, 能夠按需設置。配置 AMock 單元
: 你能夠.amock
文件夾下新增Amock配置. Amock 單元配置文件名必須按該規則命名(不然啓動服務時不會檢測該配置) *.amock.js
.啓動 AMock 服務
: 在VS Code的explorer最下方找到點擊AMock項, 而後點擊啓動服務按鈕 啓動。當Amock output控制檯啓動成功,便可開始使用。可直接在 前端工程
使用 或者用瀏覽器
or postman
等接口測試工具測試.
重載 Amock 服務
: 當你修改或者保存 settings.json or *.amock.js 文件. 能夠在VS Code的exploer最下方的AMock項點擊重載
按鈕,使修改生效settgin.json
:html
{
name:"servername",
port:3000 // default port 3000
}
複製代碼
*.amock.js
: 配置內容格式以下前端
amock(unit| unit[], options?)
複製代碼
amock(unit[],options) 示例github
prop | type | desc | required |
---|---|---|---|
path | string | 請求路徑 | true |
method | string | 支持方式有 'all','delete','get','put','post'. 默認 'all' | false |
response | object | 沒有響應攔截器配置時返回的默認值 | true |
filter | function | 若是須要根據不一樣的參數響應不一樣的返回值能夠配置該方法 | false |
amock({
path:"/hello",
response:{
code:1,
msg:"success",
data:{
hello: "amock"
}
},
filter:function(request,response){
return response;
}
})
複製代碼
amock unit.path
: AMock 服務基於 express 4. 該path屬性支持全部express支持的配置方式 express.4 path.express
amock unit.filter
:filter方法是在返回響應值前的連接器. 該方法的 request 參數包含全部express4支持的屬性 express.4-request.json
options
: 你能夠設置一個統一的響應值格式或者url前綴經過該options配置項.後端
prop | type | desc | required |
---|---|---|---|
fileNameAsPathPerfix | boolean | 該值爲true時會默認用文件名做爲接口請求的一個前綴. 默認 false | false |
urlPrefix | string | 一個更靈活的設置前綴的方式 | false |
commonResHandler | object | 設置通用格式,uint裏面的響應值會包含再handle對應的值下面 | false |
prop | type | desc | required |
---|---|---|---|
handle | string | 若是使用通用響應配置該屬性必須設置,這個屬性對應的值將會包含unit單元的響應值 | true |
* | any | 其餘屬性能夠任意設置 | false |