React音樂播放器(react+redux+react-router+webpack)
技術：React16，Redux，React-Router，WebPack
專案演示
會點ps,所以自己設計了頁面和互動。現在的資料都是是自己mock的，開發後臺的時候會對接真實資料，由於搜尋、收藏歌單、新建歌單、刪除歌單、收藏單曲、移除收藏單曲等功能需要後臺配合，所以現在都是純前端展示，不具備功能
部分頁面：
專案描述
專案基於四個業務模組：播放器、曲庫、發現、個人。這些模組中包含了一些基礎元件來支撐業務邏輯：
- 歌曲列表元件 ：（應用：曲庫-曲庫好歌、每日推薦、輪播圖二級頁面）點選歌曲播放並且高亮，收藏歌曲，將歌曲新增到播放列表；
- 可編輯歌曲列表元件
- 歌單列表元件 ：（應用：我的-我建立的歌單、我收藏的歌單）點選進入歌單詳情、刪除歌單；
- 拋物線小球元件 ：（應用：歌曲列表元件、可編輯歌曲列表元件）點選新增歌曲到播放列表圖示時，跳出一個加號代表已經新增進播放列表；
- 收藏歌曲元件 ：（應用：歌曲列表元件）點選收藏歌曲，彈出選框，使用者可選擇收藏到單曲列表還是收藏到歌單或者建立歌單（收藏的資料互動待完善）；
業務模組
播放器核心模組
- 上一曲，下一曲，播放，暫停
- 播放列表的展開收縮
- 列表內歌曲的刪除
- 頁面內歌曲新增到播放列表
- 播放詳情頁的展開與收縮
- 播放模式選擇（順序播放，隨機播放，單曲迴圈）
- 封面圖片旋轉
- 當前播放歌曲高亮顯示
- 歌詞同步（待開發）
曲庫模組
- redux內請求資料
- banner,每日推薦，曲庫好歌
- banner與每日推薦可點選進入二級頁頁面，二級頁面基於歌曲列表元件構建，展示歌曲列表，實現列表內歌曲點選播放與新增進播放器播放列表
- 曲庫好歌為直接的列表展示，功能同上
- 列表歌曲進場動效展示
- 收藏歌曲彈出選項
發現
- 搜尋歌曲（只前端展示靜態的搜尋結果，待完善）
- 排行榜
- 風格模組
個人模組
- 我的資料（待開發）
- 修改資料（待完善）
- 收藏的單曲
- 收藏的歌單
- 新建歌單、刪除歌單
- 移除收藏的單曲
登入註冊（待開發）
Redux設計
首先，這次設計的redux貌似不合理。。有幾個沒必要放到store裡共享的狀態也放進去了。大家當反面教材吧。。引入redux-thunk中介軟體，大部分axios請求都放到了redux中。
store內的狀態分為8個模組：
- album ：專輯模組資訊（專輯列表、專輯詳情、專輯內歌曲、專輯介紹）；
- comment ：評論模組（評論內容、是否已經請求回來，收到的回覆（暫未開發））；
- discovery ：發現模組（排行榜列表，風格）；
- personal ：個人模組（使用者資訊、收藏歌單，收藏的歌曲數量，歌單數量）；
- repertoire ：曲庫模組（輪播圖、每日推薦資料，曲庫好歌）；
- player ：播放器核心模組（當前播放的歌曲，待播放歌曲列表，是否應該渲染）；
- publicSongs ：公共的歌曲列表，可編輯歌曲列表和播放器核心共用，這樣設計的原因是可編輯播放列表內的一鍵播放功能需要和播放器核心關聯起來，如果點選一鍵播放，那麼順序播放歌單內歌曲，否則播放完成後播放待播放歌曲列表內歌曲；
- song-list-detail ：歌單詳情；
專案結構
總結
這專案是在我寫的一個播放器上擴充套件來的，同時為了練習一下react全家桶開發的模式。通過幾個react實戰再加上這個練習，這種開發模式已經基本熟悉了，但是也還停留在寫業務程式碼的階段，這遠遠不夠。還要學習從0開始構建一個完整的專案。redux這次用的比較多但是還需要深入學習（這個專案使用create-react-app一鍵建立的）。現在前端開發基本完成了，效能還未做優化。接下來慢慢的要開發後臺，提供資料了，優化效能。