关于api:前端接口调试神器jsonserver

对于曾经入门前端的同学，学会接口调试技能算得上前端进阶的必经之路，然而雇一个后端来配合你学习接口调试显然有些不合理，那有没有本人一套全搞定的小工具呢？当然有，它就是 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）。有趣味能够去查看它的文档进行更深一步的学习。

这次的介绍到此就完结了，如果感觉不错，记得点赞激励一下❤️。

关于api:前端接口调试神器jsonserver

装置

启动服务

新增一条数据

更新某条数据

删除某条数据