前端 API 接口数据模拟 (Mock)

缘起

在前端开发的过程中，会碰到以下一些问题：

• 当和后端商讨好API 接口，形成文档后，短时间无接口可用
• 开发时，需要处理多种情况，通过后端修改数据非常麻烦

为了解决此类问题，需要使用 mock 数据和 mock 服务器来提供支持。

Mock 服务

很多前端框架，如 Reactor、 Angular、Vue 等都带有 mock 服务，以方便开发，这里介绍的是一个独立的小工具，可以在开发者自己的机器上方便的部署和运行，模拟后端接口的返回，以方便前端模拟各种数据。特性如下：

• 支持 GET / POST / PUT
• 支持返回 json 格式
• 支持返回结果实时替换
• 支持按照特定参数动态返回指定内容

安装服务

git clone https://github.com/arthurlee/bean-mock-api-service.git
cd bean-mock-api-service
npm install

启动服务

# 格式： node index.js [mock_files_path [listen_port]]
node index.js files 1492

• mock_files_path: 返回数据所在的目录，缺省目录是当前目录下的 files
• listen_port: mock 服务的侦听端口，缺省是 1492

测试 API 调用

发送请求

curl "http://127.0.0.1:1492/api/heartbeat"

应答数据

{
    "code": "0",
    "message": "ok"
}

该数据即 files 目录下面 _api_heartbeat_get.json 的内容。

停止服务

直接按快捷键 CTRL+C 来停止。

假数据使用指南

GET API 请求

GET http://127.0.0.1:1492/api/heartbeat 映射到 files_api_heartbeat_get.json

POST API 请求

POST http://127.0.0.1:1492/api/user/create 映射到 files_api_user_create_post.json

增强版 pseudo 机制

GET http://127.0.0.1:1492/api/user?pseudo=1 映射到 files_api_user_get_1.json
POST http://127.0.0.1:1492/api/course?pseudo=2 映射到 files_api_course_post_2.json

参考

• bean-mock-api-service