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的data.js 里導入 jsonp

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

export function getData(){
    const url = 'api數據的地址鏈接'

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

    return jsonp(url, data, options)
} 

在 data.vue 頁面的 script 引用 getData()

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

export default {
  created() {
    this._getData()
  },
  methods: {
    _getData() {
      getData().then((res) => {
        if (res.code === ERR_OK) {
          console.log(res.data.slider)
        }
      })
    }
  }
</script>

二、Axios接口代理抓取數據

用 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 app = express()
const apiRoutes = express.Router()
app.use('/api', apiRoutes);

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

在 data.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)
    })
}        

 在 data.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(){
      getDataList().then((res) => {
          if(res.code === ERR_OK){
              console.log(res.data.list)
          }
      })
    }
｝
</script>