vue项目中jsonp跨域获取qq音乐首页推荐问题


Posted in Javascript onMay 30, 2018

自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目。在项目中也是遇到了很多的问题。

接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错。

第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装。

使用 npm 引入,输入:

npm install jsonp --save

安装好之后可以在自己的 package.json 文件中查看是否有此依赖。如下图所示:

vue项目中jsonp跨域获取qq音乐首页推荐问题 

如果有红框中显示的内容,说明安装成功,进入下一步封装:

import originJSONP from 'jsonp'  //引入jsonp
//进行封装并export
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)
  }
 })
 })
}
//对data进行处理,并encodeURIComponent()进行转码。
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) : ''
}

封装完成 jsonp.js 文件之后,进入第二步:

在项目文件中配置需要的 api 。第一个 api ,命名为 config.js.

export const commonParams = {       //配置一些公共参数
 g_tk:5381,
 format: 'json',
 inCharset: 'utf-8',
 outCharset:'utf-8',
 notice: 0,
}
export const options = {           
 param: 'jsonpCallback'
}
export const ERR_OK = 0         //设置属性

然后再创建一个 recommend.js 的文件:

import jsonp from 'common/js/jsonp'          //引入jsonp
import {commonParams,options} from './config'    //引入config.js
export function getRecommend(){
   const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
   const data = Object.assign({},commonParams,{     //es6的assign将commonParams和
    uin: 0,                      //之后的对象合并为一起,放在
    platform:'h5',                   //前面的{}之中。
    needNewCode: 1,
   })
   return jsonp(url,data,options)
}

其中的data最后的数据为:

vue项目中jsonp跨域获取qq音乐首页推荐问题 

然后,最后一步,就是在项目中所需要的.vue文件中去请求数据啦。

import {getRecommend} from 'api/recommend'    //引入recommend.js中的getRecomend方法
 import {ERR_OK} from 'api/config'        //引入recommend.js中的getRecomend方法
 import Slider from 'base/slider/slider'
 export default {
  data() {
   return{
   recommends : []
  }
 },
 created(){
    this._getRecommend()
  },
  methods:{
    _getRecommend() {               
    getRecommend().then((res)=>{
    if(res.code === ERR_OK){
    this.recommends = res.data.slider
   }
   })
   },
 }
}

如果在页面中浏览器返回以下图片所示的内容,就说明成功啦。

vue项目中jsonp跨域获取qq音乐首页推荐问题 

注意 : 在项目中遇到的坑

一:在请求数据的时候遇到以下截图所示的情况:

vue项目中jsonp跨域获取qq音乐首页推荐问题 

vue项目中jsonp跨域获取qq音乐首页推荐问题 

找原因找了好久,最后才发现是 encodeURIComponent() 这里出错了。注意不能写成

url += '&' + k + '=' + encodeURIComponent(value)

有可能不支持es6这样的语法。应该写成

for(var k in data) {
  let value = data[k] !== undefined? data[k] : ''
  url += '&' + k + '=' + encodeURIComponent(value)
 }

第二点:关于地址

const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

不能写成

const url = 'https://m.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

好啦,就总结这么多啦。请求到数据之后,就是一些基本的DOM操作啦。

总结

以上所述是小编给大家介绍的vue项目中jsonp跨域获取qq音乐首页推荐问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
Jquery倒计时源码分享
May 16 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Angular4 反向代理Details实践
May 30 #Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 #Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 #Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 #Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 #Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 #Javascript
vue通过点击事件读取音频文件的方法
May 30 #Javascript
You might like
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python 装饰器使用详解
2017/07/29 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python模拟事件触发机制详解
2018/01/19 Python
在双python下设置python3为默认的方法
2018/10/31 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
环卫工人慰问信
2015/02/15 职场文书
培训后的感想
2015/08/07 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
python flask框架快速入门
2021/05/14 Python