Vue--獲取資料
阿新 • • 發佈:2018-11-10
一、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>