json

json

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:000/posts
http://localhost:000/comments
http://localhost:000/profile

但是，很多时候，这种单一的路由接口并不能满足我们的需求，大多数时候，我们需要的api接口可能是http://localhost:000/api/posts ， 或者我们想用的接口并不是000，而是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.jsonLoading route.jsonDoneResourceshttp://localhost:5000/postshttp://localhost:5000/commentshttp://localhost:5000/profileOther routes/api/* -> /$1/:resource/:id/show -> /:resource/:id/posts/:title -> /posts?title=:title/articles\?id=:id -> /posts/:idHomehttp://localhost:5000Type s  enter at any time to create a snapshot of the databaseWatching...

对于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 [opti] <source>Opti:--config, -c       Path to config file           [default: json-server.json]
  --port, -p         Set port                                    [default: 000]
  --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 respes (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.jsonjson-server file.jsjson-server .json