wanguano / Music163 React
🔥基于React全家桶开发:「网易云音乐PC端项目」实战
Stars: ✭ 209
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Music163 React
React Cloud Music
React 16.8打造精美音乐WebApp
Stars: ✭ 1,722 (+723.92%)
Mutual labels: immutable, redux-thunk, axios, styled-components
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-44.5%)
Mutual labels: axios, styled-components, react-router
trivin
⚡️Setup your entire project quickly and easily with 1-line command ⚡️
Stars: ✭ 58 (-72.25%)
Mutual labels: react-router, redux-thunk, axios
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-50.72%)
Mutual labels: axios, styled-components, react-router
React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+389%)
Mutual labels: redux-thunk, axios, react-router
Road Beyond React App
🌈 The Road beyond React - Thing you can use after learning plain React.js
Stars: ✭ 108 (-48.33%)
Mutual labels: styled-components, react-router
Placeline Nextjs
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Stars: ✭ 88 (-57.89%)
Mutual labels: axios, styled-components
Favesound Redux
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
Stars: ✭ 1,586 (+658.85%)
Mutual labels: redux-thunk, react-router
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-32.54%)
Mutual labels: styled-components, react-router
Apple Basket Redux
🍎 苹果篮子,一个微型的redux/mobx演示(附多版本)
Stars: ✭ 125 (-40.19%)
Mutual labels: immutable, redux-thunk
React Page Transition
A React component that makes it easy to use the page transitions from the Codedrops page transitions demo with React
Stars: ✭ 145 (-30.62%)
Mutual labels: styled-components, react-router
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-54.55%)
Mutual labels: styled-components, react-router
Spotify Clone Client
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK
Stars: ✭ 162 (-22.49%)
Mutual labels: axios, react-router
React Interview Questions
300+ React Interview Questions
Stars: ✭ 151 (-27.75%)
Mutual labels: redux-thunk, react-router
Digag Pc React
digag pc website based on react.
Stars: ✭ 209 (+0%)
Mutual labels: immutable, react-router
React Admin
基于antd、redux-observable、redux-thunk、react-router响应式SPA脚手架,后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 141 (-32.54%)
Mutual labels: redux-thunk, react-router
Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (-14.35%)
Mutual labels: axios, react-router
Koa React Notes Web
🤓 A simple SPA built using Koa (2.5.1) as the backend and React (16.4.1) as the frontend. Features MySQL integration, user authentication, CRUD note actions, and more.
Stars: ✭ 61 (-70.81%)
Mutual labels: styled-components, react-router
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邮箱”或“手机号”登录
- 歌曲列表:
- 对歌曲列表支持拖拽排序
- 搜索音乐框:
- 优化在搜索歌曲时, 支持键盘"↑"+"↓"来切换搜索歌曲内容
- 头部进度条:
- 在页面路由跳转&网络请求时"添加头部进度条"显示
- 404页:
- 添加404页,在路由没有匹配的页面时,会显示404页面
修改BUG
- 榜单切换bug
- 在榜单切换时, 跳转其他页面, 再跳转回榜单页面(bug)
- 状态: 完成✔
- ctrl+k 不能唤醒搜索框
- 问题:在其他路由组件内使用快捷键不能唤醒搜索框
- 状态:完成✔
- 在搜索路由组件
- 问题:头部(header)搜索框和当前组件内搜索框内容不同步
- 状态:完成✔
- Ctrl+k全局注册唤醒下拉框
- 问题:在其他页面下,Ctrl+k不能唤醒
- 状态:完成✔
TO-DO-LIST(可能会开发)
- 独立登录功能
- 登录的信息保存在独立的服务器当中,便以后续扩展
- 上传音乐功能?
- 用户可以自定义上传音乐,下次当前用户登录后依旧保存歌曲列表
- 社区(歌单|心情分享)
- 发帖、评论
界面和功能展示
推荐/新碟上架/榜单
路由切换
歌曲评论
排行榜
播放器
支持对歌曲列表进行拖拽排序
歌曲切换(随机、顺序、单曲循环)
歌曲搜索
- 新增:键盘事件↓ & 函数防抖
-
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:网易云音乐
NodeJS
版API
,提供音乐数据 - 也可以使用已经部署到服务器上的网易云接口: http://123.57.176.198:3000/
其他工具
- create-react-app:React 脚手架工具,快速初始化项目代码
- eslint:代码风格检查工具,帮助我们规范代码书写
构建项目
- 克隆代码到本地之后,需要运行 NeteaseCloudMusicApi,来起一个音乐的 API 接口。(可选)
- 如果需要在服务器上搭建的话就需要将 API 放到自己的服务器上面。(可选)
- 已经部署到服务器的网易云音乐接口: http://123.57.176.198:3000/ (默认的API接口)
# yarn dependencies
yarn install | npm install
# serve with hot reload at localhost:3000
yarn satrt | npm satrt
# build for production with minification
yarn build | npm build
感谢
最后
如果觉得项目还不错的话 👏,就给个 star ⭐ 鼓励一下吧~
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].