网易云音乐PC项目实战
项目简介
1.项目介绍
- 项目使用到的技术栈
CSS
使用Flex
进行布局- 配置路径别名使用:
carco
- 项目路由使用:
react-router
来管理 - 使用
react-router-config
集中式路径映射表管理 - 使用
styled-components
+普通的css
编写样式 - 使用
axios
发送网络请求 - 项目全面拥抱
React Hooks
- 项目组件库使用:
ant design
- 使用
immutable
对项目reducer
中state
进行管理 - 使用
redux-immtable
对根目录reducer
中state
进行管理 - 项目使用
redux-thunk
中间件 - 使用
propType
校验props
类型及默认值 - 使用
react-transition-group
添加过渡动画效果 - 项目中的优化: 函数式组件全部采用
memo
、路由懒加载、函数防抖
- 项目的目标
- 使用
React
全家桶开发网易云音乐PC网站
- 使用
2.适合人群及收获
- 适合人群:
- 适合想了解一个项目的大致流程
- 或者是学习了
React 全家桶
但是缺乏React项目经验- (如果有的知识点不了解,可以参考以前React系列文章)
- (最好了解一点
Node
)
- 收获:
- 如何设计音乐播放器组件,歌词解析等
- 项目目录的结构划分,大型项目的
state
管理 - 项目的大致流程,如何进行性能优化等等
- 注意:
- 学习本篇文章时,页面逻辑
js
不再贴出 (只有大致的实现思路) - 毕竟思考和多动手才是实践😎
- 学习本篇文章时,页面逻辑
3.页面效果和功能展示
推荐/新碟上架/榜单
路由切换
歌曲评论
排行榜
播放器
歌曲切换(随机、顺序、单曲循环)
歌曲搜索
- 新增:键盘事件↓ & 函数防抖
ctrl+k
搜索框获取焦点 & 唤醒搜索下拉框esc
取消焦点 & 下拉框enter
进入歌曲搜索详情
歌曲搜索详情列表
- 在搜索框中按下
回车
即可,搜索列表基本功能实现
4.项目Github源码及API接口
- 项目部署预览地址👉:查看预览地址
- 项目
Github
地址👉: Musci 163 如果觉得项目还不错的话 👏,就给个 ⭐ 鼓励一下吧~ - API说明(以下二选一即可)
- 可选一:
- API接口文档
- 可以自己本地部署网易云
Node API
接口,也可以使用我已经部署到服务器的API
👇
- 可选二:
- 已经部署到服务器接口: 在线网易云音乐API
- 可选一:
5.项目规范
-
项目规范:项目中有一些开发规范和代码风格 (也可以按照自己的习惯)
-
文件夹、文件名称统一小写、多个单词以连接符(
-
)连接; -
JavaScript
变量名称采用小驼峰标识,常量全部使用大写字母,组件采用大驼峰; -
CSS采用普通
CSS
和styled-component
结合来编写- 全局采用普通
CSS
、局部采用styled-component
- 全局采用普通
-
整个项目不再使用
class
组件,统一使用函数式组件,并且全面拥抱Hooks
; -
所有的函数式组件,为了避免不必要的渲染,全部使用
memo
进行包裹; -
组件内部的状态,使用
useState
、useReducer
;业务数据全部放在redux
中管理; -
函数组件内部基本按照如下顺序编写代码:
- 组件内部
state
管理; redux
的hooks
代码;- 其他组件
hooks
代码; - 其他逻辑代码;
- 返回JSX代码;
- 组件内部
-
redux
代码规范如下:- 每个模块有自己独立的
reducer
,通过combineReducer
进行合并; - 异步请求代码使用
redux-thunk
,并且写在actionCreators
中; redux
直接采用redux hooks
方式编写,不再使用connect
;
- 每个模块有自己独立的
-
-
其他规范在项目中根据实际情况决定和编写;
6.React devtools标记隐藏(了解即可)
- 在开发项目实战之前: 我们打开网易云音乐官网,会发现网易云官网为什么看不到
react devtools
插件的标记 (了解即可,不重要) - React devtools标记隐藏
// disable react-dev-tools for this project
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
}
}
项目初始化
前言-vscode&chrome插件(可选)
-
如果已经安装过了可以选择跳过,以下都是可选的,当然不安装也没问题
-
为了更便捷的开发项目,推荐安装以下
vscode
插件-
ESLint
: 代码风格检查工具,帮助我们规范代码书写 -
vscode-styled-components
: 在编写styled-components
中语法高亮显示和样式组件的 -
path-alias: 别名路径有对应的智能提示
-
ES7 React/Redux/GraphQL/React-Native snippets
: 代码片段
-
-
chrome
插件- Redux DevTools: 方便调试
redux
数据 - FeHelper: 对服务器返回的
json
数据进行美化
- Redux DevTools: 方便调试
1.项目目录划分
- 使用
create-react-app
脚手架初始化项目结构:create-react-app music163_xxx
- 目录结构也可以按照自己习惯的结构来划分
│─src
├─assets 存放公共资源css和图片
├─css 全局css
├─img
├─common 公共的一些常量
├─components 公共组件
├─pages 路由映射组件
├─router 前端路由配置
├─service 网络配置和请求
└─store 全局的store配置
└─utils 工具函数
└─hooks 自定义hook
2.项目说明
- 本章只是对项目进行了初步介绍及明确目标。
- 之后关于项目实战的文章,在后续进行发布(比较详细,每章都有明确完成目标的
gif
图)- 做项目实战+开发文档不容易, 前前后后在校接近做了2个月左右, 对各位朋友有用的话, 希望给个star⭐