首先進行所需插件的安裝,vue-resource,json-server,proxyTable.vue
在main.js中引入vue-resource模塊,Vue.use(vueResource).webpack
接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')後面引入json-server.web
/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一個server*/
const apiServer = jsonServer.create()
/*將db.json關聯到server*/
const apiRouter = apiServer.router('db.json')
const middlewares = jsonServer.defaults()\
apiServer.use(apiRouter)
apiServer.use(middlewares)
/*監聽端口*/
apiServer.listen(3000,(req,res)=>{
console.log('jSON Server is running')
})
複製代碼
如今重啓服務器後瀏覽器地址欄輸入localhost:3000能進入以下頁面則說明json server啓動成功了ajax
如今找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 並在其中配置vue-cli
'/api':{
changeOrigin:true, //示範容許跨域
target:"http://localhost:3000", //接口的域名
pathRewrite:{
'^/api':'' //後面使用重寫的新路徑,通常不作更改
}
}
複製代碼
如今能夠使用localhost:8080/api/apiName 請求json數據了express
在項目中經過resource插件進行ajax請求json
在data (){}前使用鉤子函數created:function(){
this.$http.get('/api/newsList')
.then(function(res){
this.newsList = res.data //賦值給data中的newsList
},function(err){
console.log(err)
})
}
複製代碼
在項目中新建routes文件並在其中新建api.js,內容以下:api
const express = require('express')
const router = express.Router()
const apiData = require('../db.json')
router.post('/:name',(req,res)=>{
if(apiData[req.params.name]){
res.json({
'error':'0',
data:apiData[req.params.name]
})
}else{
res.send('no such a name')
}
})
module.exports = router
複製代碼
接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')後面引入express,以下:跨域
const express = require('express')
const app = express()
const api = require('../routes/api.js')
app.use('/api',api)
app.listen(3000)
複製代碼
如今找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 並在其中配置瀏覽器
'/api':{
changeOrigin:true, //示範容許跨域
target:"http://localhost:3000", //接口的域名
pathRewrite:{
'^/api':'/api' //後面使用重寫的新路徑,通常不作更改
}
}
複製代碼
重啓以後,即可以post請求訪問數據了.