008_Vue音乐播放器（歌手详情页面的开发）

最新推荐文章于 2020-12-23 09:42:54 发布
原创 最新推荐文章于 2020-12-23 09:42:54 发布 · 390 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个基于Vuex的歌手详情页构建过程，包括头部布局、歌手图片处理及歌曲列表组件的创建。文章详细阐述了如何通过正则表达式调整图片尺寸，以及如何在组件中展示歌曲信息，并预留了后续交互设计的空间。

从上一篇，获取得到歌手信息之后，通过vuex 来获取数据，拿到数据后，创建歌曲列表组件 music-list.vue

页面dom结构，分为头部（返回按钮，歌手姓名）， 歌手图片 ，歌曲列表。

header头部有做一个遮罩层的处理，通过css3的颜色渐变，使头部标题不会与头部背景图颜色重叠

其中 歌手 图片由歌手列表传入，由于图片尺寸太小，在这我使用正则表达式对图片请求的url进行修改，拿到大一号的背景图，

songlist.vue 是歌曲列表组件，本应用所有页面组件统一使用的歌曲列表组件。在这只是简单的显示歌曲信息，后续将为其添加点击事件，修改vuex的数据，打开播放器组件

效果图

 

 

精选资源
Vue_Music:vue音乐播放器源码，详情请看readme
03-23
Vue_Music Vue_Music项目原始资料，作者地址： ://www.jianshu.com/nb/23787315 ...歌手列表页面快速入口开发及同步滚动歌手列表页面，滚动固定标题，地址： Vue_Music_07 配置歌手详情页子路由及Vuex相关介绍，地址：
Vue 开发音乐播放器之歌手页右侧快速入口功能
10-18
在Vue.js框架中开发音乐播放器的歌手页右侧快速入口功能是一项常见的需求，它能提供用户便捷的操作体验。本文将详细介绍这一功能的实现步骤和关键知识点。 首先，快速入口的列表通常是由歌手数据中的`title`属性...
music功能 vue_vue_music:歌手详情页
weixin_42109925的博客
12-23 394
在singer.vue中，点击某一歌手，根据路由跳转到singer-detail.vue在vue-muscie:singer.vue页面的5.数据序列化后传入list-vue中相关逻辑selectSinger(singer) {//导航至singer-detail.vue页面this.$router.push({path: `/singer/${singer.id}`})//同时，将singer的...
Vue音乐--排行榜页面07_抓取详情页数据
kingAn123的博客
10-06 860
大概步骤： 目标效果 二、抓取排行榜详情页数据 要点 进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到 使用之前写好的jsonp解析数据的方法，传入处理好的url 点击事件传入点击的排行榜id jsonp数据 url数据 相关代码 import jsonp from '@/common/js/jsonp' //引入jsonp模块 import {co...
用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯
weixin_30596343的博客
06-23 281
1、歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1、首先在state下定义一个歌单对象 disc{} 2、在mutaions-types中 定义一个别名 3、在mutations里面创建更改函数 4、在getters里面将该状态与组件映射 4、在recomm...
009_Vue音乐播放器（歌单详情页面的开发）
友人C君的博客
11-06 1252
由于 QQ音乐的歌曲文件时不时更新一下，我在尝试了获取vkey后仍然是不能播放歌曲，所以我把歌单的数据换成了酷狗的API，酷狗API请求歌曲简单多了，在推荐组件下请求歌单，返回歌单的id，然后根据某一歌单的id可以请求回这个歌单下的所有歌曲的一些基本信息，根据基本信息下包含的hash值，可以请求回来这首歌曲的完整信息，包括可以直接播放的play_url 地址 页面结构还是和之前差不多，不过数据属...
Vue音乐--排行榜页面06_详情页面布局
kingAn123的博客
10-06 808
大概步骤： 目标效果 六、新建排行榜详情页 HTML布局 要点： 使用滑动动画 引用封装好的公共组件musiclist即可 传入从store中的数据，进组件中 引用加载中组件 <transition name="slide"> <div class="rank-detail"> <music-li
精选资源
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器
最新发布
05-28
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器 更新 Vue3、Element-plus 版本为正式版本并替换部分新语法； 优化前期未设计好的路由结构； 使用 pinia 代替 vuex4； 全部替换为 vue3.2 的代码为...
Vue开发音乐播放器：实现歌手页快速入口功能
"Vue开发音乐播放器的歌手页右侧快速入口功能，涉及到Vue组件通信、计算属性、事件处理以及滚动同步。" 在Vue.js中，开发一个音乐播放器的歌手页，右侧的快速入口功能是一个增强用户体验的重要部分。这个功能的实现...
Vue音乐--搜索页面07_点击歌手
kingAn123的博客
10-11 547
大概步骤： 目标效果 五、搜索结果列表布局 要点： 根据li数组项的type区分当前项是歌手和歌曲 区分后dom渲染不同的内容 SearchSuggest.vue <ul> <li v-for="item of result"> <i class="iconfo
vue慕课网音乐项目手记：7-全部歌曲的数据获取
simoon's的博客
05-14 1746
以下内容整理自《慕课网vue音乐app》这是一段坎坷的过程。首先对slider部分做两个优化：1、使用keepalive保存页面的缓存2、当页面切走的时候，组件会调用destroyed来销毁实例。所以在这个时候要清除定时器，这是一个好的变成习惯，利于内存的释放。现在正式抓取数据：通过上图能看到，qq音乐通过设置了refer和host来保护接口。那么怎么才能获取到数据呢？进入build==>w...
vue音乐项目歌手详情页小结
TyrionJ的博客
01-25 2852
技术栈 vue vuex vue-router（子路由） 需求分析1）歌手列表点击歌手会跳转到下级页面歌手详情页，歌手详情页由四个部分组成 歌手图片 返回按钮：点击返回歌手tab页 随机播放按钮 歌手歌曲滚动 2）歌曲栏向上滚动到顶部时，图片和播放按钮随之隐藏，保留歌手名和返回按钮3）歌曲栏向下拖动时，歌手图片的高度作出无缝增高新的组件singer-detail.vuemusic-list.v
vue慕课网音乐项目手记：54-播放控件的点击播放的实现
simoon's的博客
05-30 804
给当前播放的歌曲添加一个class <i class="current" :class="getActivatyCls(item)"></i> getActivatyCls (item) { if (this.currentSong.id === item.id) { return 'icon-play' } }, ...
Vue音乐播放器 -- 歌单数据获取
七元八元
07-15 1858
        歌单数据的请求头中有域名Host、来源Referer，所以请求的接口应该是有加上该域名和来源，直接请求就会报HTTP-500错误。是由于前端不能直接修改request header，所以要通过后端代理的方式解决。 采用 axios 在node.js中发送http请求 npm i axios     定义路由，通过axios发送一个Http请求，同时修改header中的和QQ...
010_Vue音乐播放器（player.vue 播放器组件）
友人C君的博客
11-06 3863
不满意之前的页面结构，所以我重构了一下，以home.vue作为父级组件，recommend组件、singer组件、rank组件和search组件 作为子路由自建都归类到tab组件中。 player.vue 组件，放置在home.vue组件下，这个组件一直存在，不过由于v-show="isShow"的关系，vuex中的playList没有数据，所以隐藏掉了，然后根据fullScree...
003_Vue音乐播放器（音乐推荐列表API接口及调用）
友人C君的博客
10-16 2371
先来分享几个 音乐的API接口 酷狗、QQ音乐、网易云API接口 酷狗API详细 那么Vue使用axios访问这些API接口的时候 会得到后台返回的数据，根据这个数据，先了解其数据格式，比如你需要的播放链接，歌曲名称等，一般来说都是json格式，数组格式，或者字符串格式。 有时候，Vue访问的API接口跨域了，可以通过以下方式解决跨域问题。 在项目目录中congfig文件夹下的in...
013_Vue音乐播放器（playlist.vue 播放列表组件）
友人C君的博客
11-27 2081
点击播放列表，出来显示当前的播放列表，可以进行点击跳转播放歌曲，切换播放状态 在state状态库中使用isShowPlayList来控制playlist组件的显隐，在mutations和getters定义相关的操作 在playlist的一些操作，如切换播放状态，可以抛出给player.vue组件处理。 playlist.vue 组件 <template> <...
004_Vue音乐播放器（请求歌单列表伪造referer和host）
友人C君的博客
10-21 1096
上一篇我们讲到，请求QQ音乐的推荐列表的轮播图数据，这些轮播图数据属于相对公开的数据，最多存在跨域问题，使用上篇说到的jsonp或者axios（在config的index.js函数中添加proxyTable进行请求代理）即可解决跨域问题。 这篇我们需要请求的时歌单列表，先看看请求回来的数据的格式 这个歌单列表数据的请求比较敏感，所以，QQ音乐对其API的请求做了限制，限制字段是refere...
011_Vue音乐播放器（rank.vue 排行榜 组件）
友人C君的博客
11-22 1070
首先是，访问酷狗排行榜以及排行榜里歌曲的 API import axios from 'axios'; let commonParams = { inCharset: 'utf-8', outCharset: 'utf-8' } export function getKugouRank() {//排行榜单 const url = 'KugouMusicAPI/rank/list...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值