这个项目主要用到的是vue2 + axios + vue-router + vuex + elementUI
所有的数据均来源于 网易云API,部分API由于使用问题做了一些替换。
- 重点模块
-
主页面框架(包括header和audio播放组件)
-
首页推荐
这一部分的主要功能是:轮播图、三个列表(推荐歌单、推荐歌手和热播歌曲)
-
歌单显示
显示歌单的封面图片和各个歌曲(以列表的形式呈现),每个列表都可以播放
-
歌曲播放
歌曲播放负责的组件是audioPlayer,组件内部实质上是一个audio标签,其余组件如果触发了play事件就会将歌曲信息传递给audioPlayer组件。其中,play事件是作为自定义事件绑定在audio组件上。
-
歌词滚动显示
该部分借鉴了博客,写的很清晰详细,侵权会删除。通过API获得的歌词数据返回的是一大段字符串,其中的歌词有很多行,所以先利用正则表达式把每一行的歌词获取并保存在数组中。
每一行的数据实际上包括:[事件] 歌词,利用正则表达式把二者分开,变成obj对象的两个属性time和lyric,将obj放入最后确定好的歌词数组。
其中,time属性在滚动时需要和歌曲播放的事件进行对比,所以两者的形式要相同,则要对time属性进行格式转换。
歌词滚动:实际上就是歌曲播放时间和歌词time属性的匹配。歌曲播放的实时时间用的是自定义事件getCurrentTime绑定在歌词组件上,让audioPlayer组件在audio的事件@timeupdate发生时触发,把实时时间通过时间传递给歌词组件,成为currentTime属性。
歌词组件监视currentTime属性,如果 currentTime 与歌词时间不一致,更新data里面的 lyricIndex ,同时控制外层 ul 标签滚动。
-
组件间通信方法:
这个项目中使用的组件间通信方法主要是 自定义事件
组件间通信方法种类:
- 父->子:props
- 子->父:自定义事件
- 兄弟组件间:子-》父-》子,自定义事件,vuex
VUEX:集中式存储管理数据的,vue.js专用的,状态管理模式
- vuex的state中保存的是多个组件共享的数据,mutations负责修改state中的变量(不能写异步),actions专门负责异步请求发送,从服务端获取数据,
- mapActions:可以将vuex中的actions方法放在组件相应的位置,变成一个method。参数是一个数组形式
具体请自行学习,这对于组件间通信非常重要。
-
axios函数封装:
在一个请求很多的项目中,不应当直接使用axios请求,会显得页面十分杂乱;而应该将axios请求封装为函数保存在另外的js文件中,通过模块暴露和模块引入的方式进行使用。
同时,可以设置baseURL,发送ajax请求是直接将baseURL和需要改变的部分进行拼接就可以了。 -
关于dataset:
以data-为前缀就被称为data属性,比如data-index ;我们可以通过dataset来获取data属性.//<div data-id="test">test</div> //获取id属性可以这么写: let ele = document.querySelector('div') let id = ele.dataset.id
这是一个很小的点,但是可以用于图片懒加载,即一开始不给img写src属性,只写data-src属性,这样浏览器就不会自动处理这个图片属性,到需要触发时,就把data-src赋给src。
-
关于audio标签:
常用属性: src,autoplay,loop,muted,controller
常用事件: ended,timeupdate,waiting -
关于ref:
ref可以理解为id之类的,用于获取dom元素,但是又会比传统的dom元素获取方法减少消耗。
当组件中的一个标签有ref属性,如<div ref="reftest"></div>
这个属性就会被放到这个组件的$refs对象中,引用时可以这么写:
//这里的this指的是该组件对象 let div=this.$refs.reftest
-
路由管理:
使用vue做SPA页面必然会用到路由管理(vue-router)
首先需要安装vue-router,在index.js文件中引入vue-router并作为插件(use)使用,构建一个router,将router暴露并引入到vue实例中。//router文件 import VueRouter from 'vue-router' // 引入VueRouter //对于各个路由项所需要的组件都需要引入 import musicRecommend from "..." import userMusic from "..." const router = new VueRouter({ routes:[ { path:'/recommend', name:'recommend', component:musicRecommend }, { path:'/userMusic', name:'userMusic', component:userMusic, //路由守卫 beforeEnter(to,from,next){ var myCookie=document.cookie; var flag=false; //根据浏览器中的cookie判断是不是登陆了,cookie需要进行格式处理 myCookie=myCookie.split(";") for ( var i = 0; i < myCookie.length; i++) { var arr = myCookie[i].split("="); if (arr[0] == ' MUSIC_U'){ flag=true; } } //路由通过了 if(flag) next() else{ //路由没有通过 alert('请先登录!') } } } ] })
-
总结
总体而言,通过这个项目加深了对于vue使用的理解,对于组件间通信也更熟悉了。通过很多实际的需求,拓展了一些知识面,比如本来不太熟悉的cookie, localstorage, sessionstorage、图片懒加载和预加载、组件生命周期、项目上线云服务器应该做什么等等,收获很多。
很高兴你能看到这里,希望你能给我提一些学习建议!希望大家都有一个美好的未来。