{"id":15043368,"url":"https://github.com/wanguano/music163-react","last_synced_at":"2025-05-15T14:03:50.720Z","repository":{"id":41054292,"uuid":"296345088","full_name":"wanguano/Music163-React","owner":"wanguano","description":"🔥基于React全家桶开发：「网易云音乐PC端项目」实战","archived":false,"fork":false,"pushed_at":"2024-10-21T14:36:59.000Z","size":1256,"stargazers_count":592,"open_issues_count":2,"forks_count":118,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T03:53:34.601Z","etag":null,"topics":["antdesign","immutable","music","music-player","neteasecloudmusicapi","prop-types","react","react-router","redux","redux-immutable","redux-thunk","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wanguano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-17T14:06:01.000Z","updated_at":"2025-04-09T09:43:37.000Z","dependencies_parsed_at":"2024-03-03T16:23:51.742Z","dependency_job_id":"d287e2a7-1cc1-40e9-93ec-695dbabfc0c8","html_url":"https://github.com/wanguano/Music163-React","commit_stats":{"total_commits":212,"total_committers":3,"mean_commits":70.66666666666667,"dds":"0.014150943396226467","last_synced_commit":"60cd42bd834fd8dd5f1d5762abcf217ed2848d5c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanguano%2FMusic163-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanguano%2FMusic163-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanguano%2FMusic163-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanguano%2FMusic163-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wanguano","download_url":"https://codeload.github.com/wanguano/Music163-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003955,"owners_count":21196794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antdesign","immutable","music","music-player","neteasecloudmusicapi","prop-types","react","react-router","redux","redux-immutable","redux-thunk","styled-components"],"created_at":"2024-09-24T20:48:55.318Z","updated_at":"2025-04-15T03:53:41.780Z","avatar_url":"https://github.com/wanguano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React技术栈 网易云音乐PC项目实战\n\n## 项目简介\n### 技术栈\n基于 `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 布局。\n\n## 预览地址\n- 😋 项目在线预览地址：www.wanguancs.top\n- 😎 开发文档: https://juejin.im/post/6893817287917338632\n\n## 最近更新\n### 更新功能\n- 登录功能：\n  - 暂时只支持“163邮箱”或“前缀: co-, col-, com-, con-, cor-手机号”登录\n  - 每日推荐歌单（只有登录成功才能查看）\n  - 个人主页 \u0026 个人收藏歌单 \u0026 评论歌曲 \u0026 点赞歌曲评论 \u0026 创建歌单\n- 本地存储歌曲列表:\n  - 不管之后是否刷新浏览器，只要在歌曲列表中就会持久化存储\n  - （刷新浏览器，歌曲列表依然存在）\n- 歌曲列表：\n  - 对歌曲列表支持拖拽排序，并会对播放顺序进行改变\n- 搜索音乐框：\n  - 优化在搜索歌曲时，支持键盘\"↑\"+\"↓\"来切换搜索歌曲内容\n- 头部进度条：\n  - 在页面路由跳转\u0026网络请求时\"添加头部进度条\"显示\n- 404页：\n  - 添加404页，在路由没有匹配的页面时，会显示404页面\n\n### 待优化\n- 音乐播放列表无法记忆上次播放顺序\n  - 问题：无法记忆上次歌曲列表拖拽更改的顺序\n  - 状态：可以记忆列表拖拽后顺序✔\n- 记忆在关闭页面前播放的音乐\n  - 问题：在关闭页面前记忆当前播放的歌曲，再次打开时默认歌曲是关闭前播放的歌曲\n  - 状态：完成✔\n- 头部搜索歌曲\"↑\"+\"↓\"切换项问题\n  - 问题：在我们搜索歌曲时\"↑\"+\"↓\"切换搜索项时，当对下面搜索内容不满意，切换不到搜索内容上，只能在固定搜索项进行切换\n  - 状态：待改中..\n- 歌曲列表播放顺序\n  - 问题：在拖拽歌曲列表更改播放顺序后，上一首或下一首顺序不正确\n  - 状态：待改中..\n- 榜单切换bug\n  - 在榜单切换时, 跳转其他页面, 再跳转回榜单页面(bug)\n  - 状态: 完成✔\n- ctrl+k 不能唤醒搜索框\n  - 问题：在其他路由组件内使用快捷键不能唤醒搜索框\n  - 状态：完成✔\n- 在搜索音乐页面组件\n  - 问题：头部(header)搜索框和当前组件内搜索框内容不同步  \n  - 状态：完成✔\n- Ctrl+k全局注册唤醒下拉框\n  - 问题：在其他页面下，Ctrl+k不能唤醒\n  - 状态：完成✔\n- 本地存储歌曲删除\n  - 问题：在从歌曲列表中移除歌曲时，并没有删除本地存储id\n  - 状态：完成✔\n### TO-DO-LIST（可能会开发）\n- 本地存储音乐列表\n  - 已知问题：使用`redux-persist`持久化数据存储，结合`immutable`报错\n  - 状态：暂时手动对歌曲列表id进行本地存储✔\n- 首次加载页面，可以自动义配置默认音乐列表歌曲\n  - 问题：在首次加载页面时，可以自定义配置默认喜欢的音乐列表，而不是使用系统配置的默认音乐列表\n- 独立登录功能？\n  - 登录的信息保存在独立的服务器当中，便以后续扩展更多功能，歌单社区等等\n- 上传音乐功能？\n  - 用户可以自定义上传音乐，下次当前用户登录后依旧保存歌曲列表\n- 社区（歌单| 热点分享）？\n  - 发帖、评论\n\n## 界面和功能展示\n### 推荐/新碟上架/榜单\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107223943.gif)\n\n### 路由切换\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107225248.gif)\n\n\n### 歌曲评论\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107230432.gif)\n\n\n### 排行榜\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108133921.gif)\n\n\n\n### 播放器\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108130517.gif)\n\n\n### 支持对歌曲列表进行拖拽排序\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20210315165207.gif)\n\n### 歌曲切换(随机、顺序、单曲循环)\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108133347.gif)\n\n\n\n\n### 歌曲搜索\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231246.gif)\n\n- 新增：键盘事件↓  \u0026  函数防抖\n  - `ctrl+k` 搜索框获取焦点 \u0026 唤醒搜索下拉框\n  - `esc` 取消焦点 \u0026 下拉框\n  - `enter` 进入歌曲搜索详情\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231505.gif)\n\n\n#### 歌曲搜索详情列表\n\n- 在搜索框中按下`回车`即可，搜索列表**基本**功能实现\n\n![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231549.gif)\n\n\n\n## 技术栈\n\n### 前端\n\n- `React`：用于构建用户界面的 `MVVM` 框架\n- `styled-components`：解决组件内容编写样式会影响全局样式导致冲突\n- `axios`: 发送网络请求，请求拦截和响应拦截\n- `react-router`：为单页面应用提供的路由系统\n- `react-router-config`：集中式路径映射表管理\n- `redux`：React 集中状态管理，在多个组件共享某些状态时非常方便\n- `react-redux`：帮助我们链及`redux`、`react`的辅助工具\n- `immutable`：对`reudx`中保存的`state`使用`immutable`进行管理\n- `redux-immutable`: 对根目录的`reducer`中`state`进行管理\n- `redux-thunk`: 在`redux`中进行异步请求\n- `propType`: 校验`props`类型及默认值\n- `react-transition-group`: 添加过渡动画效果\n- 项目中的优化: 函数式组件全部采用`memo`、路由懒加载、函数防抖\n\n### 后端\n\n- `Node.js`：利用 `Express` 搭建的本地测试服务器\n- `axios`：用来请求后端 `API` 音乐数据\n- [NeteaseCloudMusicApi](https://binaryify.github.io/NeteaseCloudMusicApi/#/)：网易云音乐 `NodeJS` 版 `API`，提供音乐数据\n- 也可以使用已经部署到服务器上的网易云接口: http://123.57.176.198:3000/\n\n### 其他工具\n\n- create-react-app：React 脚手架工具，快速初始化项目代码\n- eslint：代码风格检查工具，帮助我们规范代码书写\n\n\n## 构建项目\n- 克隆代码到本地之后，需要运行 NeteaseCloudMusicApi，来起一个音乐的 API 接口。(**可选)**\n- 如果需要在服务器上搭建的话就需要将 API 放到自己的服务器上面。(**可选)**\n- 已经部署到服务器的网易云音乐接口: http://39.102.36.212:3000/ (**默认的API接口**)\n\n``` powershell\n# yarn dependencies\nyarn install | npm install\n \n# serve with hot reload at localhost:3000\nyarn satrt  | npm satrt\n\n# build for production with minification\nyarn build  |  npm build\n```\n\n\n## 感谢\n\n- 非常感谢[王红元](https://github.com/coderwhy)老师的，React核心技术实战让我学习到很多 react 的知识。\n- 非常感谢后台提供者[Binaryify](https://github.com/Binaryify/NeteaseCloudMusicApi), 接口很稳定，文档很完善\n\n\n## 最后\n如果觉得项目还不错的话 👏，就给个 star ⭐ 鼓励一下吧~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanguano%2Fmusic163-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwanguano%2Fmusic163-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanguano%2Fmusic163-react/lists"}