vue+webpack項目中使用dev-server搭建虛擬服務器，請求json文件數據，實現先後臺分離開發

在項目開發中，先後臺分離，作了假數據，項目使用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.getBoardList
var 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啓動項目