在項(xiàng)目開發(fā)中，先后臺分離，作了假數(shù)據(jù)，項(xiàng)目使用vue2.0重構(gòu)，后臺也推到重來了，為了避免耽誤開發(fā)進(jìn)程，我作了虛擬的數(shù)據(jù)請求，使用vue-cli腳手架搭建的項(xiàng)目文件中dev-server搭建虛擬api請求，訪問本身mock的假數(shù)據(jù)虛擬請求后臺的模式，具體作法以下vue

在build/dev-server.js文件中ios

在var app = express()這個(gè)實(shí)例的下面添加以下代碼vue-cli

//本地json-server服務(wù)器搭建代碼//引入數(shù)據(jù)庫文件

var appData = require('../mock.json')//引入數(shù)據(jù)庫

var getBoardList =appData.getBoardListvar apiRoutes =express.Router()//使用api的方法來建立鏈接時(shí)候的請求

apiRoutes.post('/getBoardList', function (req, res) {

res.json({

errno:0,

data: getBoardList

});

})//調(diào)用api

app.use('/api', apiRoutes)

其中?數(shù)據(jù)庫

appData 依賴的mock.json文件是本身mock的假數(shù)據(jù)的文件，根據(jù)先后臺需求本身mock或者使用mock.js制做假數(shù)據(jù)

數(shù)據(jù)大概格式以下

{"getBoardList": {"logn":"0","msg": {"name": "精靈","sign": "一只可愛的小精靈","src": "","phoneNub": "15120171717","six": "未知","job": "私人金融專家","add": "北京市 朝陽區(qū) 將臺"}

}

}

getBoardList是一個(gè)接口，

var getBoardList =appData.getBoardList 就是在appData定義了這一個(gè)接口數(shù)據(jù)。

var apiRoutes =express.Router() 是建立了一個(gè)api的路由，apiRoutes.post是建立一個(gè)post接口，這個(gè)post接口有一個(gè)req和一個(gè)res參數(shù)，分別執(zhí)行請求和返回，當(dāng)返回的時(shí)候會給咱們一個(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);

});

打開瀏覽器的控制臺的network，你會發(fā)現(xiàn)已經(jīng)產(chǎn)生了網(wǎng)絡(luò)請求

同時(shí)，數(shù)據(jù)也愉快的返回回來了：express

若是想添加接口數(shù)據(jù)，繼續(xù)在dev-server.js中添加就能夠了，post，get等等均可以。npm

注意，每次更改dev-server.js后須要從新npm run dev啟動項(xiàng)目json

總結(jié)

以上是生活随笔為你收集整理的vue 虚拟服务器,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现先后台分离开发...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。