1. Install in project root jsonserver and axios Plug in and global installation json-server
npm install json-server --save
npm install axios --save
npm install -g json-server
2. Create a new data file in the project root directory db.json, The contents are as follows ：
3. open packege.json stay "scripts" Add a line to the
jsonsv It's a random name , Pay attention to if you take jsonserver Such a name may be misreported .
Input in the control window npm run jsonsv Running the server , It can also be input directly json-server --watch
db.json Running the server , You don't have to be in "script" Add the line above , But it's a bit troublesome to enter such a long and hard to remember command every time .
Open browser input locahost:3000 It can be seen that jsonserver Start page for .
input localhost:3000/posts Available db.json in “posts” Data for .
4.vue The default port for is 8080, and jsonserver The default port for is 3000, So we need to configure it jsonserver Port of
open build\webpack.dev.conf.js, Insert the following code , take jsonserver The listening port of is set to 8081.
5. Then we need to put the local localhost:8080 Request sent forward to localhost:8081, The local request data interface is implemented .
open config\index.js, find proxyTable{}, Add the following code .
Configuration complete , Enter the command npm run
dev Running the server , Open in browser at the same time localhost:8080 and localhost:8081 Can successfully display the project home page and jsonserver Start page for , So we have the same server running at the same time vue and jsonserver.
6. The next step is in the vue of use axios request jsonserver Data on
stay main.js Global registration in axios
Enter the command npm run
dev Running the server , Browser open localhost:8080, Page and console will display the /api/post（localhost:8081/posts） Requested data .
Technology