基于 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
- 新增:键盘事件↓ & 函数防抖
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 ⭐ 鼓励一下吧~