最近在学习Vue.js,在触及Vue-cli项目开发过程中,对于抓取第三方数据的学习过程中的一些总结和记录。
第一步:先安装jsonp;
第二步:创建一个jsonp.js文件,在该文件中引入jsonp;
import originJSONP from 'jsonp'
并在该文件中导出一个jsonp()函数,该函数传入三个参为url, data, option,该函数的作用是将传入的参数进行处理返回出去;
//该处传入的url地址为不带参数的url,data为url地址中的参数数据,option为传入到originJSONP()函数中的参数
export default function jsonp(url, data, option){
//该处通过到data数据的处理,将处理后的data数据拼接到url中
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) : ''
}
第三步:创建一个config.js文件,该文件主要是为了导出上个jsonp.js中需要的jsonp(url, data, option){...}中data的数据,
方便整理;
以下对象中的键值对数据是来自于要抓取的url地址中的一些参数
export const commonParams = {
g_tk: 5381,
uin: 0,
format: "jsonp",
inCharset: "utf-8",
outCharset: "utf-8",
notice: 0,
}
export const options = {
param : 'jsonpCallback'
}
export const ERR_OK = 0
如图中的parameters中的数据:
![](https://i-blog.csdnimg.cn/blog_migrate/f6a7794be5e3489505842b3a93533a54.png)
第四步:创建一个方法JS文件,该文件主要导出一些函数,该函数的作用为传入jsonp.js文件中jsonp(url,data,options)函数所
需要的参数,并将该jsonp()函数返回出去;
import jsonp from '@/common/js/jsonp'
import { commonParams ,options} from './config'
export function getRecommend(){
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({},commonParams,{
platform : 'h5',
uin : 0,
needNewCode : 1
})
return jsonp(url, data, options)
}
第五步:得到返回的jsonp()函数及相关的参数后,在Vue的组件中引入该方法
import {getRecommend} from '@/api/recommend'import {ERR_OK} from '@/api/config'
并在Vue组件的methods中定义一个函数,并在created钩子函数中调用该函数
created(){
this._getRecommend(),
},
methods:{
_getRecommend(){
getRecommend().then((res)=>{
if(res.code === ERR_OK){
console.log(res.data.slider)
}
})
}
}
这样我们就得到了我们想要的数据。
有的数据我们可以抓取,但是有的数据由于设置了host信息,我们用上面的方法抓取不到,这就需要其他的办法了。
以上是我个人的一些小的总结,因为刚刚接触,有些用语不正确,还请指出,希望大家一起进步,(o^_^o).