# 音乐平台

**Repository Path**: egwaf/music-platform

## Basic Information

- **Project Name**: 音乐平台
- **Description**: 技术栈:vue-router、vuex、axios、elementui、less
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-06
- **Last Updated**: 2021-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### 介绍
网页音乐平台•技术栈:vue-router、vuex、axios、elementui、less

•实现功能：音乐播放、音乐搜索、歌曲上一首下一首的切换(基于当前页面的歌曲列表)、歌曲详情页面。

•项目难点：歌曲上下首的切换，实现方法：在网络请求到后台音乐的数据后，获取到数据中歌曲列表的length，保存到vuex

中，然后在渲染的dom中添加自定义属性获取当前dom的歌曲id和索引，点击播放时把索引保存到vuex中，每次上下切歌的

时候在wacth中监听vuex中保存的索引值，再重新通过索引值获取到dom中的索引值和id重新进行网络请求获取歌曲的数据并

播放，这样就简单实现了歌曲的上下切换。







![/assets/img/xgt/1.png](src/assets/img/xgt/1.png)
![/assets/img/xgt/1.png](src/assets/img/xgt/2.png)
![/assets/img/xgt/1.png](src/assets/img/xgt/3.png)
![/assets/img/xgt/1.png](src/assets/img/xgt/4.png)











![1620276125347]
(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1620276125347.png)