mock-api使用

always_fly

在前端开发中，您可能遇到这样场景：

项目讨论会后
经理：好，开发时间就定位两周
服务端: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. {
   
4. “method”: “get”,
   
5. “url”: “/users/:id”,
   
6. “response”: {
   
7. “id”: 1,
   
8. “name”: “tom”,
   
9. “level”: 3
   
10. }
    
11. }
    
12. ]

复制代码

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. {
   
4. “method”: “get”,
   
5. “url”: “/users/:id”,
   
6. “response”: {
   
7. “id”: 1,
   
8. “name”: “tom”,
   
9. “level”: 3
   
10. },
    
11. “delay”: 3000,
    
12. “status”: 400,
    
13. “error”: {
    
14. “message”: “该用户不存在”
    
15. }
    
16. }
    
17. ]

复制代码

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

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

复制代码

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