In development, the backend interface is often late, but sometimes we have to give the front page of some false data to develop, this time some mock tools is very necessary, in the end I chose a json server tools, because it is simple enough, and it also can and do you know the mock. Js with simulated data (think: Mockjs can exist as a standalone Mock Server, but why not use it on its own?) .

The installation

npm install json-server -g
Copy the code

After the installation is complete, run the json-server -h command to check whether the installation is successful.

json-server [options] <source> Options: --config, -c specifies the config file."json-server.json"] --port, -p Set port number [default: 3000] --host, -h set host [default:"0.0.0.0"[Boolean] --routes, -r --static,-sSet static files --read-only, --ro only allow GET requests [Boolean] --no-cors, --nc Forbid cross-domain resource sharing [Boolean] --no-gzip, --ng Disable GZIP [Boolean] --snapshots, -s Setting snapshot directories."."]
  --delay, -dSet feedback delay (ms) --id, -i sets the id attribute of data (e.g. _id) [default:"id"[Boolean] --help, -h Display help information [Boolean] --version, -v Display version number [Boolean]Copy the code

use

Create a Mock directory and create a JSON file, db.json, in that directory

{
  "list": [{"name": The Wandering Souls Blog."link": "www.iyouhun.com"."id": 1
  },
  {
    "id": 2."name": "Buy and sell"."link": "www.868432.net"
  },
  {
    "id": 3."name": "Wandering Soul Automatic Web Page Creation System"."link": "www.youhun.wang"
  },
  {
    "id": 4."name": The Wandering Souls Blog."link": "www.iyouhun.com"
  },
  {
    "id": 5."name": "Buy and sell"."link": "www.868432.net"
  },
  {
    "id": 6."name": "Wandering Soul Automatic Web Page Creation System"."link": "www.youhun.wang"}}]Copy the code

Execute in the Mock directory

json-server db.json
Copy the code

Open your browser, http://localhost:3000, and view the page. If you want to monitor json file changes, start with a watch or -w parameter.

Supported methods

You can use any HTTP method

Such as:

  • GET /list Gets the list
  • GET /list/1 GET the data whose ID is 1
  • POST /list creates a project
  • PUT /list/1 Updates the data whose ID is 1
  • Update data 1 in PATCH /list/1
  • 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. Such as{"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 contain oneContent-Type:application/jsonHeader to ensure that JSON is used in the request body.

Operational data

I used the postman tool for all the requested data here, and deleted the $. Ajax example I used with jquery for the last one

The query

GET request: http://localhost:3000/list

new

POST request: http://localhost:3000/list

Parameters: {“name”:” Soul blog “,”link”:”www.iyouhun.com”}

After the request is successful, you will see the new successful friend chain information returned

Modify the

PUT request: http://localhost:3000/list/1 modify id of 1 friend chain information

Parameter: {“name”:” hahahahaha guest “,”link”:” WWW “}

delete

DELETE the request: http://localhost:3000/list/1 DELETE id of 1 friend chain information

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