当前位置: 首页 > 后端技术 > Node.js

vscodemock插件分享

时间:2023-04-04 01:33:27 Node.js

背景在前后端分离的项目开发初期,为了并行缩短项目的开发周期,前端项目往往需要mock一些数据供项目使用。目前常见且合理的做法是直接使用第三方平台或开源项目搭建自己的mock服务平台。还有一种简单粗暴的方式就是直接在项目中根据需求硬编码数据。以上两种方式,前者外部依赖性强,后者后续切换真实接口的成本高,硬编码数据的复用性也低。基于以上两点原因,这里推荐一个轻量级、无依赖、简单灵活的vscodemock插件项目github。如何安装AmockServer插件*:在vscode插件搜索窗口中搜索amock并按安装。配置AMock服务:当你打开你的项目时,插件会自动创建一个默认的.amock文件夹和./amock/setting.json文件在当前工作空间。setting.json是服务配置项,可以根据需要设置。配置AMock单元:可以在.amock文件夹下添加Amock配置。Amock单元配置文件名必须按照这个规则命名(否则启动服务时会检测不到配置)*.amock.js。启动AMock服务:在VSCode中找到并点击资源管理器底部的AMock项,然后点击StartService按钮启动。当Amock输出控制台启动成功后,就可以使用了。可以直接在前端项目中使用,也可以使用浏览器、postman等接口测试工具进行测试。重载Amock服务:当您修改或保存settings.json或*.amock.js文件时。可以使用VSCode浏览器底部的AMock项点击reload按钮使修改生效配置说明settgin.json:{name:"servername",port:3000//默认端口3000}*.amock.js:配置内容的格式如下amock(unit|unit[],options?)amock(unit)example[amock(unit[],options)example](example/arr.amock.js)###amock单元属性描述proptypedescrequiredpathstring请求路径truemethodstring支持'all','delete','get','put','post'。默认'all'false响应对象不响应拦截器配置时返回的默认值为true"/hello",response:{code:1,msg:"success",data:{hello:"amock"}},filter:function(request,response){returnresponse;}})amockunit.path:的AMock服务基于express4,path属性支持express.4支持的所有配置方法path.amockunit.filter:filter方法是返回响应值之前的链接器。该方法的request参数包含了express4支持的所有属性。4-request.options:可以通过options配置项.optionsprop设置统一的响应值格式或者url前缀examplesproptypedesrequiredfileNameAsPathPerfixboolean当值为true时,默认使用文件名作为接口请求的前缀。默认为falsefalseurlPrefixstring是一种更灵活的设置前缀的方式。####commonResHandlerpropexamplesproptypedescrequiredhandlestring如果使用普通响应配置,则必须设置该属性,该属性对应的值会包含unitunittrue的响应值*其他任何属性都可以任意设置为false