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