React-Music 全家桶專案，原創獨立開發，精品之作！

jone_chen發表於2017-10-27
React

React-Music

一、簡介

該專案是基於React全家桶開發的一個音樂播放器，技術棧採用：Webpack + React + React-redux + React-router + Node + Sass + Es6 + Localstorage+ Css3，基本音樂API使用http-proxy酷狗音樂的，在此感謝酷狗音樂！專案涉及的知識點非常廣泛，基於react全家桶技術都有使用，原創獨立開發精品之作，具有很好的參考價值！

1、專案依賴基本核心版本：

  • react: "^15.6.1",
  • react-dom: "^15.6.1",
  • react-router: "^4.2.0",
  • react-router-dom: "^4.2.2"
  • react-redux: "^5.0.6",
  • redux: "^3.7.2",
  • webpack: "^3.5.5",
  • webpack-dev-server: "^2.7.1"

2、該音樂播放器基本功能：

  • 展示最新的推薦歌單、歌單、排行榜、歌手；
  • 音樂的播放、暫停、上一首、下一首、刪除當前播放列表功能；
  • 控制音量大小，搜尋加入歷史儲存功能；
  • 基本搜尋功能；
  • 喜歡音樂加入收藏列表；
  • 模擬登入功能（隨便輸入使用者名稱，密碼即可）；

3、專案動圖預覽，請直接移步 Github 看原始碼和動圖吧！

二、專案結構

├── src                           專案主檔案目錄
│   ├── actions                   Redux actions
│   │   ├── xxx.js
│   │   └── ...
│   ├── components              木偶元件主目錄
│   │   ├──    Artist
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Common
│   │   │    ├── xxx.js
│   │   │   └── ...
│   │   ├──    Home
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    New
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Play
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Rank
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Search
│   │   │    ├── xxx.js
│   │   │    └── ...   
│   │   └── User
│   │       ├── xxx.js
│   │       └── ...
│   ├── constants                  Constant 常量
│   │   └── index.js
│   ├── reducers                  Redux reducers
│   │   ├── index.js
│   │   └── ...
│   ├── containers                  智慧元件 
│   │   ├──    Artist
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Home
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    New
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Play
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Rank
│   │   │    ├── xxx.js
│   │   │    └── ...
│   │   ├──    Search
│   │   │    ├── xxx.js
│   │   │    └── ...   
│   │   └── User
│   │       ├── xxx.js
│   │       └── ...
│   ├── routes                  路由
│   │   └── index.js
│   ├── static                  靜態檔案目錄
│   │   ├──    css
│   │   │    ├── xxx.scss
│   │   │    └── ...   
│   │   └── images
│   │       └── ...
│   ├── store                      Redux store
│   │   └── configureStore.js
│   ├── util                      工具目錄
│   │   ├── xxx.js
│   │   └── ...
├── templates                        模板        
│   └── index.html    
├── dist                           打包生成目錄              
│   ├── css              
│   │   └── xxx.css
│   ├── js                  
│   │    ├── xxx.js
│   │    └── ...
│   ├── favicon.ico
│   └── index.html
├── node_modules                   
│   └── ...                     
├── README.md
├── app.js                        Express下的啟動配置
├── server.js                    主要服務啟動檔案   
├── webpack.config.js             基本配置      
├── webpack.prod.config.js         生產環境配置
├── yarn.lock                     
└── package.json複製程式碼

screenshot與images.md為截圖說明檔案，是為了方便檢視，與本專案無關！

三、如何執行

1、將專案克隆到本地，cd 到 react-music

git clone git@github.com:chenjun1127/react-music.git
cd react-music複製程式碼

2、安裝依賴

npm install or yarn install複製程式碼

3、執行

npm start or yarn start
// npm run build(打包)複製程式碼

4、開啟瀏覽器瀏覽 http://localhost:3000/

四、專案總結

整體專案實現了一個基本播放器應有的功能，但個別功能還有待完善，比如收藏列表本地持續化儲存、登入註冊未做真正限制等。覺得專案不錯的，可以給個Star，謝謝！

Tips：在npm install or yarn install 的時候，請確保網路良好，如個別依賴安裝不了，請設定淘寶映象為安裝源；

如有問題：請聯絡QQ：402074940

相關文章