在項目開發中，前后臺分離，做了假數據，項目使用vue2.0重構，后臺也推到重來了，為了不耽誤開發進程，我做了虛擬的數據請求，使用vue-cli腳手架搭建的項目文件中dev-server搭建虛擬api請求，訪問自己mock的假數據虛擬請求后臺的模式，具體做法如下

在build/dev-server.js文件中

在var app = express()這個實例的下面添加如下代碼

//本地json-server服務器搭建代碼//引入數據庫文件

var appData = require(‘../mock.json‘)//引入數據庫

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

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

res.json({

errno:0,

data: getBoardList

});

})//調用api

app.use(‘/api‘, apiRoutes)

其中

appData 依賴的mock.json文件是自己mock的假數據的文件，根據前后臺需求自己mock或者使用mock.js制作假數據

數據大概格式如下

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

}

}

getBoardList是一個接口，

var getBoardList =appData.getBoardList 就是在appData定義了這一個接口數據。

var apiRoutes =express.Router() 是創建了一個api的路由，apiRoutes.post是創建一個post接口，這個post接口有一個req和一個res參數，分別執行請求和返回，當返回的時候會給我們一個

json，這個json包括一個狀態碼errno和返回的數據data(data指向了接口數據getBoardList)。

然后當我們調用api的時候app.use(‘/api‘, apiRoutes)，就能正常使用這個服務了

這里我使用了vue2.0推薦的axios請求數據，代碼如下

this.$http.post(‘/api/getBoardList‘)

.then(function (response) {

console.log(response.data.data);

alert(‘成功了‘);

})

.catch(function (code) {

alert(‘失敗了‘);

console.log(code);

});

打開瀏覽器的控制臺的network，你會發現已經產生了網絡請求

同時，數據也愉快的返回回來了：

如果想添加接口數據，繼續在dev-server.js中添加就可以了，post，get等等都可以。

注意，每次更改dev-server.js后需要重新npm run dev啟動項目

原文：http://www.cnblogs.com/jasonwang2y60/p/6498802.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。