高仿網易雲音樂 Vue前端專案

現在就克隆下來看看吧！

Github地址： github.com/cat-walk/mu…

專案部署地址： meiyun.info

前端部分

1. 安裝依賴

npm install
複製程式碼

2. 起專案

npm run serve
複製程式碼

後端部分

Github地址：github.com/Binaryify/N…

後端操作見文件。

介面和功能展示

首頁展示banner、推薦歌單，點選可進入排行榜

歌曲播放介面支援播放進度同步、收藏或取消收藏當前歌曲

banner、排行榜左邊的三個按鈕點選沒有效果( ´▽｀) ，沒時間寫那些啦...

實現了登入功能

登入後展示頭像和暱稱，且可進入個人中心即“我的”頁面，可檢視收藏的音樂和最近播放過的音樂。

搜尋模組：熱門搜尋、搜尋歷史、搜尋建議

專案結構

PS：

1. 打勾的為已完成的內容，現在本專案除個人資訊修改以外，其他功能都已完成。

2. 字型加粗的部分為一個元件，第二次使用同一元件（即元件複用）時不再加粗，以做標識。

• 1. 側邊欄模組

  • 個人資訊展示（頭像、暱稱）
    • 個人資訊修改
  • 登入按鈕
    • 登入模組

• 2. 音樂推薦模組（主頁)

  • 輪播圖banner模組
  • 排行榜入口
    • 排行榜模組
      • 歌單詳情模組
        • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能
  • 推薦歌單模組
    • 歌單詳情模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能

• 3. 個人中心模組

  • 最近播放歌曲入口
    • 最近播放歌曲展示模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能
  • 我的收藏入口
    • 歌單詳情模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能

• 4. 搜尋模組

  • 搜尋框模組
    • 搜尋結果模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能
  • 熱門搜尋模組
    • 搜尋結果模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能
  • 搜尋歷史模組（與熱門搜尋模組公用一個元件）
    • 搜尋結果模組
      • 播放控制模組：實現了收藏/取消收藏歌曲的功能，實現了新增到最近播放歌曲的功能

程式碼規範

使用EsLint, lint規範採用airbnb 的js 程式碼規範

在VSCode裡配置 ESLint + Airbnb + Vue

技術方案

• 專案目錄結構

  參考 優雅的 Vue 專案目錄結構設計

• 移動適配方案

  基於amfe-flexible，進行了符合自己使用習慣的修改

  示例：

  • 根目錄字型大小：100px，即1rem = 100px。

  • 設計稿上75px = 75/100 = 0.75rem。

• 統一不同瀏覽器的預設樣式: Normalize.css現已改用minireset.css

  Normalize.css：參考 normalize.css與reset.css的不同 normalize.css的使用

• 側邊欄實現：vue-slideout

• 輪播圖實現：在Vue中使用Swiper

專案已知問題

1. 點選收藏歌曲按鈕後，會有一定的延遲（0.5s～5s）收藏才會成功。
2. 頻繁點選收藏按鈕會導致收藏/取消收藏功能不生效。

問題1、2可能是後臺對網易雲的資料做了快取導致的。（這個思考並沒有動腦子，咳咳( ´▽｀)

3. 開啟側邊欄的按鈕有時會失效（側邊欄使用了vue-slideout外掛 =====>甩鍋:)
4. 由於一系列複雜的問題，通過搜尋介面進入歌曲控制頁面的話，沒有封面圖片，只有懶載入的預設圖片

寫這個專案的經驗和收穫將在整理後發到我的Github上，應該不會鴿

致謝

非常感謝後臺提供者Binaryify，介面很穩定，文件很完善

非常感謝CaiJinyc，我從ta的專案裡學到了不少

1. github.com/CaiJinyc/vu…
2. github.com/Binaryify/N…