前端接口调试神器json-server

对于已经入门前端的同学，学会接口调试技能 算得上前端进阶的必经之路，但是雇一个后端来配合你学习接口调试显然有些不合理，那有没有自己一套全搞定的小工具呢？当然有，它就是 json-server，简单易学。本文就来介绍一下它。

安装

npm install -g json-server

然后创建一个 db.json文件 包含一些数据，你可以把它当做后端同学操作的数据库。

{
  "tree": [
    {
      "title": "前端",
      "key": "1",
      "children": [
        {
          "title": "CSS",
          "key": "3",
          "children": []
        },
        {
          "title": "JavaScript",
          "key": "4",
          "children": []
        }
      ]
    },
    {
      "title": "后端",
      "key": "2",
      "children": [
        {
            "title": "Node.js",
            "key": "5",
            "children": []
        },
        {
            "title": "Golang",
            "key": "6",
            "children": []
        }
      ]
    }
  ]
}

启动服务

在你的包含 db.json 的目录打开终端，执行：

json-server --watch db.json

出现下面的结果：

➜ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/data

  Home
  http://localhost:3000

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

这时你就可以通过接口获取数据了，如：
GET http://localhost:3000/data 就可以返回一个列表

[
  {
    "title": "前端",
    "key": "1",
    "children": [
      {
        "title": "CSS",
        "key": "3",
        "children": []
      },
      {
        "title": "JavaScript",
        "key": "4",
        "children": []
      }
    ]
  },
  {
    "title": "后端",
    "key": "2",
    "children": [
      {
        "title": "Node.js",
        "key": "5",
        "children": []
      },
      {
        "title": "Golang",
        "key": "6",
        "children": []
      }
    ]
  }
]

假如想要获取key=1的那条数据，请求下面的接口：
GET http://localhost:3000/data/1

但是返回了{}，这是为什么呢？原因是 json-server 默认是按id去查询的，把 db.json 的数据key都替换为id，上面这个接口就可以获取到数据了。

当然，json-server 提供了一个命令行参数 --id 可以让我们自己指定数据的主键，如下：

json-server --watch --id key db.json

这样启动后，也可以获取到数据。

新增一条数据

使用最简单的调用方式：

POST http://localhost:3000/data

可以发现 json-server 在 db.json 中插入了一条只包含key的数据，如果想要让数据看起来更加完整，可以这样调用：

POST http://localhost:3000/data
Content-Type: application/json

{
    "title": "全栈",
    "children": []
}

这样就新增了一条类似下面这样的数据：

{
    "title": "全栈",
    "children": [],
    "key": "JATqMgd"
}

更新某条数据

PUT http://localhost:3000/data/JATqMgd
Content-Type: application/json

{
    "title": "全栈开发",
    "children": []
}

发送请求之后，就会发现对应数据的title已经发生了变化。

删除某条数据

DELETE http://localhost:3000/data/JATqMgd

发送请求后，对应的数据就被从 db.json 中移除掉了。

到此，我们已经完成了 增、删、改、查 的接口调用，获得了“CRUD” Boy 荣誉称号。

其实 json-server 还有很多功能，如：条件查询（Filter），分页查询（Paginate），排序（Sort），甚至 关联查询（Relationships）。有兴趣可以去查看它的文档，进行更深一步的学习。

这次的介绍就到此结束了，如果觉得不错，记得点赞收藏鼓励一下❤️。