Axios实战:音乐播放器项目-跨域配置

简介: Axios实战:音乐播放器项目-跨域配置

跨域配置

如果希望实时动态地获取百度音乐中的歌曲列表,则需要使用Axios跨域请求百度音乐接口中的歌曲列表。百度音乐接口API:https://www.jianshu.com/p/e9d43d15f6ba。跨域请求的配置代码如下:

接着把网络基本URL挂载到main.js中,并且配置拦截器,代码如下:

接着修改MusicList.vue组件,使其能动态获取百度音乐接口中歌曲列表数据,代码如下:

musiclistUrl跨域请求百度音乐数据,type代表音乐类型,size代表获取歌曲数目。上述代码中type的值是固定不变的,我们也可以动态地获取对应类型的歌曲列表,代码如下:

音乐列表导航栏

通过手动传参更换音乐类型从而获取对应的歌曲列表,为了提高用户体验需要设置导航栏进行操作。在pages下新建MusicNav.vue导航栏组件,代码如下:

歌曲列表MusicList.vue组件替换为新建的导航栏组件,代码如下:

创建导航栏下的3个子页面,即热歌榜(HotMusic.vue)、新歌榜(NewMusic.vue)、King榜(KingMusic.vue),代码如下:

最后进行路由配置,代码如下:


相关文章
|
30天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
197 0
|
23天前
|
前端开发 Java Spring
axios跨域请求解决,使用注解解决
axios跨域请求解决,使用注解解决
|
29天前
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战:前端HTTP通信的王者之选
第十篇 Axios最佳实战:前端HTTP通信的王者之选
|
30天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
64 0
|
30天前
axios封装和配置
axios封装和配置
24 0
|
30天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
30天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
47 1
|
30天前
|
JSON 前端开发 JavaScript
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
|
30天前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
127 1
|
30天前
【Axios】配置默认值及拦截器代码逐行详解
【Axios】配置默认值及拦截器代码逐行详解
44 0