51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 1400|回复: 0

mock-api使用

[复制链接]

该用户从未签到

发表于 2018-4-28 14:50:28 | 显示全部楼层 |阅读模式
在前端开发中,您可能遇到这样场景:

项目讨论会后
经理:好,开发时间就定位两周
服务端:OK,没问题,两周能搞定
前端:干,两周我也能搞定,可尼玛我要等服务端接口啊
然后,这两周期间,你不断轮询服务端人员,催促接口。到最后,服务端如期完成,前端的你孩子啊继续撸…
[mock-api] 就是为了解决前端等待服务端开发接口而产生的一个小工具,使用json文件模拟服务端请求结果。
工作流程编程了这样:

项目讨论会后
经理:好,开发时间就定为两周
服务端:OK,没问题,两周能搞定
前端:OK,服务端先定义好接口文档,然后大家一起过一下文档
经理:这是必须的
然后服务端定义了接口文档,大家通过后,前端利用mock-api模拟和服务端并行开发
两周后,项目开发如期完成

准备工作

使用mock-api,需要具备:

node.js环境,node版本需要v0.11.7+
安装mock-api,执行npm install -g mock-api即可
特点

json方式书写接口,简洁明了
支持跨域访问,让本地无跨域烦恼
热部署,修改json文件后自动重启服务,省去重复工作
支持慢速网络模拟,方便前端测试
错误自定义,便于处理各种协定好的异常

使用

假设服务端约好了一堆API,我们拿其中一个来示例:

请求用户详情
GET: /users/:id
返回:
  1. {
  2. “id”: 用户id,
  3. “name”: “用户名”,
  4. “level”: 用户等级
  5. }
复制代码

新建一个目录,比如取做:restful。在该目录下建立一个json文件(文件名不以开头,以开头的json文件可以作
为数据源使用),比如:user.json,写入以下内容:

  1. [
  2. {
  3. “method”: “get”,
  4. “url”: “/users/:id”,
  5. “response”: {
  6. “id”: 1,
  7. “name”: “tom”,
  8. “level”: 3
  9. }
  10. }
  11. ]
复制代码

method: 表示请求的类型,一般是 get、post、put、delete中的一种
url: 请求的路由
response: 返回的结果体
json支持{{ }} 表达式,例如:
  1. [
  2. {
  3. “method”: “get”,
  4. “url”: “/users/:id”,
  5. “response”: {
  6. “id|number”: “{{this.params.id}}”,
  7. “name”: “tom”,
  8. “level”: 3
  9. }
  10. }
  11. ]
复制代码

其中,response结构的key支持指定输出number,而不是默认的string(因为{{ }}表达式必须包在双引号中)。
value中{{ }} 表达式常用支持的表达式有:

// 路径参数
this.params[key]
// get参数
this.query[key]
// post参数
this.body[key]
这里的this其实就是Koa的请求上下文对象,具体使用可以参考koajs文档。

如果需要模拟网络延迟或者请求失败,可以使用 delay 和 status、error,例如:

  1. [
  2. {
  3. “method”: “get”,
  4. “url”: “/users/:id”,
  5. “response”: {
  6. “id”: 1,
  7. “name”: “tom”,
  8. “level”: 3
  9. },
  10. “delay”: 3000,
  11. “status”: 400,
  12. “error”: {
  13. “message”: “该用户不存在”
  14. }
  15. }
  16. ]
复制代码

0.1.0 版本后支持js方式,提供更大的控制力:

  1. var store = […];
  2. module.exports = [{
  3. method: ‘get’,
  4. url: ‘/users’,
  5. response: function(helper) {
  6. return helper.pagination(store, {
  7. limit: this.query.limit,
  8. offset: this.query.offset
  9. });
  10. }
  11. }];
复制代码

helper 是工具函数,目前提供:

pagination,模拟分页情况,返回如下结构数据:
  1. {
  2. “data”: […],
  3. “pagination”: {
  4. “limit”:
  5. “offset”:
  6. “total”:
  7. }
  8. }
复制代码

JSONCopy,实现JSON深拷贝
另外,你可以使用nodejs能做到的所有功能。

然后执行:

mock-api serve /path/to/restful
上面的 /path/to/restful 是之前建立的restful目录的路径,可以是相对地址,也可以是绝对地址。

前端开发便可以通过 http://localhost:10086/users/1 访问到该接口。mock-api已经做了跨域处理,因此不存在
跨域问题。

如果需要定制端口,启动命令使用:

mock-api serve /path/to/restful -p port
注意,为了便于开发,建议将上面的 http://localhost:10086 进行配置,后期接入真实API则只需要修改一处配
置即可。

如果需要统一模拟慢速网络,可以使用 -d 参数:

mock-api serve /path/to/restful -d 2000
如果需要统一模拟异常,可以使用 -s 参数:

mock-api serve /path/to/restful -s 400
如果需要提供静态文件服务(例如一些图片的访问),可以使用 -S 参数,默认是在 serve 的路径下的 static 目录:

mock-api serve /path/to/restful -S /path/to/static
命令行帮助可以通过以下命令查看:

mock-api serve -h

回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-3-28 20:40 , Processed in 0.064719 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表