網易雲音樂PC項目實戰

項目簡介

1.項目介紹

• 項目使用到的技術棧

  • CSS使用Flex進行佈局
  • 配置路徑別名使用: carco
  • 項目路由使用: react-router來管理
  • 使用react-router-config集中式路徑映射表管理
  • 使用styled-components+普通的css編寫樣式
  • 使用axios發送網絡請求
  • 項目全面擁抱React Hooks
  • 項目組件庫使用: ant design
  • 使用immutable對項目reducer中state進行管理
  • 使用redux-immtable對根目錄reducer中state進行管理
  • 項目使用redux-thunk中間件
  • 使用propType校驗props類型及默認值
  • 使用react-transition-group添加過渡動畫效果
  • 項目中的優化: 函數式組件全部採用memo、路由懶加載、函數防抖

• 項目的目標

  • 使用React全家桶開發網易雲音樂PC網站

2.適合人羣及收穫

• 適合人羣:

  • 適合想了解一個項目的大致流程

  • 或者是學習了React 全家桶但是缺乏React項目經驗

    • （如果有的知識點不瞭解，可以參考以前React系列文章）
    • （最好了解一點Node）

• 收穫:

  • 如何設計音樂播放器組件，歌詞解析等
  • 項目目錄的結構劃分，大型項目的state管理
  • 項目的大致流程，如何進行性能優化等等

• 注意：

  • 學習本篇文章時，頁面邏輯js不再貼出 (只有大致的實現思路)
  • 畢竟思考和多動手才是實踐😎

3.頁面效果和功能展示

推薦/新碟上架/榜單

路由切換

歌曲評論

排行榜

播放器

歌曲切換(隨機、順序、單曲循環)

歌曲搜索

• 新增：鍵盤事件↓ & 函數防抖

  • ctrl+k 搜索框獲取焦點 & 喚醒搜索下拉框
  • esc 取消焦點 & 下拉框
  • enter 進入歌曲搜索詳情

歌曲搜索詳情列表

• 在搜索框中按下回車即可，搜索列表基本功能實現

4.項目源碼及API接口

• 項目部署預覽地址：查看預覽地址
• 項目Github地址: Musci 163 如果覺得項目還不錯的話 👏，就給個 ⭐ 鼓勵一下吧~

• API説明(以下二選一即可)

  • 可選一：

    • API接口文檔
    • 可以自己本地部署網易雲Node API接口，也可以使用我已經部署到服務器的API👇

  • 可選二：

    • 已經部署到服務器接口: 在線網易雲音樂API

5.項目規範

• 項目規範：項目中有一些開發規範和代碼風格 (也可以按照自己的習慣)

  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代碼規範如下:

     • 每個模塊有自己獨立的reducer，通過combineReducer進行合併；
     • 異步請求代碼使用redux-thunk，並且寫在actionCreators中；
     • redux直接採用redux hooks方式編寫，不再使用connect；
• 其他規範在項目中根據實際情況決定和編寫；

6.React devtools標記隱藏(瞭解即可)

• 在開發項目實戰之前: 我們打開網易雲音樂官網，會發現網易雲官網為什麼看不到react devtools插件的標記 (瞭解即可，不重要)
• React devtools標記隱藏

// disable react-dev-tools for this project 
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

項目初始化

前言-vscode&chrome插件(可選)

• 如果已經安裝過了可以選擇跳過，以下都是可選的，當然不安裝也沒問題

• 為了更便捷的開發項目，推薦安裝以下vscode插件

  • ESLint: 代碼風格檢查工具，幫助我們規範代碼書寫
  • vscode-styled-components: 在編寫styled-components中語法高亮顯示和樣式組件的
  • path-alias: 別名路徑有對應的智能提示
  • ES7 React/Redux/GraphQL/React-Native snippets: 代碼片段

• chrome插件

  • Redux DevTools: 方便調試redux數據
  • FeHelper: 對服務器返回的json數據進行美化

1.項目目錄劃分

• 使用create-react-app腳手架初始化項目結構: create-react-app music163_xxx
• 目錄結構也可以按照自己習慣的結構來劃分

│─src
  ├─assets 存放公共資源css和圖片
    ├─css  全局css
    ├─img  
  ├─common  公共的一些常量
  ├─components 公共組件
  ├─pages   路由映射組件
  ├─router  前端路由配置
  ├─service 網絡配置和請求
  └─store   全局的store配置
  └─utils   工具函數
  └─hooks   自定義hook

2.項目説明

• 本章只是對項目進行了初步介紹及明確目標。
• 之後關於項目實戰的文章，在後續進行發佈(比較詳細,每章都有明確完成目標的gif圖)
• 做項目實戰+開發文檔不容易, 前前後後在校接近做了2個月左右, 對各位朋友有用的話, 希望給個star⭐

感謝

• 非常感謝王紅元老師的React核心技術實戰讓我學習到很多 React 的知識。
• 非常感謝後台提供者Binaryify，接口很穩定，文檔很完善