简约但强大的 mock server 构建命令行工具
install json-server-router
$ npm install json-server-router -g假设有文件books.json内容如下：
// books.json
{
"update": { "code": 200, "message": "succeed", "data": true },
"retrieve": { "code": 200, "message": "succeed", "data": true },
"create": { "code": 200, "message": "succeed", "data": true },
"delete": { "code": 200, "message": "succeed", "data": true }
}运行命令$ jsr books.json
将以books.json为数据源启动 mock server，
对应生成四个接口 /books/update /books/retrieve /books/create /books/delete，其中文件中每个键值成为一个接口。
运行$ curl http://localhost:3000/books/update
返回
{
"code": 200,
"message": "succeed",
"data": true
}如果想构建复杂的路由结构该怎么办？json-server-router 提供一个便捷的方式创建复杂路由，你只需按照一定的规则构建出对应的目录结构就好。
假设我们的目标接口为 /aaa/bbb/ccc/update，那么我们只需构造出如下的目录结构
tips当遇到名称为
index的文件路径拼接的时候会忽略index，当遇见键值为index路径拼接同样也会忽略index
- aaa
- bbb
+ ccc.json // 在ccc.json中添加 update
or
- aaa
- bbb
- ccc
+index.json // 在index.json中添加update
运行$ jsr aaa就会得到目标接口；
-mock
+ index.json ------> /xxx
+ book.json ------> /book/xxx
- foo
+ index.json ------> /foo/xxx
+ bar.json ------> /foo/bar/xxxjsr <root> [options]
Examples:
jsr .
jsr mock
jsr books.json
jsr index.js
位置：
root Paths to mock files dir or file [字符串]
选项：
--config Path to config file [string] [default:
jsr.config.js]
--port, -p Set port [数字] [默认值: 3000]
--host [字符串] [默认值: 本机IP]
--watch, -w Watch file(s) [布尔] [默认值: true]
--open, -o open [布尔] [默认值: false]
--help, -h 显示帮助信息 [布尔]
--version, -v 显示版本号 [布尔]config设置配置文件默认配置文件的地址是当前目录的下的jsr.config.jswatch监控文件变化自动重新加载
module.exports = {
root: 'mock',
port: 3000,
}json-server-router其底层依赖json-server所构建，所以在不出意外的情况下同时也拥有json-server的所有GET请求相关功能;
json-server-router是对json-server的扩展所以要想更好的理解下面的内容最好要先了解json-server
Use . to access deep properties
GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode
Use _page and optionally _limit to paginate returned data.
In the Link header you'll get first, prev, next and last links.
GET /posts?_page=7
GET /posts?_page=7&_limit=20
10 items are returned by default
Add _sort and _order (ascending order by default)
GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc
For multiple fields, use the following format:
GET /posts?_sort=user,views&_order=desc,asc
Add _start and _end or _limit (an X-Total-Count header is included in the response)
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10
Works exactly as Array.slice (i.e. _start is inclusive and _end exclusive)
Add _gte or _lte for getting a range
GET /posts?views_gte=10&views_lte=20
Add _ne to exclude a value
GET /posts?id_ne=1
Add _like to filter (RegExp supported)
GET /posts?title_like=server
Add q
GET /posts?q=internet
To include children resources, add _embed
GET /posts?_embed=comments
GET /posts/1?_embed=comments
To include parent resource, add _expand
GET /comments?_expand=post
GET /comments/1?_expand=post
To get or create nested resources (by default one level, add custom routes for more)
GET /posts/1/comments
POST /posts/1/comments
当使用json-server 我们可以通过构建路由/get/users?_page=7&_limit=10进行分页查询但是query的关键词必须是指定的,
在json-server-router中可以再jsr.config.js中自定义queryMap字段来修改关键词的名字，配置好了之后就可以通过/get/users?page=7&len=10进行分页查询
//jsr.config.js
{
queryMap: [['_page', 'page'], ['_limit', 'len']]
}关于非GET请求你不需要定义mock files，json-server-router对所有非GET请求进行统一处理不管其路由是什么一致通过handler函数处理
返回结果如下
{
"body": {},
"code": 200,
"ip": "::1",
"message": "succeed",
"url": "/books/"
}你可以通过重写jsr.config.js中的handler 函数自定义其处理结果
//jsr.config.js
{
/**
* 处理所有非GET请求
* 当query fial 有值的时候认为请求设置为失败状态
*/
handler (req, res, next) {
const { ip, originalUrl, body } = req
const isFail = !!req.query.fail
res.json({
code: isFail ? 500 : 200,
message: isFail ? 'failed' : 'succeed',
cookie: req.get('cookie'),
ip,
url: originalUrl,
body: body
})
}
}有的时候你可以能需要非GET请求得到跟GET请求一样的行为,此功能可以通过对 mock 数据添加魔法注释实现，
"list[get]"生成的路由不会包含[get] 当用POST 访问 /xxxx/list时就会得到mock文件中定义的数据
{
"list[get]": [
{ "id": 0, "name": "book1" },
{ "id": 1, "name": "book2" },
{ "id": 2, "name": "book3" }
]
}jsr支持文件上传功能只要添加file魔法注释即可"upload[file]",目前上传文件对应的name固定为file
{
"upload[file]": { "code": 200, "message": "succeed", "data": true }
}/xxxx/upload返回结果如下：
{
"code": 200,
"files": [
{
"destination": "public/temp",
"encoding": "7bit",
"fieldname": "file",
"filename": "0668151cf3f749154c6b1942abe38ad6",
"mimetype": "application/javascript",
"originalname": "jsr.config.js",
"path": "public/temp/0668151cf3f749154c6b1942abe38ad6",
"size": 494
}
]
}推一手httpie：使用httpie如下命令即可完成上传文件的功能：
$ http -f xxxx/upload [email protected]
Using JS instead of a JSON file, you can create data programmatically.
// index.js
module.exports = () => {
const data = { users: [] }
// Create 1000 users
for (let i = 0; i < 1000; i++) {
data.users.push({ id: i, name: `user${i}` })
}
return data
}$ jsr index.jsTip use modules like Faker, Casual, Chance or JSON Schema Faker.
可以参考cli/server.js
const jsonServer = require("json-server")
const server = jsonServer.create()
const middlewares = jsonServer.defaults() // { static: 'public' }
const JsonServerRouter = require("json-server-router")
/**
* @prop {string} root mock文件根目录默认为 'mock'
* @prop {number} port 端口号跟json-server 一致 默认为 3000
* @prop {string} publicPath 生成默认首页的地址，跟json-server 配置一致 默认'public',如果修改路径的话那么json-server 对应的配置也要改
* @prop {bool} open 是否用浏览器打开 默认 true
*/
const router = new JsonServerRouter({
root: "mock",
port: 3000,
publicPath: "public"
})
server.use(middlewares)
server.use(router.routes())
server.use(router.rewrite())
server.listen(3000, () => {
console.log("JSON Server is running")
})如有疑问可直接加微信面基
