mock資料即模擬後臺收據，此專案提供了一個data.json的檔案，包括用於展示所需要的資料資訊，模擬了一個數據源，對於真實的實際生產情況就是一個數據庫，此節要解決編寫一些介面，實現與這些資料的互動。

資料的獲取

在build資料夾中開啟dev-sever.js，發現app是用express編寫router介面請求，首先要從data.json中讀取資料

var app = express()
var appData = require('../data.json') //獲取資料
var seller = appData.seller
var goods = appData.goods
var
 
 ratings = appData.ratings

接下來要編寫一些路由

var apiRoutes = express.Router()
apiRoutes.get('/seller',function (req, res) { //function為回撥函式
    res.json({
        errno: 0 //通過errno欄位來標識資料是正常的.
        data: seller //返回的seller具體的資料
    })
})

apiRoutes.get('/goods',function (req, res) { 
    res.json({
        errno: 0
 
 
        data: goods
    })
})

apiRoutes.get('/ratings',function (req, res) { 
    res.json({
        errno: 0 
        data: ratings
    })
})

接下來就是要在express使用這些編寫好的路由。express對應的就是app物件，利用app.use方法，它有兩個引數，第一個引數為path，第二個引數為路由物件

app.use('/api', apiRoutes)

這樣就可以通過訪問localhost:8080/api/seller訪問到資料，可以下載jsonview外掛，可以使得json資料格式更容易觀察。

版本更新

問題來了，原版配置是在build資料夾下中的dev-sever.js檔案中配置，但是新版的vue-webpack-template已經刪除了dev-sever.js，改用webpack.dev.conf.js代替了，首先webpack.dev.conf.js變動如下

const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

devServer: {
    before(app) {
      app.get('/api/seller', function(req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      });
      app.get('/api/goods', function(req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      });
      app.get('/api/ratings', function(req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      });
    }

接下來重新npm run dev執行，啟動後再次輸入之前的地址，如果資料正常顯示，則資料能正常返回。

相關知識