Monthly Archive 八月 2020

By柏小白

json-server常用自定义路由和简单配置

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