vue 判断同一数组内的值是否一直_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music
项目作者:符道胜
开源许可协议:Apache-2.0
项目地址:https://gitee.com/fudaosheng/vue-fds_music
项目简介
Vue 高仿热门音乐播放器,基本实现所有音乐相关功能。
本项目前端均是作者独立自主开发,所用技术栈:Vue全家桶+better-scroll+axios。
后端接口来源及 API 安装可前往项目主页查看具体文档。
项目知识点:Mixin
项目优点
个人觉得本项目最大的优点在于如何触发音乐播放器。一般触发音乐播放器有三种方法:emit、vuex、bus。
1.$emit
缺点:音乐播放器和要播放的音乐所在组件必须有父子关系,而明显在一个音乐app中这是不现实的。
2.vuex
利用vuex的话可以先将要播放的音乐放在vuex中(假设放在state的musiclist中),然后在音乐播放器组件生命周期函数中监听musiclist的状态,当音乐列表不为空时播放音乐。
缺点:
1.会存在musiclist不为空但是监听到的是空的现象,个人感觉是页面渲染先后问题。
2.修改musiclist都要通过mutations比较麻烦。
3.bus
本项目采用的就是bus。使用$bus这样不论音乐播放器和要播放的音乐所在组件是何种关系,都可以监听到要播放的音乐。
项目目录介绍
项目效果图
本项目核心:如何播放音乐
之所以将其放在mixin中,是因为这样在任何一个页面都能使用这个方法,降低了代码的重复性。
import { _getMusicUrl, _getLyric } from "network/detail"import { playList } from "components/content/playmusic/playList";export const indexMixin = { methods: { PlayMusic(index = 0) { let path = this.$route.path; let musiclist; if (this.musiclist.length >= 200) { musiclist = this.musiclist.slice(0, 199); } else musiclist = this.musiclist; let url = null, lyric = null, currentLength = 0; let playlist = []; for (let i = 0, length = musiclist.length; i < length; i++) { let getUrl = _getMusicUrl(musiclist[i].id).then(res => { url = res.data.data[0].url; return url; }); let getLyric = _getLyric(musiclist[i].id).then(res => { lyric = res.data.tlyric.lyric; return lyric; }); Promise.all([getUrl, getLyric]) .then(results => { let song = new playList(i, musiclist[i], results[0], results[1]); playlist.push(song); currentLength++; /**每次完成两个网络请求都判断是否满足要求,满足才发送事件 */ if (i == musiclist.length - 1) { this.$bus.$emit("playMusic", playlist, index, path); } }) .catch(err => { this.$Message.warning('数据加载中,请稍等'); }); } }, }
在音乐播放器组件中接收时:
mounted() { /**list是音乐列表,index是要播放的音乐在列表中的位置,path是当前播放音乐的路由路径 */ this.$bus.$on("playMusic", (list, index, path) => { this.music = []; this.path = path; this.music = list; // this.music = list.filter(item => { // return item.src !== ""; // }); /**对数组进行排序 */ this.music = this.music.sort((a, b) => { return a.index - b.index; }); /**在请求歌曲的时候可能有的歌曲不可用,或丢失。导致在播放器中的歌曲列表和页面展示存在差异,可能会出现指定的播放歌曲不服 * 用一次查找解决问题 */ for (let i in this.music) { if (this.music[i].index == index) { this.currentIndex = i; break; //break跳出循环------continue跳出本次循环 } } }); },
项目目前仍在持续开发中,作者也发现了一些开发过程中的问题,比如说目前遇到的歌手详情页面刷新没有数据。
问题原因 :路由跳转的时候我传入的是一个歌手信息对象,歌手详情的数据都是根据这个对象的信息,id获取的。
enterArtistDetail(artist) { this.$router.push({ path: "/artist", query: { artist: artist } }); this.$store.commit('addArtist',artist); }
如果你有解决这个问题的思路,欢迎你点击下方了解更多前往项目主页提出 PR,作者也会很乐意与和他一样的 Vue 爱好者们交流。
vue 判断同一数组内的值是否一直_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目相关推荐
- 后端实体类接收数组_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜 开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
- 前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜 开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
- Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
- vue 判断同一数组内的值是否一直_vue一些笔记
vuex action: 尤雨溪在知乎回答了,区分 actions 和 mutations 并不是为了解决竞态问题,vuex 真正限制你的只有 mutation 必须是同步的这一点,只是为了devto ...
- Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言 前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果 新歌速递 swiper实现轮播图 实现 实现新歌速递 在components下新建新歌速递组件News_ ...
- Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
- vue实现音乐播放器实战笔记
一.项目说明 该播放器的是基于学习vue的实战练习,不用于其他途径.应用中的全部数据来自于 QQ音乐 移动端(https://m.y.qq.com/),利用 jsonp 以及 axios 代理后端请求 ...
- Vue实现仿音乐播放器12-实现歌手页面效果
效果 实现 百度音乐API歌手说明 例:method=baidu.ting.artist.getInfo&tinguid=877578 参数: tinguid = 877578 //歌手tin ...
- Vue实现仿音乐播放器14-实现搜索页面以及功能
效果 实现 百度音乐搜索API说明 例:method=baidu.ting.search.catalogSug&query=海阔天空 参数:query = " //搜索关键字 搜索页 ...
最新文章
- 找到反例!博士后数学家推翻困扰数学界80多年的单位猜想
- PS菜鸟入门 -- 实战演示之磨皮
- 虚拟化技术知识点初步梳理
- java servlet 输出_JavaWeb中servlet读取配置文件的方式
- quartzjob传递传输_Quartz教程三:Job与JobDetail介绍
- arcgis字段计算器--随机数
- 用 X 光检测新冠肺炎?也许孪生网络+迁移学习是更好的选择!
- Linux学习总结(2)——linux常用命令大全
- 嵌入式软件开发工程师的养成之路——从 推挽输出 开始
- 计算机房里的UPS的作用,机房监控Ups的作用?
- matter协议的关键特性
- 树莓派 PWM 控制步进
- 不知不觉,二哥 CSDN 博客访问量破 1000 万了,这个成绩,全网也没几个吧?
- 使用nssm将STAF安装为windows系统服务
- 给IT男的职场服装购物建议
- c语言建立地铁信息,第十次ccf-地铁修建 C语言版
- 我爬取豆瓣影评,告诉你《复仇者联盟3》在讲什么?
- 新西兰公司注册流程概括
- mac安装使用xampp
- UiPath.CoreIpc.RemoteException Could not obtain access token.「解决方案」
热门文章
- Spring中的Spring JSR-250 注释之@Resource
- SAP云平台上两个ABAP系统实例之间的互连
- 把自定义url配置到SAP Fiori Launchpad上打开
- Opportunity PRODUCT GUID
- attachment old API read - DB debug
- 使用ABAP绘制可伸缩矢量图
- ABAP和Java里的单例模式攻击
- first OData Batch operation when Sales Pipeline is launched
- react-native在windows环境下的项目启动
- 阿里云的很多域名没有办法进行实名认证了吗