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
    })
  })
}