Front-end interface debugging artifact json-server

For students who have already started the front-end, learning interface debugging skills can be regarded as the only way to advance the front-end, but it is obviously unreasonable to hire a back-end to cooperate with you to learn interface debugging. Do you have a complete set of gadgets? ? Of course, it is json-server , easy to learn . This article will introduce it.

Install

 npm install -g json-server

Then create a db.json file containing some data, you can use it as a database for back-end classmates to operate.

 {
  "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": []
        }
      ]
    }
  ]
}

start the service

Open a terminal in your directory containing db.json and execute:

 json-server --watch db.json

The following result appears:

 ➜ 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...

Then you can get data through the interface, such as:
GET http://localhost:3000/data returns a list

 [
  {
    "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": []
      }
    ]
  }
]

If you want to get the data with key=1, request the following interface:
GET http://localhost:3000/data/1

But {} is returned, why is that? The reason is that json-server queries by id by default, replace the data key of db.json with id, and the above interface can get the data.

Of course, json-server provides a command line parameter --id that allows us to specify the primary key of the data, as follows:

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

After this is started, the data can also be obtained.

add a piece of data

Use the simplest way to call:

 POST http://localhost:3000/data

It can be found that json-server has inserted a piece of data containing only key in db.json. If you want to make the data look more complete, you can call it like this:

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

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

This adds a new piece of data similar to the following:

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

update a piece of data

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

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

After sending the request, you will find that the title of the corresponding data has changed.

delete a piece of data

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

After sending the request, the corresponding data is removed from db.json.

So far, we have completed the interface calls of adding, deleting, modifying, and checking, and won the honorary title of "CRUD" Boy.

In fact, json-server has many functions, such as: conditional query (Filter), paging query (Paginate), sorting (Sort), and even association query (Relationships). If you are interested, you can check its documentation for further study.

This is the end of this introduction. If you think it's good, remember to like and favorite ❤️.