# React Netease Music
React Netease Music——一个基于React、TypeScript的高仿网易云mac客户端播放器。
## 项目体验地址
[高仿网易云音乐播放器——音为爱呀😍](http://www.uniquemo.cn/discovery)
## 功能列表
- [x] 登录/登出（目前仅支持手机密码登录）
- [x] 发现页
- [x] banner
- [x] 推荐歌单
- [x] 推荐最新音乐
- [x] 推荐MV（仅是入口，详情待实现）
- [x] 每日歌曲推荐页
- [x] 全部歌单页
- [x] 歌单分类查询
- [x] 最新音乐页
- [x] 歌单详情页
- [x] 音乐播放详情页
- [x] 歌曲评论
- [x] 点赞/取消点赞歌曲评论
- [x] 歌词滚动
- [x] 歌曲所在歌单
- [x] 相似歌曲推荐
- [x] 播放记录功能
- [x] 播放列表
- [x] 历史记录
- [x] 搜索功能
- [x] 热门搜索关键字
- [x] 搜索建议
- [x] 搜索结果页
- [x] 创建的歌单列表
- [x] 收藏的歌单列表
- [ ] 排行榜
- [ ] 所有歌手页
- [ ] 歌手详情页
- [ ] MV相关的页面与功能
- [ ] 创建/编辑/删除歌单
- [ ] 私信/@我/评论等通知功能
- [ ] 主题换肤
- [ ] ......看心情添加功能😂
注意：部分歌曲可能由于版权问题无法播放喔。
## 技术栈
- React，使用react hook做状态管理，没有使用额外的数据管理库。
- TypeScript，用TypeScript确实可以提高效率😃（容易发现错误）。
- Graphql，使用@apollo/client优化部分页面性能。
- @blueprintjs组件库，主要使用其中的Icon、Dialog、Toast、Spinner等。
- 逐渐使用[@uniquemo/mui](https://github.com/uniquemo/mui)替换@blueprinjs（Doing）。
- CSS Modules。
- Webpack。
- Eslint做代码检查。
## API接口
- [NeteaseCloudMusicApi](https://binaryify.github.io/NeteaseCloudMusicApi)
- [Express Graphql Server](https://github.com/uniquemo/express-graphql-server)
## 播放器的相关截图
## 项目启动
- 首先将上面👆提到的API接口部分，两个API服务代码拉到本地，并启动对应的服务；
- [安装`pnpm`包管理工具](https://pnpm.io/installation)；
- 然后拉取本仓库代码，并执行以下命令：
```
pnpm install
pnpm run dev:local
```
- 最后在浏览器中访问：`http://localhost:8080`
前端火爆真实项目源码练习 （201个子文件） 
.babelrc 268B nginx.conf 175B style.module.css 2KB style.module.css 2KB style.module.css 2KB style.module.css 1KB style.module.css 1KB global.module.css 1KB style.module.css 1KB style.module.css 1KB style.module.css 1KB style.module.css 961B style.module.css 890B style.module.css 874B style.module.css 872B style.module.css 845B style.module.css 801B style.module.css 797B style.module.css 791B style.module.css 779B style.module.css 718B style.module.css 709B style.module.css 670B style.module.css 657B style.module.css 637B style.module.css 608B style.module.css 481B style.module.css 463B style.module.css 458B style.module.css 456B style.module.css 448B style.module.css 443B style.module.css 429B style.module.css 410B style.module.css 391B style.module.css 333B style.module.css 326B style.module.css 311B style.module.css 305B style.module.css 274B style.module.css 259B colors.module.css 257B style.module.css 257B style.module.css 243B style.module.css 192B style.module.css 162B constants.module.css 143B style.module.css 120B style.module.css 118B style.module.css 113B style.module.css 91B style.module.css 90B style.module.css 80B style.module.css 66B style.module.css 64B style.module.css 64B style.module.css 64B Dockerfile 311B .gitignore 36B
index.html 226B favicon.ico 4KB webpack.base.config.js 3KB .eslintrc.js 2KB webpack.dev.config.js 934B stylelint.config.js 927B webpack.prod.config.js 798B webpack.config.babel.js 322B postcss.config.js 154B .prettierrc.js 138B package.json 4KB settings.json 913B tsconfig.json 465B CHANGELOG.md 12KB 升级webpack5.md 5KB README.md 3KB 升级react16到react17.md 1KB
01_个性推荐页.png 3.74MB 03_全部歌单.png 3.48MB 08_搜索功能.png 3.19MB 07_播放记录功能.png 3.09MB 06_音乐播放详情.png 779KB 05_歌单详情页.png 752KB 04_最新音乐页.png 609KB 09_搜索结果页.png 501KB 02_每日歌曲推荐.png 455KB play-bar.png 26KB play-cd.png 9KB github-logo.png 7KB docker.sh 781B bash.sh 199B createHTMLMediaHook.ts 6KB song.ts 3KB playMusic.ts 3KB business.ts 3KB songlist.ts 2KB useAsyncFn.ts 2KB comment.ts 1KB personalized.ts 1KB axios.ts 1KB time.ts 1KB共 201 条
- 1
- 2
- 3
资源评论
Web面试那些事儿
- 粉丝: 5776
- 资源: 101
最新资源
- 微信自动发送消息，微信机器人（简单），可以给一个特定的人发送一个特定的消息，后续会继续完善的.zip
- 以下是关于Python项目设计资源的详细内容.docx
- 三菱plc基于mx组件的通用访问远程api接口
- 一套基于 .NET 开发的支付SDK，它简化了API调用及通知的处理流程
- 以下是关于使用各种编程语言实现算法的详细学习资源.docx
- e刚发的如果看你的了啊好吧耳鼻喉热交换包括aelh
- kernel-5.15-ky10-x86.tar.gz
- yolov4 - tiny 900张图片训练效果2
- 基于OpenCV的简易实时人脸识别门禁控制系统
- 以下是 YOLO（You Only Look Once）学习的详细课程.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
