Vue--获取数据

一、Jsonp抓取数据

用 npm 安装 jsonp

npm install jsonp

创建 jsonp.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

在 api 创建 config.js

export const commonParams = {
    //Query string parameters
　　//所抓取网页api参数

　　 g_tk: 5381,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'
}

export const options = {
    param: 'jsonpCallback'
}

export const ERR_OK = 0

在 api的try.js 里导入 jsonp

import jsonp from 'common/js/jsonp'
import{commonParams , options} from './config'

export function getTry(){
    const url = 'api数据的地址链接'

    const data = Object.assign({},commonParams,{
        //Query string parameters
　　　　　platform: 'h5',
        uin: 0,
        needNewCode: 1
    })

    return jsonp(url, data, options)
} 

在 try.vue 页面的 script 引用 getTry

<script type="text/ecmascript-6">
import { getTry} from "api/try"
import { ERR_OK } from "api/config"

export default {
  created() {
    this._getTry()
  },
  methods: {
    _getTry() {
      getTry().then((res) => {
        if (res.code === ERR_OK) {
          this.trying = res.data.slider
        }
      })
    }
  }
</script>

二、接口代理抓取数据

用 npm 安装 axios 以及 express

npm install axios

npm install express

在 build / webpack.dev.conf.js 导入 axios 以及 express

const axios = require('axios')
const express = require('express')
const apiRoutes = express.Router()

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    // 在这里添加一个before方法
    before(apiRoutes) {
      apiRoutes.get('/api/getDiscList', function (req, res) {
        const url = 'api数据的地址链接';
        axios.get(url, {
          headers: {
            referer: '配置api地址referer',
            host: '配置api地址host'
          },
          params: req.query
        }).then((response) => {
          //将数据返回给前端
　　　　　　res.json(response.data)
        }).catch((e) => {
          console.log(e);
        })
      });
      //app.use('/api', apiRoutes);
    }

在 try.js 导入 axios

import axios from 'axios'

export function getDataList(){
    const url = '/api/getDataList'

    const data = Object.assign({},commonParams,{
        //Query string parameters
        //所抓取网页api参数
        platform: 'yqq',
        hostUin: 0,
        sin: 0,
        ein: 29,
        sortId: 5,
        needNewCode: 0,
        categoryId: 10000000,
        rnd: Math.random(),
        format: 'json'
    })

    return axios.get(url, {
        params: data
    }).then((res) => {
        return Promise.resolve(res.data)
    })
}        

 在 try.vue 页面的 script 引用 getDataList()

<script type="text/ecmascript-6">
import { getDataList } from "api/recommend"
import { ERR_OK } from "api/config"

export default {
  created() {
    this._getDataList()
  },
  methods: {
_getDataList(){
      getDiscList().then((res) => {
          if(res.code === ERR_OK){
              console.log(res.data.list)
          }
      })
    }
｝
</script>