New VUE-CLI How to use Json-server to Mork

New VUE-CLI How to use Json-server to Morkoriginal March 06, 2018 11:28:32

• Label:
• Vue/
• Front-end
• Webpack/
• Vue-cli

• 185

The new version of the VUE-CLI due to the dev-server. JS is merged into Webpack.dev.conf.js, so the methods in the document are not used when configuring Json-server.

First step: Install: Enter CNPM install json-server--save on the command line

Step Two: Locate Build/webpack.dev.conf.js and add the following configuration to the const Portfinder = require (' Portfinder ') line below

Const EXPRESS = require (' Express ')//node.js built-in frame
Const APP = Express ()//Request Server
var appData = require ('.. /static/json-moni/jiekou1.json ')//load Local data file

var suibian= appdata.suibian//Gets the corresponding local data and assigns a value to the variable

var suibian2= appdata.suibian2//Gets the corresponding local data and assigns a value to the variable

var apiroutes = Express. The Router function of the Router ()//express framework
App.use ('/api ', apiroutes)//Request data by route

Step three: Set up the GET request: Find Devserver under Build/webpack.dev.conf.js and in Watchoptions: {
Poll:config.dev.poll,
}, add the following configuration later:

Before (APP) {
App.get (' Api/suibian ', (req, res) = {
Res.json ({
errno:0,
Data:suibian
})//interface returns JSON data, the data configured above seller is assigned to the data request after the call

}),

App.get (' Api/suibian2 ', (req, res) = {
Res.json ({
errno:0,
Data:suibian2
})//interface returns JSON data, the data configured above seller is assigned to the data request after the call

})

}

The basic configuration is as described above, the following is to write a JSON file and call the interface test

A: The JSON file is as follows:

{
"Suibian": {
"Supports": [
{
"title": "Name1",
"id": "0"
},
{
"title": "Name2",
"id": "1"
},
{
"title": "Name3",
"id": "2"
}
]
}
}

Note: You can view your own written interface JSON data in Http://localhost:8080/api/suibian

II: Templat in the casual writing templates, such as:

<ul>
<li v-for= "item in Itemlis" >{{item.title}}</li>
</ul>

Three: Call can be used Vue-resource, the writing format is as follows:

Export Default {
Name: ' HelloWorld ',
Created:function () {
this. $http. Get (' Api/suibian '). Then (RES) =>{
Console.log (RES)
This.itemlis=res.data.data.supports//Note Use the arrow function for this or you need to define a variable outside the function to assign this value to the variable
Console.log (This.itemlis)
},function (Err) {
Console.log (ERR)
})
},
Data () {
return {
Msg: ' Welcome to Your vue.js App ',
Itemlis:[],
}
}
}

New VUE-CLI How to use Json-server to Mork