https://github.com/neroneroffy/react-music-webapp

一款基于React构建的音乐播放器 A music webapp build with react and antd-mobile
https://github.com/neroneroffy/react-music-webapp

ant-design antd-mobile mongodb nodejs react-router reactjs redux

Last synced: about 5 hours ago
JSON representation

一款基于React构建的音乐播放器 A music webapp build with react and antd-mobile

• Host: GitHub
• URL: https://github.com/neroneroffy/react-music-webapp
• Owner: neroneroffy
• Created: 2018-01-06T08:59:40.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:20:35.000Z (about 2 years ago)
• Last Synced: 2024-12-14T20:04:54.287Z (7 days ago)
• Topics: ant-design, antd-mobile, mongodb, nodejs, react-router, reactjs, redux
• Language: JavaScript
• Homepage: http://akongkong.cn/music/
• Size: 38.5 MB
• Stars: 476
• Watchers: 10
• Forks: 110
• Open Issues: 40
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React音乐webApp(react技术栈)

## 说明：需要cd到client文件夹下安装依赖（npm install）,再 npm start 启动项目

server文件夹与backstage当时是打算开发后台的，但后来搁置了，目前没用

> 技术：React16，Redux，React-Router，WebPack

#### [项目演示](http://akongkong.cn/music)

会点ps,所以自己设计了页面和交互。现在的数据都是是自己mock的，开发后台的时候会对接真实数据，由于搜索、收藏歌单、新建歌单、删除歌单、收藏单曲、移除收藏单曲等功能需要后台配合，所以现在都是纯前端展示，不具备功能

### 动图演示：

![img](https://github.com/capslocktao/react-music-webapp/blob/master/newshow.gif)

### 项目描述

项目基于四个业务模块：**播放器、曲库、发现、个人**。这些模块中包含了一些基础组件来支撑业务逻辑：

- **歌曲列表组件** ：（应用：曲库-曲库好歌、每日推荐、轮播图二级页面）点击歌曲播放并且高亮，收藏歌曲，将歌曲添加到播放列表；

- **可编辑歌曲列表组件** ：（应用：我的-收藏的单曲、收藏的歌单，创建的歌单-歌单详情）歌曲列表组件的升级版，并在原有功能上添加了一键顺序播放、移除歌曲；

- **歌单列表组件** ：（应用：我的-我创建的歌单、我收藏的歌单）点击进入歌单详情、删除歌单；

- **抛物线小球组件** ：（应用：歌曲列表组件、可编辑歌曲列表组件）点击添加歌曲到播放列表图标时，跳出一个加号代表已经添加进播放列表；

- **收藏歌曲组件** ：（应用：歌曲列表组件）点击收藏歌曲，弹出选框，用户可选择收藏到单曲列表还是收藏到歌单或者创建歌单（收藏的数据交互待完善）；

### 业务模块

- 播放器内核模块

  - 上一曲，下一曲，播放，暂停

  - 点击或拖动进度条实现播放进度的调整

  - 播放列表的展开收缩

  - 列表内歌曲的删除

  - 页面内歌曲添加到播放列表

  - 播放详情页的展开与收缩

  - 播放模式选择（顺序播放，随机播放，单曲循环）

  - 封面图片旋转

  - 当前播放歌曲高亮显示

  - 歌词同步（待开发）

- 曲库模块 

  - redux内请求数据

  - banner,每日推荐，曲库好歌

  - banner与每日推荐可点击进入二级页页面，二级页面基于歌曲列表组件构建，展示歌曲列表，实现列表内歌曲点击播放与添加进播放器播放列表

  - 曲库好歌为直接的列表展示，功能同上

  - 列表歌曲进场动效展示

  - 收藏歌曲弹出选项

 

- 发现

  - 搜索歌曲（只前端展示静态的搜索结果，待完善）

  - 排行榜

  - 风格模块

 

- 个人模块

   - 我的资料（待开发）

   - 修改资料（待完善）

   - 收藏的单曲

   - 收藏的歌单

   - 新建歌单、删除歌单

   - 移除收藏的单曲

- 登录注册（待开发）

### Redux设计

![img](https://github.com/capslocktao/react-music-webapp/blob/master/client/redux.png)

首先，这次设计的redux貌似不合理。。有几个没必要放到store里共享的状态也放进去了。大家当反面教材吧。。引入redux-thunk中间件，大部分axios请求都放到了redux中。

store内的状态分为8个模块：

- **album** ：专辑模块信息（专辑列表、专辑详情、专辑内歌曲、专辑介绍）；

- **comment** ：评论模块（评论内容、是否已经请求回来，收到的回复（暂未开发））；

- **discovery** ：发现模块（排行榜列表，风格）；

- **personal** ：个人模块（用户信息、收藏歌单，收藏的歌曲数量，歌单数量）；

- **repertoire** ：曲库模块（轮播图、每日推荐数据，曲库好歌）；

- **player** ：播放器内核模块（当前播放的歌曲，待播放歌曲列表，是否应该渲染）；

- **publicSongs** ：公共的歌曲列表，可编辑歌曲列表和播放器内核共用，这样设计的原因是可编辑播放列表内的一键播放功能需要和播放器内核关联起来，如果点击一键播放，那么顺序播放歌单内歌曲，否则播放完成后播放待播放歌曲列表内歌曲；

- **song-list-detail** ：歌单详情；

### 项目结构

![img](https://github.com/capslocktao/react-music-webapp/blob/master/client/project_structure.png)

### 总结

这项目是在我写的一个[播放器](https://github.com/capslocktao/react-music-player)上扩展来的，同时为了练习一下react全家桶开发的模式。通过几个react实战再加上这个练习，这种开发模式已经基本熟悉了，但是也还停留在写业务代码的阶段，这远远不够。还要学习从0开始构建一个完整的项目。redux这次用的比较多但是还需要深入学习（这个项目使用create-react-app一键创建的）。现在前端开发基本完成了，性能还未做优化。接下来慢慢的要开发后台，提供数据了，优化性能。