项目地址:https://github.com/coderwhy/hy-react-web-music
如果觉得不错,或者对你有帮助,点一个star~ coderwhy
1.1. 项目简介
使用React编写的云音乐PC Web项目,接口来源于开源的接口,自己已经做了部署。
项目已经完成功能如下:(你可以下载下来自己体验一下)
推荐页面:
- 轮播图
- 热门推荐
- 新碟上架
- 榜单
- 等等
![0ad25a8db6f016edb206bbe6472d271b.png](https://i-blog.csdnimg.cn/blog_migrate/5abfc6177cb80ca206260f5424753ff3.jpeg)
![0397890b6764dc0bb2c918db8e61b6a9.png](https://i-blog.csdnimg.cn/blog_migrate/ef6cea4328d0e93638f92bcf0d352a39.jpeg)
歌曲播放:
- 目前做了榜单中歌曲的点击播放;
- 事实上其他页面只要将歌曲的id传入到redux中就可以,整个逻辑已经打通;
- 做了歌曲的各种控制(暂停、播放、上一首、下一首、进度改变);
- 做了播放循序切换:顺序播放、随机播放、单曲循环;
- 做了歌词的解析、展示、滚动;
![e6c06538ecfdbd275175dc45f329692e.png](https://i-blog.csdnimg.cn/blog_migrate/3a6879dd94b6817f5710584ee696703c.jpeg)
排行榜页面:
- 各种榜单的切换;
![63403bae93ccc586677ee29af50c8bdb.png](https://i-blog.csdnimg.cn/blog_migrate/3a760a836f96136c797b04b3b33d1d75.jpeg)
歌单页面:
- 选择分类、选择分类后根据分类切换歌单;
- 根据分类,歌单列表的展示;
- 分页功能;
![b3eed7e63d5e26ec55be095eaae8c5c5.png](https://i-blog.csdnimg.cn/blog_migrate/33bedf8b3f323107f72c7e5500dcd9f5.jpeg)
主播电台:
- 电台分类的展示、滚动;
- 不同分类展示不同的数据;
- 电台排行榜展示、分页;
![f86c1e978da034475d0464cad1efbc93.png](https://i-blog.csdnimg.cn/blog_migrate/3036319df3d60b34cb9974fcfa8d4685.jpeg)
歌手页面:
- 各种歌手分类(没找到接口,还自定义了一些数据)
- 歌手字母分类、对应歌手展示;
![f6c60f3c222da2851fa5887fb8648dbb.png](https://i-blog.csdnimg.cn/blog_migrate/fd4a0a9b4b8224d19acc320d45a766c1.jpeg)
新碟上架页面:
- 热门新碟;
- 全部新碟、分页展示;
![9af693b9ef9d42727906c074c038985d.png](https://i-blog.csdnimg.cn/blog_migrate/04885ecf8e105658971fac7669abd549.jpeg)
1.2. 项目规范
项目规范:项目中有一些开发规范和代码风格
- 1.文件夹、文件名称统一小写、多个单词以连接符(-)连接;
- 2.JavaScript变量名称采用小驼峰标识,常量全部使用大写字母,组件采用大驼峰;
- 3.CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS、局部采用styled-component);
- 4.整个项目不再使用class组件,统一使用函数式组件,并且全面使用Hooks;
- 5.所有的函数式组件,为了避免不必要的渲染,全部使用memo进行包裹;
- 6.组件内部的状态,使用useState、useReducer;业务数据全部放在redux中管理;
- 7.函数组件内部基本按照如下顺序编写代码:
- 组件内部state管理;
- redux的hooks代码;
- 其他组件hooks代码;
- 其他逻辑代码;
- 返回JSX代码;
- 8.redux代码规范如下:
- redux结合ImmutableJS
- 每个模块有自己独立的reducer,通过combineReducer进行合并;
- 异步请求代码使用redux-thunk,并且写在actionCreators中;
- redux直接采用redux hooks方式编写,不再使用connect;
- 9.网络请求采用axios
- 对axios进行二次封装;
- 所有的模块请求会放到一个请求文件中单独管理;
- 10.项目使用AntDesign
- 项目中某些AntDesign中的组件会被拿过来使用;
- 但是多部分组件还是自己进行编写;
- 其他规范在项目中根据实际情况决定和编写;
1.3. 项目运行
clone项目:
clone https://github.com/coderwhy/hy-react-web-music.git
安装项目依赖:
yarn install
项目运行:
yarn start