Mock的意义
通过 Mock 当时编写好 API 的数据生成规定,由工具动静生成 API 的返回数据。开发人员通过拜访 Mock 来取得页面所须要的数据,就能够轻松地实现对接工作。前后端人员只须要定义好接口文档就能够开始并行工作,互不影响,只在最初的联调阶段往来亲密;
后端与后端之间如果有接口耦合,也同样能被Mock解决。
测试过程中如果遇到依赖接口没有筹备好,同样能够借助Mock,不会呈现一个团队期待另一个团队的状况。
这样的话,开发自测阶段就能够及早发展,从而发现缺点的机会也提前了,有利于整个产品质量以及进度的保障。
在APIPOST中应用Mock
APIPOST能够让你在没有后端程序的状况下能实在地返回接口数据,你能够用APIPOST实现我的项目初期纯前端的成果演示,也能够用APIPOST实现开发中的数据模仿从而实现前后端拆散。在应用APIPOST之前,你的团队实现数据模仿可能是上面的计划中的一种或者多种:
本地手写数据模仿,在前端代码中产生一大堆的mock代码。
利用mockjs或者canjs的can-fixture实现ajax拦挡,本地配置必要的json规定。
后端在Controller层造假数据返回给前端。
下面的形式中,不论哪一种形式,都会要求开发人员写一些跟我的项目本无任何关联的代码,第一个和第二个形式还会须要前端我的项目在本地引入不必要的js文件。
应用APIPOST 的Mock 服务
您能够通过APIPOST 提供的Mock 服务实现上述性能。
编写Mock 规定
在APIPOST中,Mock 规定模板反对类型丰盛(5.4版本起)。
根本数据(固定json构造)
{ "code": "0", "data": { "name": "张三丰", "age": 100 }, "desc": "胜利"}
根本数据(Mock随机json构造)
{ "code": "0", "data": { "list|20": [{ "name": "@name", "age": "@integer(2)" }], "url": "https://echo.apipost.cn" }, "desc": "胜利"}
RESTFUL逻辑数据
某些场景中,咱们可能须要依据接口的入参规定,退出适当的逻辑解决后再返回数据。一个简略的场景就是登录场景,须要依据用户名明码,判断是否登录胜利。再或者,咱们须要依据产品ID动静返回产品信息,等等。
当初,ApiPost 的Mock 服务提供了这种场景的解决方案。
以下示例中,咱们用到了 _req.body对象,其含意是:
当 post 申请以 x-www-form-urlencoded 或者application/json 形式提交时,咱们能够拿到申请的参数对象。
{ "code": "0000", "data": { "verifySuccess": function() { let body = _req.body; return body.username === 'admin' && body.password === '123456'; }, "userInfo": function() { let body = _req.body; if (body.username === 'admin' && body.password === '123456') { return Mock.mock({ username: "admin", email: "@email", address: "@address" }); } else { return null; } }, }, "desc": "胜利"}
填写Mock URL 绝对地址
Mock URL绝对地址是必填项(如果不填写的话,无奈失常失去响应后果)。您能够通过在设置里开启“主动获取Mock URL地址”来主动获取Mock URL。
此项开启后,APIPOST将依据您输出的接口URL主动截取PATH局部作为Mock URL的相对路径。
利用APIPOST发送Mock URL
实现以上2步后,您能够通过在APIPOST中切换到“Mock 环境”来发送查看mock返回的具体数据。
将生成的mock URL地址发给前端
您能够将APIPOST生成的mock URL地址发给前端来代替您的接口地址,这样前端就能够应用您模仿的数据进行先一步的调试开发了。当您的接口实现后,再替换回来即可。
APIPOST的 mock 是基于mock.js 开发的。具体文档能够 参见 mock.js 具体文档。