Vue後臺數據模擬以及抓取線上數據

如今的vue裏dev-server.js被替換成了webpack-dev-conf.js,如下分爲本地後臺數據和線上數據抓取兩種狀況。

數據抓取

首先

const axios = require('axios')
const express = require("express")
const app = express()

其次，找到：devServer

在裏面加上before方法，下面的before(app){ ... }就是例子

devServer: {
before(app){
  app.get('/api/getDiscList', function (req, res) {
    var url = 'Url地址'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      console.log(「success」);
      res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  })
},

clientLogLevel: 'warning',
historyApiFallback: {
  rewrites: [{
    from: /.*/,
    to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
  }, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ? {
  warnings: false,
  errors: true
} : false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
  poll: config.dev.poll,
}

},

本地數據（大體同上面同樣）

第一步

const express = require('express')
const app = express()//請求server
var appData = require('../data.json')//加載本地數據文件
var seller = appData.seller//獲取對應的本地數據
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//經過路由請求數據

第二步：找到devServer,在裏面加上before（）

before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })//接口返回json數據，上面配置的數據seller就賦值給data請求後調用
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      errno: 0,
      data: ratings
    })
  })
}