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),代码如下:

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


目录
打赏
0
0
0
0
187
分享
相关文章
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
56 1
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
89 2
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
63 0
|
5月前
axios允许跨域cookie
axios允许跨域cookie
48 3
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
76 6
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
57 0

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    170
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    674
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    314
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    66
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    64
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    147
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    195
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    75
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    52
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    67