New VUE-CLI How to use Json-server to Morkoriginal March 06, 2018 11:28:32
- Label:
- Vue/
- Front-end
- Webpack/
- Vue-cli
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