json-server implements back-end data simulation

This time I will bring you json-server to implement back-end data simulation. What are the precautions for json-server to implement back-end data simulation. The following is a practical case, let’s take a look.

During the development process, the front-end and back-end are separated or not separated. The interface is mostly developed with the page later, so it is very necessary to establish a rest APL interface to provide virtual data to the front-end, so here I use json- As a tool, server supports CORS and JSONP cross-domain requests, supports GET, POST, PUT, PATCH and DELETE methods, and also provides a series of query methods, such as limit, order, etc. , Next, I wrote my own usage intentions into documents

Installation

First of all, there must be a node environment (all use json-server There must be a node environment) and then install json-server globally

npm install json-server -g

After the installation is completed, check whether the global installation is successful

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

Create a db.json directory in the project root directory, and then write it Information

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

Add a line of commands to the scripts in package.json

  "json": "json-server db.json --port 3003"

Execute the command in the project directory

npm run json

You will see such an interface in bash

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

Congratulations on the successful startup!

Enter the web page for access at this time

You can access it at this time

http://localhost:3003/api

You can see the json string written before

The json-server is now started.

The calling code is as follows After initializing the

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

page, you can see that the data is completed

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for cropping images with Vue-cropper

Detailed explanation of the steps for using the Vue Mixin function

The above is the detailed content of json-server implements back-end data simulation. For more information, please follow other related articles on the PHP Chinese website!