在項(xiàng)目開發(fā)中豺妓，前后臺(tái)分離，做了假數(shù)據(jù)，項(xiàng)目使用vue2.0重構(gòu)琳拭，后臺(tái)也推到重來了训堆，為了不耽誤開發(fā)進(jìn)程，我做了虛擬的數(shù)據(jù)請求白嘁，使用vue-cli腳手架搭建的項(xiàng)目文件中dev-server搭建虛擬api請求坑鱼，訪問自己mock的假數(shù)據(jù)虛擬請求后臺(tái)的模式，具體做法如下
在build/dev-server.js文件中
在var app = express()這個(gè)實(shí)例的下面添加如下代碼
// 本地json-server服務(wù)器搭建代碼
// 引入數(shù)據(jù)庫文件
var appData = require('../mock.json')
// 引入數(shù)據(jù)庫
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法來創(chuàng)建連接時(shí)候的請求
apiRoutes.post('/getBoardList', function (req, res) {
res.json({
errno: 0 ,
data: getBoardList
});
})
// 調(diào)用api
app.use('/api', apiRoutes)
其中
appData 依賴的mock.json文件是自己mock的假數(shù)據(jù)的文件絮缅，根據(jù)前后臺(tái)需求自己mock或者使用mock.js制作假數(shù)據(jù)數(shù)據(jù)大概格式如下
{
"getBoardList": {
"logn":"0",
"msg": {
"name": "精靈",
"sign": "一只可愛的小精靈",
"src": "",
"phoneNub": "15120171717",
"six": "未知",
"job": "私人金融專家",
"add": "北京市 朝陽區(qū) 將臺(tái)"
}
}
}
getBoardList是一個(gè)接口鲁沥，
var getBoardList = appData.getBoardList 就是在appData定義了這一個(gè)接口數(shù)據(jù)。
var apiRoutes = express.Router() 是創(chuàng)建了一個(gè)api的路由耕魄，apiRoutes.post是創(chuàng)建一個(gè)post接口画恰，這個(gè)post接口有一個(gè)req和一個(gè)res參數(shù)，分別執(zhí)行請求和返回吸奴，當(dāng)返回的時(shí)候會(huì)給我們一個(gè)json允扇，這個(gè)json包括一個(gè)狀態(tài)碼errno和返回的數(shù)據(jù)data（data指向了接口數(shù)據(jù)getBoardList）。然后當(dāng)我們調(diào)用api的時(shí)候app.use('/api', apiRoutes)则奥，就能正常使用這個(gè)服務(wù)了這里我使用了vue2.0推薦的axios請求數(shù)據(jù)考润，代碼如下
this.$http.post('/api/getBoardList')
.then(function (response) {
console.log(response.data.data);
alert('成功了');
})
.catch(function (code) {
alert('失敗了');
console.log(code);
});
//也可以直接在瀏覽器下輸入http://localhost:8080/api/getBoardList測試(npm run dev)
打開瀏覽器的控制臺(tái)的network，你會(huì)發(fā)現(xiàn)已經(jīng)產(chǎn)生了網(wǎng)絡(luò)請求
同時(shí)读处，數(shù)據(jù)也愉快的返回回來了：
如果想添加接口數(shù)據(jù)糊治，繼續(xù)在dev-server.js中添加就可以了，post档泽，get等等都可以俊戳。
注意，每次更改dev-server.js后需要重新npm run dev啟動(dòng)項(xiàng)目
