vue 獲取後端數據

一、vue-resource從後端請求咱們須要的數據

下載安裝npm install vue-resource

裝完以後從新啓動項目

 

模擬後端數據，啓動測試服務器 

注意哦：最新的（我用的3.6）webpack 的build目錄下刪除了dev-server.js ,

在webpack.dev.conf.js這個文件中編輯。

 

圈1//webpack.dev.conf.js

//第一種模擬服務器json-server

//json-server 模擬後端數據，啓動測試服務器 只能get 獲取數據

//安裝npm install json-server

const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

 

apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen(8001, () => {
console.log('JSON Server is running')
})
//end json-server

 

//第二種模擬服務器 不須要安裝，get post 都支持    (推薦)

var express = require('express')

var apiServer = express()
var bodyParser=require('body-parser')
apiServer.use(bodyParser.urlencoded({extended:true}))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs') //node自帶的fs
apiRouter.route('/:apiName') //指的是/api 下一級的路由路徑名字
.all(function (req, res) { //all只得是get post都支持
fs.readFile('./db.json', 'utf8', function (err, data) {
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])  
}
else {
res.send('no such api name')
}

})
})
apiServer.use('/api', apiRouter);
apiServer.listen(8001, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + 8001 + '\n')
})

//end測試服務器

圈2//在config 文件夾下的index.js 裏面找到dev

//添加代理服務器

proxyTable: { // 服務器端代理
'/api/':'http://localhost:8001/' //就是訪問8000端口下的/api路由的時候，實際上是訪問的代理端口8001
}

 同時build > webpack.dev.conf.js >由 apiServer.use(apiRouter) > 改成 apiServer.use('/api',apiRouter)

快看！！接收到了請求代理服務器的數據  哈哈哈好開心

 

 

能夠把後臺模擬數據寫在devServer中

圈3//在webpack.dev.conf.js找到devServer

before(app) {

 app.get('/api/someApi', (req, res) => { res.json({ // 這裏是你的json內容 })  }) }

 

圈4 箭頭函數裏面的this 是代碼環境下的 this 而不是執行環境下的 this