reactantdcheckbox_React系列二十二云音乐项目实战

项目地址&＃xff1a;https://github.com/coderwhy/hy-react-web-music

如果觉得不错&＃xff0c;或者对你有帮助&＃xff0c;点一个star~ coderwhy

1.1. 项目简介

使用React编写的云音乐PC Web项目&＃xff0c;接口来源于开源的接口&＃xff0c;自己已经做了部署。

项目已经完成功能如下&＃xff1a;(你可以下载下来自己体验一下)

推荐页面&＃xff1a;

• 轮播图
• 热门推荐
• 新碟上架
• 榜单
• 等等

歌曲播放&＃xff1a;

• 目前做了榜单中歌曲的点击播放&＃xff1b;
• 事实上其他页面只要将歌曲的id传入到redux中就可以&＃xff0c;整个逻辑已经打通&＃xff1b;
• 做了歌曲的各种控制(暂停、播放、上一首、下一首、进度改变)&＃xff1b;
• 做了播放循序切换&＃xff1a;顺序播放、随机播放、单曲循环&＃xff1b;
• 做了歌词的解析、展示、滚动&＃xff1b;

排行榜页面&＃xff1a;

• 各种榜单的切换&＃xff1b;

歌单页面&＃xff1a;

• 选择分类、选择分类后根据分类切换歌单&＃xff1b;
• 根据分类&＃xff0c;歌单列表的展示&＃xff1b;
• 分页功能&＃xff1b;

主播电台&＃xff1a;

• 电台分类的展示、滚动&＃xff1b;
• 不同分类展示不同的数据&＃xff1b;
• 电台排行榜展示、分页&＃xff1b;

歌手页面&＃xff1a;

• 各种歌手分类(没找到接口&＃xff0c;还自定义了一些数据)
• 歌手字母分类、对应歌手展示&＃xff1b;

新碟上架页面&＃xff1a;

• 热门新碟&＃xff1b;
• 全部新碟、分页展示&＃xff1b;

1.2. 项目规范

项目规范&＃xff1a;项目中有一些开发规范和代码风格

• 1.文件夹、文件名称统一小写、多个单词以连接符(-)连接&＃xff1b;
• 2.Javascript变量名称采用小驼峰标识&＃xff0c;常量全部使用大写字母&＃xff0c;组件采用大驼峰&＃xff1b;
• 3.CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS、局部采用styled-component);
• 4.整个项目不再使用class组件&＃xff0c;统一使用函数式组件&＃xff0c;并且全面使用Hooks&＃xff1b;
• 5.所有的函数式组件&＃xff0c;为了避免不必要的渲染&＃xff0c;全部使用memo进行包裹&＃xff1b;
• 6.组件内部的状态&＃xff0c;使用useState、useReducer&＃xff1b;业务数据全部放在redux中管理&＃xff1b;
• 7.函数组件内部基本按照如下顺序编写代码&＃xff1a;
  • 组件内部state管理&＃xff1b;
  • redux的hooks代码&＃xff1b;
  • 其他组件hooks代码&＃xff1b;
  • 其他逻辑代码&＃xff1b;
  • 返回JSX代码&＃xff1b;
• 8.redux代码规范如下&＃xff1a;
  • redux结合ImmutableJS
  • 每个模块有自己独立的reducer&＃xff0c;通过combineReducer进行合并&＃xff1b;
  • 异步请求代码使用redux-thunk&＃xff0c;并且写在actionCreators中&＃xff1b;
  • redux直接采用redux hooks方式编写&＃xff0c;不再使用connect&＃xff1b;
• 9.网络请求采用axios
  • 对axios进行二次封装&＃xff1b;
  • 所有的模块请求会放到一个请求文件中单独管理&＃xff1b;
• 10.项目使用AntDesign
  • 项目中某些AntDesign中的组件会被拿过来使用&＃xff1b;
  • 但是多部分组件还是自己进行编写&＃xff1b;
• 其他规范在项目中根据实际情况决定和编写&＃xff1b;

1.3. 项目运行

clone项目&＃xff1a;

clone https://github.com/coderwhy/hy-react-web-music.git

安装项目依赖&＃xff1a;

yarn install


项目运行&＃xff1a;

yarn start