因为最近在做vue的项目，在前端做数据的时候遇到了数据抓取的难题，查了一些资料，自己也研究了一下，总体来说是搞出来了（基于黄奕老师的项目找出来的经验），废话不多说，直接上代码
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
先安装依赖：cnpm install --save jsonp
1. 然后创建一个jsonp.js
import originJSONP from 'jsonp' //引用jsonp
export default function jsonp(url,data,options){
//地址判断和调用处理地址函数
url +=(url.indexOf('?')<0?'?':'&')+param(data)
//返回一个Promise
return new Promise((resolve,reject)=>{
originJSONP(url,options,(err,data)=>{ //用原始的jsonp调用有三个参数
if(!err){
resolve(data)
}else{
reject(err)
}
})
})
}
2、创建一个函数处理地址
1 function param(data){
2
3 let url = '';
4
5 for(var k in data){
6
7 let value = data[k]!==undefined?data[k]:'';
8
9 url +=`&${k}=${encodeURIComponent(value)}`; //地址拼接参数
10
11 }
12 return url ? url.substring(1):''
13 }
2.自己创建个api文件夹，创建一个recomm.js，config 主要用途是处理请求地址url和头部的公共参数，引入刚刚的jsonp.js
代码如下：
1 import jsonp from '' // jsonp.js文件地址；
2
3 import {commonParams,options} from 'config.js 文件地址' //把congfig.js 对象导入进来
4
5 export function getRemented(){
6
7 const url = '这个是你想要挖掘的地址' ；
8
9 //例如我想要的地址是：https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
10
11 const data = Object.assign({},commonParams, //这些参数都是可以在network Header 下
12 query string parameters
13 platform:'h5',
14 uin:0,
15 needNewCode:1
16 })
17
18 return jsonp(url,data,options)
19 }
20
21
3. config.js //用途把公共的参数提取出来
代码如下：
1 export const commonParams = {
2 g_tk:5318,
3 inCharset: 'utf-8',
4 outCharset:'utf-8',
5 notice:0,
6 format:'jsonp'
7 }
8 export const options = {
9 param:'jsonpCallback'
10 }
11 export const ERR_OK = 0;
12
13 //在自己的模块中调用 既可以看到数据
14
15 <template>
16 <div id="app"></div>
17 </template>
18
19 <script type="text/ecmascript-6">
20
21 import{getRemented} from '../../api/recomm'
22
23 import {ERR_OK} from '../../api/config'
24
25 export default{
26 data(){
27 return{}
28 },
29 created(){
30 this._getData();
31 },
32 methods:{
33 _getData (){
34 getRemented ().then((res)=>{
35 if(res.code===ERR_OK){
36 console.log(res.data)
37 }
38 })
39 }
40 }
41 }
42
43 </script>
44
45 <style lang="scss">
46
47 #app {
48
49 font-family: 'Avenir', Helvetica, Arial, sans-serif;
50
51 -webkit-font-smoothing: antialiased;
52
53 -moz-osx-font-smoothing: grayscale;
54
55 text-align: center;
56
57 /*color: #2c3e50;*/
58
59 }
60
61 </style>
62
63
VUE解决axios跨域问题