vue2.5.2經過http請求獲取靜態的json數據

1.配置 build/webpack.dev.conf.js

// 獲取靜態json數據
const express = require('express')
const app = express()
const apiServer = express()
const bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
const apiRouter = express.Router()
const fs = require('fs')
apiRouter.route('/:apiName')
  .all(function (req, res) {
    fs.readFile('./db.json', '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')
      }

    })
  })

apiServer.use('/api', apiRouter);
apiServer.listen(8081, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (8081) + '\n')
})

2.新建 db.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元"
      }
    ]
  }
}

3.經過 localhost:8081/api/getNewsList 訪問

4.在頁面中獲取的方式

export default {
    data() {
      newsList: []
    },
    created: function(){
      this.$http.get('api/getNewsList').then((res)=> {
        this.newsList = res.data
      },(err)=> {
        console.log(err);
      })
    }
  }