每次都是用网易云API接口作为练手,因为该接口开源,足够完成一个完整的系统或者一个应用
本练手项目基于vue 最新版本,UI组件库 ,elementui plus ,
主要使用知识点,路由守卫,钩子拦截,本地存储,判断用户登录,以及可以访问的页面,状态管理vuex,常见的组件之间的通讯,网络请求axiso封装以及 统一api管理。
主要思路,获取到音乐列表。将当前播放id 存储在vuex中,以及本页全部歌曲id ,将播放器组件封装在一个组件中,默认播放第一曲,如果第一手没有获取到连接,提示手动切换,当播放完成,自动切换下一曲,以及第一曲,最后一曲的判断,格式化歌词。将歌曲当前播放时间以及监听的播放器时间比较,匹配上标识出当前歌词颜色,以及进度条的计算。不多说了没啥难度,就是熟悉一个vue3的语法而已
不上图没有看点
由于个人服务器资源较小,可能出现卡,
需要源码点赞
加私聊
简易版,如有不当的地方,望指出