React技术栈 网易云音乐PC项目实战 项目简介 技术栈基于 `react` + `redux` + `react-router` + `styled-components` + `axios` + `ant design` + `react-redux` + `redux-thunk` `immutable` + `redux-immutable` + `react-transition-group` 等开发一款PC端「网易云音乐PC」 Web项目，UI 界面参考了PC版的网易云音乐、flex 布局。 预览地址- 😋 项目在线预览地址：www.wanguancs.top- 😎 开发文档: https://juejin.im/post/6893817287917338632 最近更新 更新功能- 登录功能： - 暂时只支持“163邮箱”或“前缀: co-, col-, com-, con-, cor-手机号”登录 - 每日推荐歌单（只有登录成功才能查看） - 个人主页 & 个人收藏歌单 & 评论歌曲 & 点赞歌曲评论 & 创建歌单- 本地存储歌曲列表: - 不管之后是否刷新浏览器，只要在歌曲列表中就会持久化存储 - （刷新浏览器，歌曲列表依然存在）- 歌曲列表： - 对歌曲列表支持拖拽排序，并会对播放顺序进行改变- 搜索音乐框： - 优化在搜索歌曲时，支持键盘↑+↓来切换搜索歌曲内容- 头部进度条： - 在页面路由跳转&网络请求时添加头部进度条显示- 404页： - 添加404页，在路由没有匹配的页面时，会显示404页面 待优化- 音乐播放列表无法记忆上次播放顺序 - 问题：无法记忆上次歌曲列表拖拽更改的顺序 - 状态：可以记忆列表拖拽后顺序✔- 记忆在关闭页面前播放的音乐 - 问题：在关闭页面前记忆当前播放的歌曲，再次打开时默认歌曲是关闭前播放的歌曲 - 状态：完成✔- 头部搜索歌曲↑+↓切换项问题 - 问题：在我们搜索歌曲时↑+↓切换搜索项时，当对下面搜索内容不满意，切换不到搜索内容上，只能在固定搜索项进行切换 - 状态：待改中..- 歌曲列表播放顺序 - 问题：在拖拽歌曲列表更改播放顺序后，上一首或下一首顺序不正确 - 状态：待改中..- 榜单切换bug - 在榜单切换时, 跳转其他页面, 再跳转回榜单页面(bug) - 状态: 完成✔- ctrl+k 不能唤醒搜索框 - 问题：在其他路由组件内使用快捷键不能唤醒搜索框 - 状态：完成✔- 在搜索音乐页面组件 - 问题：头部(header)搜索框和当前组件内搜索框内容不同步 - 状态：完成✔- Ctrl+k全局注册唤醒下拉框 - 问题：在其他页面下，Ctrl+k不能唤醒 - 状态：完成✔- 本地存储歌曲删除 - 问题：在从歌曲列表中移除歌曲时，并没有删除本地存储id - 状态：完成✔ TO-DO-LIST（可能会开发）- 本地存储音乐列表 - 已知问题：使用`redux-persist`持久化数据存储，结合`immutable`报错 - 状态：暂时手动对歌曲列表id进行本地存储✔- 首次加载页面，可以自动义配置默认音乐列表歌曲 - 问题：在首次加载页面时，可以自定义配置默认喜欢的音乐列表，而不是使用系统配置的默认音乐列表- 独立登录功能？ - 登录的信息保存在独立的服务器当中，便以后续扩展更多功能，歌单社区等等- 上传音乐功能？ - 用户可以自定义上传音乐，下次当前用户登录后依旧保存歌曲列表- 社区（歌单| 热点分享）？ - 发帖、评论 界面和功能展示 推荐/新碟上架/榜单 路由切换 歌曲评论 排行榜 播放器 支持对歌曲列表进行拖拽排序 歌曲切换(随机、顺序、单曲循环) 歌曲搜索- 新增：键盘事件↓ & 函数防抖 - `ctrl+k` 搜索框获取焦点 & 唤醒搜索下拉框 - `esc` 取消焦点 & 下拉框 - `enter` 进入歌曲搜索详情 歌曲搜索详情列表- 在搜索框中按下`回车`即可，搜索列表**基本**功能实现 技术栈 前端- `React`：用于构建用户界面的 `MVVM` 框架- `styled-components`：解决组件内容编写样式会影响全局样式导致冲突- `axios`: 发送网络请求，请求拦截和响应拦截- `react-router`：为单页面应用提供的路由系统- `react-router-config`：集中式路径映射表管理- `redux`：React 集中状态管理，在多个组件共享某些状态时非常方便- `react-redux`：帮助我们链及`redux`、`react`的辅助工具- `immutable`：对`reudx`中保存的`state`使用`immutable`进行管理- `redux-immutable`: 对根目录的`reducer`中`state`进行管理- `redux-thunk`: 在`redux`中进行异步请求- `propType`: 校验`props`类型及默认值- `react-transition-group`: 添加过渡动画效果- 项目中的优化: 函数式组件全部采用`memo`、路由懒加载、函数防抖 后端- `Node.js`：利用 `Express` 搭建的本地测试服务器- `axios`：用来请求后端 `API` 音乐数据- [NeteaseCloudMusicApi](https://binaryify.github.io/NeteaseCloudMusicApi//)：网易云音乐 `NodeJS` 版 `API`，提供音乐数据- 也可以使用已经部署到服务器上的网易云接口: http://123.57.176.198:3000/ 其他工具- create-react-app：React 脚手架工具，快速初始化项目代码- eslint：代码风格检查工具，帮助我们规范代码书写 构建项目- 克隆代码到本地之后，需要运行 NeteaseCloudMusicApi，来起一个音乐的 API 接口。(**可选)**- 如果需要在服务器上搭建的话就需要将 API 放到自己的服务器上面。(**可选)**- 已经部署到服务器的网易云音乐接口: http://39.102.36.212:3000/ (**默认的API接口**)``` powershell yarn dependenciesyarn install | npm install serve with hot reload at localhost:3000yarn satrt | npm satrt build for production with minificationyarn build | npm build``` 感谢- 非常感谢[王红元](https://github.com/coderwhy)老师的，React核心技术实战让我学习到很多 react 的知识。- 非常感谢后台提供者[Binaryify](https://github.com/Binaryify/NeteaseCloudMusicApi), 接口很稳定，文档很完善 最后如果觉得项目还不错的话 👏，就给个 star ⭐ 鼓励一下吧~