json-server为前端工程师提供了快速mock后端REST api的可能。我们只需要新建一个简单的json文件或者几行js代码就可以快速模拟出REST api的接口。
比如,对于如下json文件:
// db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
启动json-server,它默认提供了如下几个接口
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
但是,很多时候,这种单一的路由接口并不能满足我们的需求,大多数时候,我们需要的api接口可能是"http://localhost:3000/api/posts ", 或者我们想用的接口并不是3000,而是8080。这就需要一些自定义配置。
首先,我们需要对路由进行简单的自定义配置。
自定义路由——route.json
在同一文件夹下新建route.json:
{
"/api/*": "/$1" // /api/posts => /posts
}
上面route.json的意思就是,当调用/api/posts时,重定向到/posts。
命令行中输入如下命令即可实现简单的自定义路由, 路由文件通过–routes 参数来指定:
json-server --routes route.json db.json
对于路由的自定义配置json,github中也提供了一些其他的语法:
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles\\?id=:id": "/posts/:id"
}
作用如下:
/api/posts # → /posts
/api/posts/1 # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1
自定义配置——json-server.json
对于端口的自定义,一方面我们可以通过–port 命令行参数指定,也可以使用config文件指定。
{
"port": 5000, //自定义端口
"watch": true, //自动监听变化
"static": "./public",
"read-only": false, //是否只能使用GET请求
"no-cors": false, //是否支持跨域
"no-gzip": false, //是否支持压缩
"routes": "route.json" //路由配置地址
}
运行
json-server --c json-server.json db.json
控制台打印如下:
\{^_^}/ hi!
Loading db.json
Loading route.json
Done
Resources
http://localhost:5000/posts
http://localhost:5000/comments
http://localhost:5000/profile
Other routes
/api/* -> /$1
/:resource/:id/show -> /:resource/:id
/posts/:title -> /posts?title=:title
/articles\?id=:id -> /posts/:id
Home
http://localhost:5000
Type s + enter at any time to create a snapshot of the database
Watching...
对于json-server --c json-server.json db.json,–c是 –config的缩写,意思是指定配置文件为json-server.json ,同时指定数据文件为db.json。
至此,我们的配置基本已经完成了。最后,我们可以在package.json中加入如下代码:
"scripts": {
"mock": "json-server --c json-server.json db.json"
}
此时,直接运行npm run mock即可代替json-server --c json-server.json db.json命令了。
另外,还有更复杂的路由配置,请参见json-server Github 官网。
json-server 常用命令行命令
json-server [options] <source>
Options:
--config, -c Path to config file [default: "json-server.json"]
--port, -p Set port [default: 3000]
--host, -H Set host [default: "localhost"]
--watch, -w Watch file(s) [boolean]
--routes, -r Path to routes file
--middlewares, -m Paths to middleware files [array]
--static, -s Set static files directory
--read-only, --ro Allow only GET requests [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]
--no-gzip, --ng Disable GZIP Content-Encoding [boolean]
--snapshots, -S Set snapshots directory [default: "."]
--delay, -d Add delay to responses (ms)
--id, -i Set database id property (e.g. _id) [default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix, (e.g. _id as in post_id)
[default: "Id"]
--quiet, -q Suppress log messages from output [boolean]
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
Examples:
json-server db.json
json-server file.js
json-server http://example.com/db.json
https://github.com/typicode/json-server
原文 https://blog.csdn.net/weixin_40817115/article/details/81281454