快速模拟 Rest API

在前后端开发过程中，通常会通过 web api 进行沟通，Rest 风格和 JSON结构是常用的，例如前端要获取文章列表，需要通过 GET /post 来取得数据，返回的数据例如

{
  "posts": [
    { "id": 1, "title": "test", "author": "me" }, 
    ......
  ]
}

后端来定义路由和返回JSON数据

开发中，后端实现API的速度可能不能满足前端开发的速度，前端为了不必等待后端，可以自己来模拟这个API，按照规定好的数据结构来返回模拟数据

json-server 就是用来实现这个需求的，不用自己写任何代码，把自己需要的模拟数据写入一个JSON文件，json-server 可以加载这个文件，并对外提供REST风格的访问方式，下面通过示例看具体的使用方式

先通过 npm 安装 json-server

npm install -g json-server

然后自定义一个JSON文件 db.json，内容为

{
  "posts": [{
    "id": 1,
    "title": "测试 json-server",
    "author": "dys"
  }]
}

启动 json-server，指定加载 db.json，在命令行执行

json-server db.json

启动后的提示信息

  \{^_^}/ hi!
  Loading db.json
  Done
  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  Home
  http://localhost:3000

在浏览器中访问 http://localhost:3000/posts，会输出 posts 数组，如

[
  {
    "id": 1,
    "title": "测试 json-server",
    "author": "dys"
  }
]

还可以访问某一条信息，如 http://localhost:3000/posts/1，只返回一条数据

{
  "id": 1,
  "title": "测试 json-server",
  "author": "dys"
}

这是使用 GET 方式的访问，下面体验一下 POST 请求

我使用了 Firefox 下的一个 HTTP 插件，向 http://localhost:3000/posts 发送了 POST 请求，提交的数据为

{
    "id": 2,
    "title": "测试 post",
    "author": "dys"
}

再次使用浏览器访问 http://localhost:3000/posts，可以看到刚刚 POST 的数据

[
  {
    "id": 1,
    "title": "测试 json-server",
    "author": "dys"
  },
  {
    "id": 2,
    "title": "测试 post",
    "author": "dys"
  }
]

以上是 json-server 的基本用法，他还有很多更强大的功能，可以到官网查看更多内容

项目官网 https://github.com/typicode/json-server