Json-server tutorial

Introduction to jSON-server

** JSON-server: ** A server that runs locally in the front end and can store data

** Function: ** analog interface, operation simulation data

Use of JSON-server

2.1 installation

npm install json-server -D
Copy the code

• After the installation is complete, thejson-server -hCommand to check whether the installation succeeds

Json-server [options] options: --config, -c Specifies the config file [default: "json-server.json"] --port, -p specifies the port number [default: 3000] --host, -h Set host [default: "0.0.0.0"] --watch, -w Monitor file [Boolean] --routes, -r specifies the route file --static, -s specifies the static file --read-only, --ro allows only GET requests [Boolean] --no-cors, --nc Forbids cross-domain resource sharing [Boolean] --no-gzip, --ng Forbids gzip [Boolean] --snapshots, - S snapshot set directory (default: ". "] - delay, 3-d set feedback delay (ms) - id, -i set the id attribute of data (e.g. _id) [the default: [Boolean] --help, -h Display help information [Boolean] --version, -v Display version number [Boolean]Copy the code

2.2 the use of

1. Json – server installation

2. Create the db.json file

   {
     "posts": [{"id": 1."title": "json-server"."author": "typicode"}]."comments": [{"id": 1."body": "some comment"."postId": 1}]."profile": {
       "name": "typicode"}}Copy the code

3. run

   json-server db.json
   Copy the code

   Loading db.json
   Done
   
   Resources
   http://localhost:3000/posts
   http://localhost:3000/comments
   http://localhost:3000/profile
   
   Home
   http://localhost:3000
   Copy the code

4. Enter the url in the browser to access the data for the response

Three. Methods of support

You can use any HTTP method

• The query

  • GET /list Gets the list
  • GET /list/1 GET the data whose ID is 1

• new

  • POST /list creates a project

• Modify the

  • PUT /list/1 Updates the data whose ID is 1
  • Update data 1 in PATCH /list/1

• delete

  • DELETE /list/1 DELETE the data whose ID is 1

Note:

• When you send a POST, PUT, PATCH or DELETE request, the changes are automatically and securely saved to your db.json file.

• Your request body body should be a closed object. For example, {” name “:” Foobar “}

• Id is not required, and any ID value is ignored in PUT or PATCH methods.

• In POST requests, ids can be added, and if the value is not occupied, it will be used, otherwise it will be generated automatically.

• POST, PUT, or PATCH requests should include a content-Type :application/ JSON header to ensure that JSON is used in the request body.

4. CRUD – Demo

For the following DMEO, we use the Postman tool

Before executing, run the server using json-server db.json

4.1 the query

• GET request:http://localhost:3000/comments

4.2 new

• POST request:http://localhost:3000/comments
• Parameters:{"body":"hello restapi","postId":1}

4.3 to modify

• PUT request:http://localhost:3000/comments/1
• Parameters:{"body":"hello world","postId":888}

4.4 delete

• The DELETE request:http://localhost:3000/comments/2

4.5 Use Ajax to send add, delete, change and query requests

We can also send requests to manipulate data through jQuery ajax

 / / new
$.ajax({
    type: 'POST'.url: 'http://localhost:3000/comments'.data: {body:'hello world'.postId:888
    },
    success: function (data) {
        console.log(data)
    }
})

/ / query
$.ajax({
    type: 'GET'.url: 'http://localhost:3000/comments'.success: function (data) {
        console.log(data)
    }
})

/ / modify
$.ajax({
    type: 'PUT'.url: 'http://localhost:3000/comments/1'.data: {body:'hello world'.postId:888
    },
    success: function (data) {
        console.log(data)
    }
})

/ / delete
$.ajax({
    type: 'DELETE'.url: 'http://localhost:3000/comments/1'.success: function (data) {
        console.log(data)
    }
})
Copy the code

Filtering five.

We can filter the data by adding parameters to the URL

Such as:

• http://localhost:3000/comments/1: Queries data with ID 1 and returns an object
• http://localhost:3000/comments?name=zhangsan: Returns an array whose name is zhangsan

6. Note that

If jSON-server is used to simulate multi-layer route nesting, the multi-layer data nesting in db.json cannot be used to simulate multi-layer route nesting.

In other words, the route can only match the key value in the outermost layer of THE JSON, db.json. None of the inner key values will be matched