Vue后台数据模拟以及抓取线上数据

发布时间:2019-05-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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
    })
  })
}

脚本宝典总结

以上是脚本宝典为你收集整理的Vue后台数据模拟以及抓取线上数据全部内容,希望文章能够帮你解决Vue后台数据模拟以及抓取线上数据所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue