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实现多物体缓冲运动实例代码
Nov 29 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
一些mootools的学习资源
2010/02/07 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
大客户销售经理职责
2013/12/04 职场文书
微笑服务演讲稿
2014/05/13 职场文书
法制宣传标语集锦
2014/06/25 职场文书
安全责任书范文
2014/08/25 职场文书
荒岛余生观后感
2015/06/09 职场文书
800字作文之大雪
2019/12/04 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python