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