json-server獲取伺服器資料只能用get方式，而express支援post方式獲取資料，之前的為均是從單個檔案中獲取的資料，若介面非常多，都從單個檔案中獲取會導致檔案過大，也不容易維護假資料，因此希望不同介面可以從不同檔案中獲取，使其結構更加清楚

express 一般專案中均安裝，若未安裝

npm install express --save

1.build資料夾webpack.dev.config.js新增設定

/*******mock資料 start**********/
//支援post mock資料
var express = require('express');
//啟動expressServer
var expressServer = express()
//返回json資料
var bodyParser = require('body-parser')
expressServer.use(bodyParser.urlencoded({
  extended: true
}))
expressServer.use(bodyParser.json())
var expressRouter = express.Router()

var fs = require('fs')

//定義請求路徑
//folder資料夾
//file 檔案
//apiName 檔案中對應介面欄位 
expressRouter.route('/:folder/:file/:apiName')
  .all(function (req, res) {
    console.log("want to read more files")
    console.log(req.path)
    console.log(req.params.apiName)
    console.log(req.params.file)
    console.log(req.params.folder)
    var fileName = './mock/' + req.params.folder + "/" + req.params.file + '.json';
    console.log(fileName)
    fs.readFile(fileName, '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')
      }

    })
  })

//expressServer.use(relative,expressRouter);
//relative可以設定請求前新增的路徑
expressServer.use(expressRouter);
expressServer.listen((PORT || config.dev.port) + 2, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + ((PORT || config.dev.port) + 2) + '\n')
})
/*******mock資料 end**********/
 

2.設定遠端訪問代理：
一般在config資料夾，index.js檔案的屬性proxyTable中設定：

proxyTable: {//訪問代理
      "/api": {
        target:"http://localhost:8082",
        changeOrigin:true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

3.建立模擬資料儲存檔案
建立資料夾mock用於存放所有模擬檔案，該資料夾與package.json同級，直接在專案資料夾下

新建meet模組資料儲存資料夾，新建檔案meetlist.json，meetlist.json內容如下：

{
  "getNewsList": [
    {
      "id": 1,
      "title": "新聞條目1新聞條目1新聞條目1新聞條目1",
      "url": "http://starcraft.com"
    },
    {
      "id": 2,
      "title": "新聞條目2新聞條目2新聞條目2新聞條目2",
      "url": "http://warcraft.com"
    },
    {
      "id": 3,
      "title": "新聞條3新聞條3新聞條3",
      "url": "http://overwatch.com"
    },
    {
      "id": 4,
      "title": "新聞條4廣告發布",
      "url": "http://hearstone.com"
    }
  ],
  "login": {
    "username": "yudongdong",
    "userId": 123123
  },
  "getPrice": {
    "amount": 678
  },
  "createOrder": {
    "orderId": "6djk979"
  },
  "getOrderList": {
    "list": [
      {
        "orderId": "ddj123",
        "product": "資料統計",
        "version": "高階版",
        "period": "1年",
        "buyNum": 2,
        "date": "2016-10-10",
        "amount": "500元"
      },
      {
        "orderId": "yuj583",
        "product": "流量分析",
        "version": "戶外版",
        "period": "3個月",
        "buyNum": 1,
        "date": "2016-5-2",
        "amount": "2200元"
      },
      {
        "orderId": "pmd201",
        "product": "廣告發布",
        "version": "商鋪版",
        "period": "3年",
        "buyNum": 12,
        "date": "2016-8-3",
        "amount": "7890元"
      }
    ]
  }
}
 

4.獲取資料
“/api/meet/meetlist/getNewsList" ，檔案meetlist.json中的屬性名getNewsList欄位對應的內容所需內容資料

//後端請求的資料
  //express 可以虛擬前端的資料
  created: function () {
  //注意請求路徑
    this.$http.post('/api/meet/meetlist/getNewsList')
    .then((res) => {//請求成功
      console.log(res)
      //this指向當前程式碼塊而非執行環境
      this.newsList = res.data
    }, (err) => {//請求失敗
      console.log(err)
    })
  },

5.如果想檢視上述webpack.dev.config.js檔案中的配置的輸出內容：

    console.log("want to read more files")
    console.log(req.path)
    console.log(req.params.apiName)
    console.log(req.params.file)
    console.log(req.params.folder)

可以通過瀏覽器直接訪問介面：
http://localhost:8082/meet/meetlist/meeting
瀏覽器輸出：

終端輸出：

實現了多檔案訪問資料