Home

Awesome

Simplest Mock Server

Simplest Mock Server 是一个极简的、开箱即用的搭建本地 mock 接口的工具，仅有不到 100 行代码。支持 RESTful 占位符，支持 mockjs，提供基于请求的动态化能力，可以轻松地部署为在线服务。简单、轻量。

目录

安装与启动

  1. 准备环境：node(≥10.10.0)
  2. 安装依赖：npm install
  3. 启动服务：gulp mock
    • --dir example：接口配置目录
    • --port 3000：服务启动端口

如果在 mac 启动时报错：“无法打开 fse.node：来自身份不明的开发者“，请前往“系统设置 - 安全性与隐私 - 通用 - 允许从以下位置下载的 App”，点击“仍然允许“，然后再次执行 gulp mock。

配置接口

目录规范

Simplest Mock Server 使用 JSON 文件来描述每个接口的响应格式，所有 JSON 配置文件按照以下规范进行组织：

  1. 使用一个根目录，管理所有接口配置文件
  2. 根目录下分为 GET、POST、DELETE 等多个子目录，代表不同的请求方法
  3. 接口文件到子目录的相对路径，表示该接口在服务器上的路径

下面是一个接口配置目录的示例：

example                       // 根目录，名字可以自定义
├── GET                       // 所有 GET 接口配置
│   ├── api
│   │   └── v1
│   │       └── users
│   │           └── {id}.json // GET localhost:3000/api/v1/users/:id
│   └── users.json            // GET localhost:3000/users
├── POST                      // 所有 POST 接口配置
│   └── users.json            // POST localhost:3000/users
└── DELETE                    // 所有 DELETE 接口配置
    └── users
        └── {id}.json         // DELETE localhost:3000/users/:id

接口路径中的 文件夹 或 JSON 文件名可以是 RESTful 占位符，如：

新增接口

新增接口时，只需遵循上述目录规范，创建一个 JSON 文件即可。

可以在 VS Code 中快速创建接口配置文件。在目录上“右键 - 新建文件”，然后输入完整路径：

<img src="./assets/04-16-13-22-37.png" width="300px">

文件内容

接口配置文件的内容必须是一个合法的 JSON 字符串，表示返回的响应内容。支持 Mock.js 的数据模板语法和数据占位符。以下是部分示例，详细用例请参考 Mock.js 文档。

DELETE/users/{id}.json：

{
  "message": "删除成功"
}

GET/api/v1/users/{id}.json：

{
  "id": "@integer(60, 100)",
  "name": "@cname",
  "birthday": "@date",
  "address": "@city()",
  "postcode": "@zip"
}

请求结果：

// 访问 http://localhost:3000/api/v1/users/1
{
  "id": 89,
  "name": "吴丽",
  "birthday": "2021-02-27",
  "address": "来宾市",
  "postcode": "371043"
}

GET/users：

{
  "users|1-10": [{
    "id": "@integer(60, 100)",
    "name": "@cname",
    "birthday": "@date",
    "address": "@city()",
    "postcode": "@zip"
  }]
}

请求结果：

// 访问 http://localhost:3000/users
{
  "users": [
    {
      "id": 81,
      "name": "方芳",
      "birthday": "2007-11-24",
      "address": "铜陵市",
      "postcode": "326654"
    },
    {
      "id": 73,
      "name": "贺涛",
      "birthday": "1979-10-19",
      "address": "四平市",
      "postcode": "595462"
    },
    {
      "id": 66,
      "name": "姚磊",
      "birthday": "2002-09-15",
      "address": "天津市",
      "postcode": "712862"
    }
  ]
}
<div id="responsive"></div>

响应式数据

Mock.js 允许将某个属性的值设置为一个 Function（文档）。本项目对此功能进行扩展，可以根据请求动态响应。

Function 的参数是一个对象，包含以下字段：

示例：GET/echo.json

{
  "headers": function ({ _req }) {
    return _req.headers;
  },
  "url": function ({ _req }) {
    return _req.url;
  },
  "query": function ({ _req }) {
    return _req.query;
  },
  "mock": function ({ Mock }) {
    return Mock.mock("@integer(60, 100)");
  }
}

请求结果：

// 访问 http://localhost:3000/echo?param=123
{
  "headers": {
    "host": "localhost:3000",
    "connection": "keep-alive",
    "cache-control": "max-age=0",
    // ...
  },
  "url": "/echo?param=123",
  "query": { "param": "123" },
  "mock": 78
}

自定义 HTTP 状态码、Cookie、Header

通过 _res 属性可以自定义返回的响应。_res 属性包含以下字段：

示例：

{
  "success": true,
  "data": {
    "default": "hah"
  },
  "_res":{
    "status": 400,
    "data": {
      "success": false
    }
  }
}

返回内容为 { "success": false }，状态码为 400。

[TODO]

_res 支持以下字段：

<div id="wechat">

部署为在线服务

Simplest Mock Server 可以很轻松地部署为在线服务，如微信云托管、Google App Engine、阿里云弹性容器实例等各种基于容器的云服务。这种方式允许为多个应用提供在线 mock 接口，且成本极低。

以微信云托管服务为例，只需要按照云托管文档的流程创建服务，然后将 simplest-mock-server 文件夹上传即可。这种方式大大简化了微信小程序的开发工作流，可以在没有开发后端的情况下，向用户提供可在线预览的小程序版本。weapp-library 提供了一个微信云托管的完整示例。

此仓库提供了微信云托管所需的 Dockerfile，其他云平台可自行更改。

常见问题

支持不同的请求方法：

只需要在根目录下新增子目录即可，子目录名字是 HTTP 请求方法的大写形式（例如 GET、PUT 或 POST）。

支持 Mock.js 语法：

见上文示例。详细用例请参考 Mock.js 文档。

指定接口配置的根目录：

可以在此仓库下，为不同的项目创建多个目录：

simplest-mock-server
├── example           // 示例项目的配置
├── project_a         // 项目 A 的配置
├── project_b         // 项目 B 的配置
├── gulpfile.js       // 启动入口
├── package.json
├── router.js
└── server.js

在启动 gulp mock 时，通过 --dir 参数可以指定接口配置的根目录：

gulp mock --dir project_a

指定服务启动的端口号：

启动 gulp mock 时，通过 --port 参数可以指定服务启动的端口号：

gulp mock --port 3001

实际案例