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

原文 https://blog.csdn.net/weixin_40817115/article/details/81281454