jsonp跨域访问vue项目中的qq音乐主页推荐

闲暇之余，为了更多地了解vue和es6的特点，我自学并做了vue的移动webapp项目。项目中也有很多问题。

接下来我先讲一下如何实现这个需求，然后再讲一下我遇到的纠错的问题。

第一步是将jsonp引入vue项目，并打包jsonp。

使用npm的介绍，输入：

安装npm install jsonp - save后，可以检查自己的package.json文件中是否存在这种依赖关系。如下图所示：

如果红色框中显示了一些内容，则安装成功。转到打包的下一步：

从' jsonp' /导入originJSONP导入jsonp//，导出导出默认函数jsonp (URL，数据，选项){URL=(URL。的索引('？')0?'?': ' ')参数(数据)返回新的Promise((解析，拒绝)={ originJSONP(url，选项，(err，数据)={ if(！err){ resolve(data)} else { reject(err)} } })}//处理数据并用encodeURIComponent()进行代码转换。函数param(data){ let URL=' for(var k in data){ let value=data[k]！==未定义？data[k]: ' ' url=' k '=' encodeURIComponent(value)}返回URL？Url.substring(1) : ''}打包完jsonp.js文件后，进入第二步：

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

Export const commonParams={//配置一些公共参数，如g _ tk:5381，format:' JSON '，incharset3360' utf-8 '，outcharset3360' utf-8 '，notie:} export const options={ param : ' jsoncallback ' } export const err _ ok=0//设置属性，然后创建一个名为recommend.js的文件：

从“common/js/jsonp//import jsonp import { common params，Options} from”导入jsonp。/config//import config . js导出函数getrecovery(){ const URL=' https://c.y.qq.com/musichall/fcgi-bin/The fcg _ yqqqhomepage comment . fcg ' const data=object . assign({}，commonParams，{//es6的assign将uin : 0 0之后的对象进行组合，//并将它们放在platform3360' H5 '之前的{ }中，//。需要新代码： 1，})返回jsonp (URL、数据、选项)}其中数据的最后一个数据是：

然后，最后一步是在。项目需要vue文件。

从“API/recommended”/中导入{ getrecommended }/在recommended . js中引入getrecommended方法从“API/config”/中导入{ err _ ok }/从“base/slider/slider”中导入slider导出default { data(){ return { recommended dends 3360[]} }在recommended . js中，Created () {this。_ getrecovered()}，methods : { _ getrecovered(){ getrecovered()。然后((RES)={ if(RES . code==err _ ok){ this。推荐=res.data.slider}。

注：项目中遇到的坑

I:请求数据时，遇到了如下截图：所示的情况

找了很久的原因，终于发现encodeURIComponent()在这里犯了一个错误。小心不要写

URL=' k '=' encodeuricomponent(value)可能不支持类似es6的语法。应该写出来

for(var k in data){ let value=data[k]！==未定义？数据[k] :'' URL='' k'=' encodeuri组件(值)}第二点：关于地址

不能写入常量URL=' https://c.y.qq.com/musichall/fcgi-bin/fcg _ yqqqhomepage comment . fcg '

const URL=' https://m.y.qq.com/musichall/fcgi-bin/fcg _ yqqqhomepage comment . fcg '好了，总结到此为止。请求数据后，有一些基本的DOM操作。

摘要

以上是边肖介绍的vue项目jsonp跨域访问qq音乐主页的推荐。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！