推薦一款本身開發的vscode mock服務插件

背景

  • 先後端分離的項目開發前期,爲了項目可以並行進而縮短開發週期,前端項目常常須要本身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) 示例git

    amock(unit[],options) 示例github

    amock 單元屬性說明

    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配置項.後端

options prop examples

prop type desc required
fileNameAsPathPerfix boolean 該值爲true時會默認用文件名做爲接口請求的一個前綴. 默認 false false
urlPrefix string 一個更靈活的設置前綴的方式 false
commonResHandler object 設置通用格式,uint裏面的響應值會包含再handle對應的值下面 false

commonResHandler prop examples

prop type desc required
handle string 若是使用通用響應配置該屬性必須設置,這個屬性對應的值將會包含unit單元的響應值 true
* any 其餘屬性能夠任意設置 false

反饋

  • 使用該插件的過程當中若有問題能夠提交 issues 到GitHub Repo,也能夠發送郵件到1104238614@qq.com。
相關文章
相關標籤/搜索