json-server 的使用（入门篇）

        作为一个前端开发工程师，在后端还没有ready的时候，不可避免的要使用mock的数据。很多时候，我们并不想使用简单的静态数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。

首先，提供一个很不错的json-server 入门视频小教程Creating Demo APIs with json-server。

github地址：https://github.com/typicode/json-server

安装json-server

npm install -g json-server

$ json-server -v
0.14.0

创建db.json

在一个文件夹下新建一个db.json文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

启动json-server

在当前文件夹下输入如下命令：

json-server db.json

控制台如下：

 \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database

表明我们的json-server 已经启动成功。我们可以通过postman以及浏览器发送请求，获得相应数据了。 “http://localhost:3000/posts”等即为请求的url。

发送GET请求http://localhost:3000/posts，可获得如下的response：

[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

同时json-server还给我们提供了一个浏览器的可视化主页，通过“http://localhost:3000”即可进行访问。

在浏览器中打开“http://localhost:3000”，界面如下图所示：

分别点击相应的Resources链接，可直接查看每个endpoint的返回结果，同时，它还标注了返回结果的类型。

Tips:

1、使用“json-server --watch db.json”命令可以实时监测db.json的变化；如果没有 -- watch 命令，即使db.json已经发生了改变，重新发请求，仍然会返回原先的mock data，返回状态码304，认为没有变化。

GET /people 304 3.883 ms - -

2、同时，我们可以发送 POST、PUT、PATCH和DELETE请求，相应的结果会通过lowdb自动保存到db.json。关于POST、PUT等相关请求的发送，这里不再做赘述，视频教程中有详细的讲解。

3、我们的request body应该是一个json对象，比如{"name":"Lynn"};

4、POST、PUT、PATCH请求头中要包含Content-Type: application/json；

5、id的值是自动生成且不易变的。PUT请求和PATCH请求中自带的id会被忽略。

 

至此，已经可以满足mock-server的一些基本需求，下面将详细讲解json-server的一些更高级功能。

json-server的使用（进阶篇） 未完待续。。。