后端实体类接收数组_前端代码+后端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 爱好者们交流。
来源:
https://www.toutiao.com/i6849543388895642124/
“IT大咖说”欢迎广大技术人员投稿,投稿邮箱:aliang@itdks.com
来都来了,走啥走,留个言呗~
IT大咖说 | 关于版权
由“IT大咖说(ID:itdakashuo)”原创的文章,转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信:ITDKS10(备注:投稿),茉莉小姐姐会及时与您联系!
感谢您对IT大咖说的热心支持!
相关推荐
推荐文章
别再用数据库生成的ID了
Linux停用“黑名单”,因为这是敏感词,涉嫌种族歧视
黑客界决战紫禁之巅 你盗我8225份数据库 我公布你的真实身份
华为自主研发,openGauss数据库源代码正式开放,一起来看看?
微软停止支持 PHP 8.0、PHP宇宙最强怎么办?
如何用Golang每秒读取16GB的文件
后端实体类接收数组_前端代码+后端API,值得一学的Vue高仿音乐播放器实战项目...相关推荐
- 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 ...
- 后端实体类接收数组_三级联动返回数组的方式
上一章发现编辑会出现所属分类不显示的现象~ 在这里从主页面查到修改的按钮,发现调用子页面init()方法,加上查询完整的路径信息: 前台需要返回一个catelogPathd的数组,这时候需要在后台的实 ...
- Vue 3 实现音乐播放器,Java web后端实现主流音乐搜索服务
MGO音乐 mgo-music 版权声明: 皮肤图片来自QQ音乐电脑客户端皮肤缓存.音乐相关接口来自网络和开源项目. 本项目仅用于知识学习,未经许可不得使用.. 源码:MGO音乐-Gitee MGO音 ...
- php仿bilibili视频类模板,高仿bilibili播放器
[实例简介]调用方法:http://你的域名/play.php?url= [实例截图] [核心代码] Bilibili播放器 ├── css │ ├── css │ │ ├── bt_js ...
- c语言编写音乐播放器完整代码(mciSendString函数的使用方法,第一次使用Visual Studio 2019的详细步骤)
本文会尽量让和笔者一样只有一点点可怜的c语言基础的小白看懂,并写出自己的音乐播放器. 笔者使用的编译器是Visual Studio 2019,直接在官网下载就行了.下面是Visual Studio 2 ...
- dj java实现_躁!DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
- Java和vue实现音乐播放器_躁!DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
最新文章
- QLineEdit响应回车时避免Button同时响应
- optee3.8 qemu_v8的环境搭建篇(ubuntu20.04)
- echarts map 点击地图区域变色_绘制炫酷的地图,不只是pyecharts.map!
- HDFS SnapShot原理
- scala Ordering
- 【Mysql高级语法:视图操作】
- H5 --力导向图、关系图谱
- C#图片处理之: 获取数码相片的EXIF信息(二)
- layui按钮展开、_layui监听工具栏(操作列表按钮)
- Crossoft Minesweeper Hexagon for Mac
- python爱好者社区 周琦_这么多年来,我算想明白了!
- flash电脑安装包_一百余款电脑软件及安装方式,忍不住收藏起来
- OCR身份证识别免费试用,附带Java代码
- win10激活bug 任务栏假死点击无反应解决方案
- SQL Server行列转换
- Windows 10 VMware Workstation Server服务启动一段时间后自动异常关闭
- 外贸常用术语_外贸业务中常用的术语
- c语言gcd 简易函数,简单[GCD]用法详细总结(上)
- java使用poi逐页读取ppxt,JAVA-WEB(通过POI)实现PPT在线预览
- Excel表格的密码设置与取消