应用接口数据模拟服务器
- 零配置、快速构建 MOCK 服务器
- 模拟服务器返回的对象、数组、以及根据传参变化的各种场景的请求数据
- 支持 Mockjs 语法模拟各种随机数据
- 支持 RestAPI 和 GraphQL 请求数据的模拟
- 支持修改 MOCK 数据的热更新、保存修改文件即时更新接口
- 支持使用 ES Module 模块化组织和维护复杂应用的 MOCK 数据
- 支持同时启动多个 MOCK 服务
- 支持本地和远端部署
yarn add jet-mock -D #或者 npm install jet-mock --save-dev在项目的package.json文件中配置scripts。
{
"name": "project-demo",
"scripts": {
"mock": "jet-mock start"
},
"devDependencies": {
"jet-mock": "^1.0.0"
}
}执行：
yarn mock #或者 npm run mock第一次执行命令会自动生成restapi.config.js配置文件及 mock 示例。
project-demo
└── restapi.config.js
/**
* restapi.config.js配置示例
* jet-mock底层使用express，支持对应于 HTTP 的get、post、put、head、delete、options等各种路由方法
* 具体请参考：https://expressjs.com/zh-cn/guide/routing.html
*/
const Mock = require("jet-mock/mockTools");
module.exports = {
/**
* 模拟对象类型的静态数据
*/
"GET /api/demoGet": {
tips: "用于演示GET请求",
name: "jet-mock应用接口数据模拟服务器",
github: "https://github.com/chanjet-fe/jet-mock"
},
/**
* 模拟数组类型的静态数据
*/
"POST /api/demoArray": [
{
tips: "用于演示返回数组的请求",
name: "num1"
},
{
tips: "用于演示返回数组的请求",
name: "num2"
}
],
/**
* 使用mockjs语法模拟随机数据
* 也可以使用 Mock.Random
* 更多信息请参考：https://github.com/nuysoft/Mock/wiki/Mock.Random
*/
"GET /api/tags": (req, res) => {
res.send(
Mock.mock({
"list|100": [{ name: "@city", "value|1-100": 150, "type|0-2": 1 }]
})
);
},
/**
* 模拟逻辑判断的场景数据，即根据前端传参返回数据
* 支持req及res的各种API，具体请参考：
* https://expressjs.com/zh-cn/4x/api.html#req
* https://expressjs.com/zh-cn/4x/api.html#res
*/
"POST /api/login": (req, res) => {
/**
* 已集成body-parser中间件，并已配置application/x-www-form-urlencoded和application/json的解析
* 可以通过req.body接收请求数据，具体可参考：https://github.com/expressjs/body-parser。
*/
const { password, userName } = req.body;
if (password === "888888" && userName === "admin") {
res.send({
status: "ok",
userName: "admin"
});
return;
}
if (password === "123456" && userName === "user") {
res.send({
status: "ok",
userName: "user"
});
return;
}
res.send({
status: "error",
userName: "guest"
});
}
};配置规则
// restapi.config.js
module.exports = {
'GET /api/demoGet': {}/[]/function
// \_/ \___________/ \______________/
// | | |
// method path data
}- Method 是 HTTP 请求方法。
- PATH 是服务器上的路径。
- Data 是服务器返回的数据
为了便于复杂项目 MOCK 数据的管理，请在项目根目录下新建mock目录，用于存放更多的 MOCK 数据模块，并支持使用 ES Module 或 CommonJS 的模块化管理 MOCK 数据。
# 目录结构
project-demo
├── restapi.config.js # RestAPI配置文件
├── mock
│ └── restapi
│ ├── demo-get.js
│ └── demo-post.js
└── package.json
//restapi.config.js
import demoGet from "./mock/restapi/demo-get";
import demoPost from "./mock/restapi/demo-post";
import Mock from "jet-mock/mockTools";
module.exports = {
"GET /api/demoGet": demoGet,
"POST /api/demoArray": demoPost,
"GET /api/demoMockjs": Mock.mock('@string("lower", 5)')
};若模拟GraphQL请确保你的项目为以下目录结构（可配置）
# 目录结构
project-demo
├── mock
│ ├── schema # 数据模型
│ │ └── demo.graphql
│ ├── gqlmocks # 模拟数据解析器
│ │ └── demo.js
│ └── resolvers # 解析器(非必须)
│ └── demo.js
└── package.json
- 新建
mock/schema目录用于存放模型描述文件，文件扩展名为.graphql。
# project-demo/mock/schema/demo.graphql
type Query {
hello: String
resolved: String
people: [Person]
}
type Person {
name: String
age: Int
}- 新建
mock/gqlmock目录用于存放模拟数据文件
// project-demo/mock/gqlmocks/demo.js
const Mock = require("jet-mock/mockTools");
const { MockList } = require("jet-mock/graphqlTools");
const Random = Mock.Random;
const min = 100;
const max = 99999;
const mocks = {
Int: () => Random.natural(min, max),
Float: () => Random.float(min, max),
String: () => Random.ctitle(10, 5),
Date: () => Random.time(),
Query: () => ({
people: () => new MockList([5, 12])
}),
Person: () => ({
name: () => Random.cname(),
age: () => Random.integer(20, 40)
})
};
module.exports = mocks;- 新建
mock/resolvers目录用于存放模型解析文件（可选）
resolvers目录中的解析器将覆盖gqlmock目录中的模拟数据，用于处理真实的 GraphQL 服务器环境的数据逻辑。
// project-demo/mock/resolvers/demo.js
module.exports = {
Query: {
resolved: () => "resolved"
}
};对于复杂项目的GraphQL模拟，以及多人合作开发，可以分文件模块化部署
# 模块化目录结构
project-demo
├── mock
│ ├── schema # 数据模型
│ │ ├── Query.graphql
│ │ └── Person.graphql
│ ├── gqlmocks # 模拟数据解析器
│ │ ├── Global.js
│ │ ├── Query.js
│ │ └── Person.js
│ └── resolvers # 解析器(非必须)
│ ├── res1.js
│ └── res2.js
└── package.json在项目根目录新建jetmock.config.js支持模拟服务器的更多配置
module.exports = {
port: 3030, //服务器默认端口号
/**
* 路径配置
*/
path: {
restApi: "mock/restapi", //用于存放RestApi模块化数据
restApiConfig: "restapi.config.js", //RestApi配置文件
schema: "mock/schema", //GraphQL模型描述文件存放目录
resolvers: "mock/resolvers", //GraphQL解析器文件存放目录
gqlmock: "mock/gqlmock" //GraphQL模拟数据解析器文件存放目录
},
/**
* cookie-parser配置
*/
cookie: {
secret: "jetmock",
options: {}
},
/**
* express-session配置
*/
session: {
secret: "jetmock", // 对session id相关的cookie进行签名
resave: false, //是否每次都重新保存会话，建议false
saveUninitialized: true // 是否自动保存未初始化的会话，建议false
// cookie: {
// maxAge: 10 * 1000 // 有效期，单位是毫秒
// }
}
};Copyright (c) 2020-present, chanjet-fe.