代码地址:
https://github.com/Tree-Traveler/MusicPlayer
https://gitee.com/tree-traveler/music-player
展示:
技术栈:
html/css/js
axios
Vue
功能:
一.歌曲搜索:
- 按下回车(v-on .enter)
- 查询数据(axios 接口 v-model )
- 渲染数据(v-for 数组 that)
二.歌曲播放
- 点击播放(v-on 自定义参数)
- 歌曲地址获取(接口 歌曲id)
- 歌曲地址设置(v-bind)
三.歌曲封面加载
- 点击播放(增加逻辑)
- 歌曲封面获取(接口 歌曲id)
- 歌曲封面设置(v-bind)
四.歌曲评论
- 点击播放(增加逻辑)
- 歌曲评论获取(接口 歌曲id)
- 歌曲评论渲染(v-for)
五.歌曲封面动画
- 监听音乐播放(v-on play)
- 监听音乐暂停(v-on pause)
- 操纵类名(v-bind 对象)
六.MV播放
- mv图标显示(v-if)
- mv地址获取(接口 mvid)
- 遮罩层(v-show v-on)
mv播放6 - mv地址设置(v-bind)
接口地址:
1:歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:ke