1、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