├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.js ├── assets └── css │ └── reset.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 话梅桔 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React技术栈 网易云音乐PC项目实战 2 | 3 | ## 项目简介 4 | ### 技术栈 5 | 基于 `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 布局。 6 | 7 | ## 预览地址 8 | - 😋 项目在线预览地址：www.wanguancs.top 9 | - 😎 开发文档: https://juejin.im/post/6893817287917338632 10 | 11 | ## 最近更新 12 | ### 更新功能 13 | - 登录功能： 14 | - 暂时只支持“163邮箱”或“前缀: co-, col-, com-, con-, cor-手机号”登录 15 | - 每日推荐歌单（只有登录成功才能查看） 16 | - 个人主页 & 个人收藏歌单 & 评论歌曲 & 点赞歌曲评论 & 创建歌单 17 | - 本地存储歌曲列表: 18 | - 不管之后是否刷新浏览器，只要在歌曲列表中就会持久化存储 19 | - （刷新浏览器，歌曲列表依然存在） 20 | - 歌曲列表： 21 | - 对歌曲列表支持拖拽排序，并会对播放顺序进行改变 22 | - 搜索音乐框： 23 | - 优化在搜索歌曲时，支持键盘"↑"+"↓"来切换搜索歌曲内容 24 | - 头部进度条： 25 | - 在页面路由跳转&网络请求时"添加头部进度条"显示 26 | - 404页： 27 | - 添加404页，在路由没有匹配的页面时，会显示404页面 28 | 29 | ### 待优化 30 | - 音乐播放列表无法记忆上次播放顺序 31 | - 问题：无法记忆上次歌曲列表拖拽更改的顺序 32 | - 状态：可以记忆列表拖拽后顺序✔ 33 | - 记忆在关闭页面前播放的音乐 34 | - 问题：在关闭页面前记忆当前播放的歌曲，再次打开时默认歌曲是关闭前播放的歌曲 35 | - 状态：完成✔ 36 | - 头部搜索歌曲"↑"+"↓"切换项问题 37 | - 问题：在我们搜索歌曲时"↑"+"↓"切换搜索项时，当对下面搜索内容不满意，切换不到搜索内容上，只能在固定搜索项进行切换 38 | - 状态：待改中.. 39 | - 歌曲列表播放顺序 40 | - 问题：在拖拽歌曲列表更改播放顺序后，上一首或下一首顺序不正确 41 | - 状态：待改中.. 42 | - 榜单切换bug 43 | - 在榜单切换时, 跳转其他页面, 再跳转回榜单页面(bug) 44 | - 状态: 完成✔ 45 | - ctrl+k 不能唤醒搜索框 46 | - 问题：在其他路由组件内使用快捷键不能唤醒搜索框 47 | - 状态：完成✔ 48 | - 在搜索音乐页面组件 49 | - 问题：头部(header)搜索框和当前组件内搜索框内容不同步 50 | - 状态：完成✔ 51 | - Ctrl+k全局注册唤醒下拉框 52 | - 问题：在其他页面下，Ctrl+k不能唤醒 53 | - 状态：完成✔ 54 | - 本地存储歌曲删除 55 | - 问题：在从歌曲列表中移除歌曲时，并没有删除本地存储id 56 | - 状态：完成✔ 57 | ### TO-DO-LIST（可能会开发） 58 | - 本地存储音乐列表 59 | - 已知问题：使用`redux-persist`持久化数据存储，结合`immutable`报错 60 | - 状态：暂时手动对歌曲列表id进行本地存储✔ 61 | - 首次加载页面，可以自动义配置默认音乐列表歌曲 62 | - 问题：在首次加载页面时，可以自定义配置默认喜欢的音乐列表，而不是使用系统配置的默认音乐列表 63 | - 独立登录功能？ 64 | - 登录的信息保存在独立的服务器当中，便以后续扩展更多功能，歌单社区等等 65 | - 上传音乐功能？ 66 | - 用户可以自定义上传音乐，下次当前用户登录后依旧保存歌曲列表 67 | - 社区（歌单| 热点分享）？ 68 | - 发帖、评论 69 | 70 | ## 界面和功能展示 71 | ### 推荐/新碟上架/榜单 72 | 73 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107223943.gif) 74 | 75 | ### 路由切换 76 | 77 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107225248.gif) 78 | 79 | 80 | ### 歌曲评论 81 | 82 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107230432.gif) 83 | 84 | 85 | ### 排行榜 86 | 87 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108133921.gif) 88 | 89 | 90 | 91 | ### 播放器 92 | 93 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108130517.gif) 94 | 95 | 96 | ### 支持对歌曲列表进行拖拽排序 97 | 98 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20210315165207.gif) 99 | 100 | ### 歌曲切换(随机、顺序、单曲循环) 101 | 102 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201108133347.gif) 103 | 104 | 105 | 106 | 107 | ### 歌曲搜索 108 | 109 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231246.gif) 110 | 111 | - 新增：键盘事件↓ & 函数防抖 112 | - `ctrl+k` 搜索框获取焦点 & 唤醒搜索下拉框 113 | - `esc` 取消焦点 & 下拉框 114 | - `enter` 进入歌曲搜索详情 115 | 116 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231505.gif) 117 | 118 | 119 | #### 歌曲搜索详情列表 120 | 121 | - 在搜索框中按下`回车`即可，搜索列表**基本**功能实现 122 | 123 | ![](https://cdn.jsdelivr.net/gh/wanguano/cloudPic/img/20201107231549.gif) 124 | 125 | 126 | 127 | ## 技术栈 128 | 129 | ### 前端 130 | 131 | - `React`：用于构建用户界面的 `MVVM` 框架 132 | - `styled-components`：解决组件内容编写样式会影响全局样式导致冲突 133 | - `axios`: 发送网络请求，请求拦截和响应拦截 134 | - `react-router`：为单页面应用提供的路由系统 135 | - `react-router-config`：集中式路径映射表管理 136 | - `redux`：React 集中状态管理，在多个组件共享某些状态时非常方便 137 | - `react-redux`：帮助我们链及`redux`、`react`的辅助工具 138 | - `immutable`：对`reudx`中保存的`state`使用`immutable`进行管理 139 | - `redux-immutable`: 对根目录的`reducer`中`state`进行管理 140 | - `redux-thunk`: 在`redux`中进行异步请求 141 | - `propType`: 校验`props`类型及默认值 142 | - `react-transition-group`: 添加过渡动画效果 143 | - 项目中的优化: 函数式组件全部采用`memo`、路由懒加载、函数防抖 144 | 145 | ### 后端 146 | 147 | - `Node.js`：利用 `Express` 搭建的本地测试服务器 148 | - `axios`：用来请求后端 `API` 音乐数据 149 | - [NeteaseCloudMusicApi](https://binaryify.github.io/NeteaseCloudMusicApi/#/)：网易云音乐 `NodeJS` 版 `API`，提供音乐数据 150 | - 也可以使用已经部署到服务器上的网易云接口: http://123.57.176.198:3000/ 151 | 152 | ### 其他工具 153 | 154 | - create-react-app：React 脚手架工具，快速初始化项目代码 155 | - eslint：代码风格检查工具，帮助我们规范代码书写 156 | 157 | 158 | ## 构建项目 159 | - 克隆代码到本地之后，需要运行 NeteaseCloudMusicApi，来起一个音乐的 API 接口。(**可选)** 160 | - 如果需要在服务器上搭建的话就需要将 API 放到自己的服务器上面。(**可选)** 161 | - 已经部署到服务器的网易云音乐接口: http://39.102.36.212:3000/ (**默认的API接口**) 162 | 163 | ``` powershell 164 | # yarn dependencies 165 | yarn install | npm install 166 | 167 | # serve with hot reload at localhost:3000 168 | yarn satrt | npm satrt 169 | 170 | # build for production with minification 171 | yarn build | npm build 172 | ``` 173 | 174 | 175 | ## 感谢 176 | 177 | - 非常感谢[王红元](https://github.com/coderwhy)老师的，React核心技术实战让我学习到很多 react 的知识。 178 | - 非常感谢后台提供者[Binaryify](https://github.com/Binaryify/NeteaseCloudMusicApi), 接口很稳定，文档很完善 179 | 180 | 181 | ## 最后 182 | 如果觉得项目还不错的话 👏，就给个 star ⭐ 鼓励一下吧~ 183 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloudMusic-React", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "normalize.css": "^8.0.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Givenchy-Coisini/cloudMusic-React/52c3d36c312fe2ad4a35d063177d78f72b5c53c6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | cloudMusic-React 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react' 2 | // 50min 3 | export default memo(function App() { 4 | return ( 5 |
6 |

App

7 |
8 | ) 9 | }) 10 | -------------------------------------------------------------------------------- /src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | @import "~normalize.css" -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './assets/css/reset.css' 5 | import App from './App'; 6 | 7 | 8 | ReactDOM.render( 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | --------------------------------------------------------------------------------