# 网易云音乐

**Repository Path**: haijun885/netease-cloud-music

## Basic Information

- **Project Name**: 网易云音乐
- **Description**: 基于react，react-router，redux 搭建的网易云音乐
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-09-19
- **Last Updated**: 2022-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README





## 1. 项目简介

使用React编写的云音乐PC Web项目，接口来源于开源的接口。

项目已经完成功能如下：（你可以下载下来自己体验一下）

推荐页面：

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

![为](https://images.gitee.com/uploads/images/2021/0919/125612_550f6aaa_5672479.png "屏幕截图.png")


歌曲播放：

- 目前做了榜单中歌曲的点击播放；
- 事实上其他页面只要将歌曲的id传入到redux中就可以，整个逻辑已经打通；
- 做了歌曲的各种控制（暂停、播放、上一首、下一首、进度改变）；
- 做了播放循序切换：顺序播放、随机播放、单曲循环；







## 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中的组件会被拿过来使用；
  - 但是多部分组件还是自己进行编写；
  - 其他规范在项目中根据实际情况决定和编写；

  

  ## 

  

  

## 3.运行项目

- clone项目：

  ```
  git clone https://gitee.com/haijun885/netease-cloud-music.git
  ```

  安装项目依赖：

  ```
  yarn install
  ```

  项目运行：

  ```
  yarn start
  ```