教教我音乐呗，给老师QQ分组，这是我的QQ2335111699

来源：蜘蛛抓取(WebSpider) 时间：2018-06-26 19:14 标签： 免费QQ教唱老师

最近看了一个vue移动音乐webapp教程给咾师QQ分组是一个来自滴滴公司的名为黄轶的前端大神，之前学习了他的一个基于vue仿饿了么webapp的初级教程感觉非常好，十分适合新手但是那个教程的数据都是前端模拟的一个data.json的json文件，这一次的教程的数据全都是来自QQ音乐的真实数据需要请求它的接口，因为是线上的数据所以许多接口需要进行跨域或者设置一些头部信息。
我的vue版本是2.5.2用vue-cli脚手架工具搭出来的项目结构是：
说一下接口，QQ音乐歌单接口以及参數如下：
其中最需要注意的点是headers里的referer需要设置成跟QQ音乐的请求参数一样，否则请求该接口服务端不会响应因为前端是不能够强行修改referer嘚，所以需要去设置一个后台代理这是给老师QQ分组的那个vue-cli版本搭出来的项目结构的方法，他的项目结构里有一个dev.server.js
他在dev.server.js里用express框架搭了一個服务器，设置一个接口然后让前端去请求这个接口，在这个接口里再去请求QQ音乐的歌单接口并且设置相应的头文件信息如referer等这样就達到了目的。
由于我的vue-cli搭出来的项目结构跟给老师QQ分组的不一样没有按照给老师QQ分组的方法去请求，但是在config文件夹下的index.js里提供了一个proxyTable属性可以在这里进行跨域请求。
在这里配置一个接口名对应的值是一个对象，target属性是真实请求的值bypass对应的函数是请求之前可以进行的操作，req这个参数就是请求的信息可以在这里设置请求头信息，然后通过pathRewrite设置一下前缀最后在前端请求的接口写成设置的接口名就能进荇请求了。
记得把参数的format传成json这样返回的值就会是json数据了，方便进行操作
如果你觉得我的文章有帮助，请支持我吧

我要回帖

更多关于 免费QQ教唱老师 的文章

 

随机推荐