用Vue来实现音乐播放器(九):歌单数据接口分析

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到

原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢??其实是有办法解决的:我们可以进行后端接口代理  那么什么是后端代理呢??

如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢?

原因就是客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再返回数据给我们的客户端,这样我们就可以实现跨域访问数据啦。

如果不理解可以看依据看下图

接下来手动代理后端服务器

在手动代理后端服务器完毕之后就来写前端请求

成功拿到数据

有一点要注意:axios并不是vue的插件  所以我们不能直接使用use方法  所以我们要将他添加到vue的原型链中使用

import axios from ‘axios‘;

Vue.prototype.$http = axios;

这样我们就可以直接使用了,

注意点:1.webpack的跨域解决方法只是是适合在开发环境中使用,

    2.设置inde.js内部的dev时,请注意,需要设置的应该是域名,过多会失效,所以应该是www。baidu。com

    3.使用axios上传文件,不需要像ajax上传图片一样使用formdata

原文地址:https://www.cnblogs.com/catbrother/p/9180889.html

时间: 2024-10-10 21:23:28

用Vue来实现音乐播放器(九):歌单数据接口分析的相关文章

C#简单音乐播放器ListBox歌单列表

简单的音乐播放器实现其实并不难,直接用axWindowsmediaplayer来做,这里没有什么技术含量的,但是axWindowsmediaplayer是不会生成歌单列表的,也就是说,在每次添加音乐后axWindowsmediaplayer是没有记录的,那么我就来简单的做下歌单列表. axWindowsmediaplayer的工作原理其实就是根据Path来加载的,在写歌单时我们需要先来做两件事,1.存储歌曲Path 2.存储歌曲名字 这里暂且不考虑数据库,我使用IO操作通过txt文件来存储这两种

VUE项目实现音乐播放器(四)------- 设计播放进度条 + 播放控制按钮

2020.3.31 9:18 好的,早上好各位,今天我们来进行一个很炫酷的页面开发——播放器控制页面( src\components\Play.vue ),如下图: 我们可以看到,该页面有很多元素组成,歌曲的封面.左上角的页面隐藏按钮,中间的播放进度条.歌词栏.下方的播放控制按钮.右下角的显示播放列表按钮,这些元素完美的结合在一起,整个页面有没有一种很高大上的感觉!好了,让我们来亲自动手实现它吧! 1. 歌曲封面&隐藏按钮 首先通过 getters 获取到歌曲的封面: computed: { i

Android开发本地及网络Mp3音乐播放器(九)音乐收藏与列表切换

实现功能: 使用快速开发框架xUtils中的DbUtils模块,为音乐收藏功能做准备 实现PlayActivity(独立音乐播放界面)收藏.取消收藏按钮 实现MainActivity(主界面)菜单选择事件进入MyLoveMusicActivity(音乐收藏界面) 实现本地音乐列表与音乐收藏列表切换功能 (目前源码,只实现了音乐收藏列表,菜单中最近播放列表后续会进行补充) 截止到目前的源码下载: http://download.csdn.net/detail/iwanghang/9504916 x

用Vue来实现音乐播放器(三十八):歌词滚动列表的问题

1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器 //每次currentSong改变的时候都会重新new一个新的lyric-parser出来, //但是我们之前的对象并没有做清理操作 也就是说我们之前对象还是有计时器在里面 //所以歌词会来回闪动 解决办法: 在切换歌曲之前 即getLyric()之前 重新去getLyric(

用Vue来实现音乐播放器(八):自动轮播图啊

slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //要注意slot插槽里面的数据要先渲染出来 <slot> </slot> </div> <div class="dots&q

用Vue来实现音乐播放器(十四):歌手数据接口抓取

第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/js/jsonp.js' import {commonParams,options} from './config.js' export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg' cons

用Vue来实现音乐播放器(十六):滚动列表的实现

滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件   <template> <!-- 当父组件传递给子组件的数据发生变化的时候 scroll可以监听到此时高度会发生变化 --> <!-- 子组件这里的:data和props里面的data相对于 --> <!-- 父传子的时候 data是对应的props里面的值 --> <scroll class=&quo

用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他

用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 3.在mutations里面创建更改函数 4.在getters里面将该状态与组件映射 4.在recommed推荐主页引入mapMutations 5.在methods中去拓展mapMutations ...mapMutations({自定义函数名:' mutations-types中的别名 '