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:

  {
      name:"servername",
      port:3000 // default port 3000
  }

• *.amock.js: 配置內容格式以下

  amock(unit| unit[], options?)

  amock(unit) 示例

  [amock(unit[],options) 示例](example/arr.amock.js)
  ### 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.
• amock unit.filter:filter方法是在返回響應值前的連接器. 該方法的 request 參數包含全部express4支持的屬性 express.4-request.

• 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