背景

• 在前后端分离的项目开发前期，为了项目能够并行进而缩短开发周期，前端项目经常需要自己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) 示例

  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

commonResHandler prop examples

反馈

• 使用该插件的过程中如有问题可以提交 issues 到GitHub Repo,也可以发送邮件到[email protected]。