Vue uses json-server for back-end data simulations

The front and back end of the development process is separated or not separated, the interface is mostly after the development of the page, so it is necessary to set up a rest APL interface to provide virtual data to the front end, so here I used json-server as a tool to support cors and JSONP cross-domain requests, support get, POST, put, PATCH and DELETE methods, but also provide a series of query methods, such as Limit,order, and then I put my own on the use of the heart to write a document

Installation

First of all, there must be a node environment (all json-server must have a node environment) and then the global installation Json-server

npm install json-server -g

Check whether the global installation is successful after installation is complete

G: \demo\javascript\vue\vue One\project\my-project\vue_two\my-project>Json-server-hIndex.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.jsDb.jsonIndex.jsFile.jsIndex.jsHttp://example.com/db.jsonHTTPS://github.com/typicode/json-server

Create a Db.json directory at the project root and write the information

{  "API"  :  [ { "text" :  "statistics" , : ,  "hot" : true}, { "T Ext ": , " link ": " # ",  "hot" : true}, { "text" :  "traffic analysis" , :  "#" ,  "hot" : true}, {:  "ad release" , : ,  "hot" : false}   }   

Add a line to the scripts inside the Package.json.

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

Executing commands in the project directory

npm run json

You'll see this interface in bash.

>[email protected] 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 your successful start!

This time access to the Web page

This is the time to visit.

http://localhost:3003/api

You can see the JSON string that was previously written

By this json-server, the boot is complete.

The code for the call is like this

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

Page initialization to see data complete

Vue uses json-server for back-end data simulations