前端在写完静态页面后,往往需要等待服务端接口完成后才能进行后续的处理,心急的前端自然想提前拿到数据,那么自己mock数据显然是一个不错的选择
这里仅讨论我认知的mock方法:
1.接口已返回一部分数据,数据模型已知,那么直接对接口返回的数据操作即可,替换为从请求返回得到的静态数据和自己需要添加的mock数据,数据类型可以自己根据经验决定
2.Mock.js服务
-
安装依赖
npm install mockjs --save-dev
-
创建Mock模块目录结构
-
配置Mock数据
3.使用apifox进行mock
因为我不知道我们组里有没有apifox的团队,所以是以个人身份进行操作
先在apifox创建一个接口集,创建需要mock的接口,定义好参数和头部信息等,如下:
然后创建一个统一的数据模型,这个模型并不是通用的,只是抽取出来的具有统一性的数据,如下:
下一步是点击修改接口,添加成功响应的数据返回,这里就可以将我们之前用到的数据模型作为一个对象直接放入,如下:
定义完后可以在右侧点击添加示例,看看生成的示例是否符合你的要求和预期
然后,接下来我们要做的是运行这个mock接口,点击运行,确认后点击实际请求
得到的url就是你mock生成的url了,现在立刻就来使用试试吧
在代码中使用axios发起请求,在浏览器预览结果
数据生成且符合要求,这样就可以进行下一步的开发了