Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

We have learned that in the actual project development, the front-end uses JSON-server mock to simulate the data interface in the development mode of front and back end separation. At this time, the back-end interface has not been developed, and the front-end needs data development. In this case, the front-end mock data is required first, and targetUrl is used to replace it after the back-end interface is written: baseUrl & test interface is developed and the corresponding interface is switched.

withjson-serverThe mock data

With a.json file, a single command can start a local service, make a request to the service, and return the.json file contents. Give it a try:

Json-server interface description

Json-server For specific request types and details, see github.com/typicode/js…

Interface specification

  • GET Request data list

        + localhost:3000/users

  • GET requests data with a specified ID:

        + localhost:3000/users/1

  • GET requests data for the specified field value

    + localhost:3000/users? Name = name= name

  • GET data paging

    + localhost:3000/users? _page=1&_limit=2

  • GET data sort

    + localhost:3000/users? _sort=age&_order=asc

    + ASC ascending desc descending order

  • GET interval query

    + localhost:3000/users? age_gte=30&age_lte=40

  • GET the search

    + localhost:3000/users? Q = zhang SAN

  • GET Associated query

  • localhost:3000/companies/1/users

  • POST Add data

        + localhost:3000/users

        + Headers:{ Content-Type:’application/json’ }

        + body -> raw

      {
     "name": "Daisy"."age": 50."companyId": 3
  }
Copy the code

  • Delete Delete data

        + localhost:3000/users/1

  • Patch update data

        + localhost:3000/users/3

        + Headers:{ Content-Type:’application/json’ }

        + body -> raw

        {
     "age": 100
    }
Copy the code