全新版本仿网易云音乐来啦
前言
在前端技術(shù)領(lǐng)域中，我們可以切身感受得到技術(shù)的更新、變革的速度是非?？斓?#xff0c;所以工程師們都會(huì)需要時(shí)常關(guān)注和學(xué)習(xí)一些新技術(shù)、新標(biāo)準(zhǔn)。
因?yàn)樵诠ぷ髦胸?fù)責(zé)項(xiàng)目的技術(shù)棧相比于業(yè)界來(lái)說(shuō)，算比較落后了，所以自己動(dòng)手來(lái)開(kāi)發(fā)一個(gè)音樂(lè)類(lèi) web app，可以嘗試一些新技術(shù)棧，或者往一些特定方向深挖學(xué)習(xí)。
項(xiàng)目開(kāi)發(fā)時(shí)間從年末至今，利用工作之余的時(shí)間斷斷續(xù)續(xù)地開(kāi)發(fā)，主體功能已經(jīng)大致完成了，接下來(lái)也會(huì)陸續(xù)添加一些新功能上去，也會(huì)持續(xù)優(yōu)化代碼，在此也做一下記錄和總結(jié)。
項(xiàng)目信息
在線(xiàn)體驗(yàn)使用 chrome 移動(dòng)端調(diào)試體驗(yàn)
項(xiàng)目地址
技術(shù)棧
- vue：vue 2.6, vue-router, vuex, vue-server-renderer
- webpack：webpack 4, webpack-dev-middleware, webpack-hot-middleware
- node：express 4
- test：karma 4, mocha, sinon-chai, vue/test-utils, eslint
整體架構(gòu)
后端 api 是使用 NeteaseCloudMusicApi，提供了非常多接口，并且支持 CORS 跨域。
項(xiàng)目分為兩個(gè)部分，分別是前端，比如 javascript、css、img、components 等；還有服務(wù)端，負(fù)責(zé)請(qǐng)求響應(yīng)和服務(wù)端渲染，所以項(xiàng)目整體架構(gòu)如圖：
技術(shù)實(shí)現(xiàn)
項(xiàng)目剛開(kāi)始使用 vue-cli 初始化，開(kāi)箱即用的使用體驗(yàn)為我省去了不少繁瑣的流程，可以直接上手進(jìn)行開(kāi)發(fā)。
登錄態(tài)
用戶(hù)登錄是首先需要解決的問(wèn)題，因?yàn)樵S多接口都依賴(lài)用戶(hù)登錄態(tài)。最終是將 api 服務(wù)和項(xiàng)目分成兩個(gè)子域名：
163api.domain.cn // api 163music.domain.cn // 項(xiàng)目但是后來(lái)發(fā)現(xiàn)，請(qǐng)求登錄接口成功后，用戶(hù) cookie 無(wú)法寫(xiě)入到瀏覽器內(nèi)，發(fā)現(xiàn)原來(lái)是 cookie 內(nèi)的 domain 設(shè)置的是 api 子域名，所以導(dǎo)致 163music.domain.cn 下是無(wú)法讀取到 cookie 的，但是經(jīng)過(guò)調(diào)試發(fā)現(xiàn)，接口在 set cookie 的時(shí)候是并沒(méi)有設(shè)置 domain，解決方案是在 nginx 內(nèi)加上 proxy_cookie_path 的配置，為 cookie 添加 domain 為 .domain.cn，那么在其他子域名下就能正常讀取到 cookie（剛開(kāi)始設(shè)置的是替換 domain，然而不會(huì)生效）：
// nginx.conf server {listen 80;server_name 163api.domain.cn;location / {proxy_pass http://127.0.0.1:3000/;proxy_cookie_path ~^(.+)$ "$1; domain=domain.cn";} }webpack
在項(xiàng)目開(kāi)始初期，一切都是那么的和諧，可以歡騰暢快的開(kāi)發(fā)。開(kāi)發(fā)到中期功能都完成的差不多時(shí)候決定添加 ssr 了。vue-cli 3 是可以通過(guò)配置文件 vue.config.js 來(lái)實(shí)現(xiàn)自定義的 webpack 配置，在加入了 ssr 相關(guān)配置之后，就可以成功構(gòu)建打包了，但我希望代碼能夠?qū)崟r(shí)重載和模塊熱替換，不然開(kāi)發(fā)效率會(huì)比較低下。然后，在嘗試了一些改造方案（一番掙扎）之后，還是覺(jué)得不能夠很靈活地實(shí)現(xiàn)，我決定重新搭建環(huán)境 Orz
主要的 webpack 配置是參考 vue-cli，node 代碼主要參考官方 demo，當(dāng)代碼編寫(xiě)好后就嘗試運(yùn)行了，結(jié)果當(dāng)然是...滿(mǎn)屏紅色報(bào)錯(cuò)。
因?yàn)楣俜?demo 使用的 webpack 3，所以有些配置需要更新，還有一些依賴(lài)隨版本升級(jí)也需要更新調(diào)用方法等等。但值得高興的是，錯(cuò)誤提示都基本是準(zhǔn)確的，比如：
// 需要提供 mode 選項(xiàng) The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. // 配置遷移，需要使用新配置選項(xiàng) Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.還有可能會(huì)缺少各種 loader，需要安裝各種依賴(lài)。確保構(gòu)建流程正常后，就可以打開(kāi)瀏覽器內(nèi)看效果了，但又會(huì)發(fā)現(xiàn)這樣的報(bào)錯(cuò)：
window is not defined.原因是因?yàn)橐粋€(gè)輪播插件內(nèi)包含 window，而在 node 環(huán)境內(nèi)是沒(méi)有這個(gè)全局變量的，所以導(dǎo)致了這個(gè)報(bào)錯(cuò)。亦或者訪(fǎng)問(wèn)其他瀏覽器內(nèi)置對(duì)象時(shí)，也會(huì)出現(xiàn)這樣類(lèi)似的報(bào)錯(cuò)，所以需要確保代碼和插件都可以在 node 環(huán)境下正常運(yùn)行。因?yàn)檩啿ゲ寮旧硎侵С?ssr 模式的，所以修改完代碼后即可正常運(yùn)行。
最后，項(xiàng)目中共有四份 webpack 配置和兩個(gè)構(gòu)建腳本。在開(kāi)發(fā)環(huán)境下，搭配 webpack-dev-middleware 和 webpack-hot-middleware 來(lái)實(shí)現(xiàn)了代碼的熱加載。在生產(chǎn)環(huán)境構(gòu)建時(shí)，因?yàn)橄Ｍ芮逦吹藉e(cuò)誤和警告，也想對(duì)構(gòu)建耗時(shí)進(jìn)行統(tǒng)計(jì)，所以將構(gòu)建腳本拎出來(lái)。
build ├── build-production.js // 生產(chǎn)環(huán)境構(gòu)建腳本 ├── setup-dev-server.js // 開(kāi)發(fā)環(huán)境構(gòu)建腳本 ├── webpack.base.config.js // 基本配置 ├── webpack.client.config.js // 客戶(hù)端配置 ├── webpack.server.config.js // 服務(wù)端配置 └── webpack.test.config.js // 測(cè)試配置播放器
音樂(lè)播放是最主要的核心功能，底層就是使用 audio 標(biāo)簽，并且監(jiān)聽(tīng)了標(biāo)簽元素的 canplay、timeupdate、ended 事件來(lái)分別實(shí)現(xiàn)時(shí)長(zhǎng)計(jì)算、更新當(dāng)前播放進(jìn)度、下一首播放。
因?yàn)椴シ牌魇强梢灾С帧昂笈_(tái)”播放，所以將播放器放到根組件中并且設(shè)置隱藏，所以 dom 結(jié)構(gòu)如下：
組件數(shù)據(jù)同步是使用 vuex，比如播放的狀態(tài)、歌曲總時(shí)長(zhǎng)、當(dāng)前的播放進(jìn)度等，當(dāng)歌曲播放完畢時(shí)候需要播放下一首，這里使用的是 eventBus 來(lái)做事件觸發(fā)，它會(huì)比較適合這種類(lèi)似的場(chǎng)景。
當(dāng)用戶(hù)打開(kāi)播放頁(yè)面時(shí)，我希望音樂(lè)是能夠自動(dòng)播放的，無(wú)論用戶(hù)是從其他入口進(jìn)來(lái)亦或者是直接刷新的時(shí)候。自動(dòng)播放是通過(guò) play() 方法去觸發(fā)的，前者沒(méi)有問(wèn)題，但是后者在調(diào)用時(shí)就會(huì)提示錯(cuò)誤，錯(cuò)誤意思是需要用戶(hù)進(jìn)行手勢(shì)操作之后才能夠播放，然后嘗試了模擬點(diǎn)擊、靜音播放的方案之后發(fā)現(xiàn)在 chrome 內(nèi)依然無(wú)效，后來(lái)感覺(jué) chrome 這樣做是正確的，應(yīng)該把網(wǎng)站的控制權(quán)交給用戶(hù)，讓用戶(hù)清楚頁(yè)面到底發(fā)生了什么，而不是讓用戶(hù)在一堆標(biāo)簽頁(yè)里尋找是哪個(gè)頁(yè)面發(fā)出了奇怪的聲音。
更新從播放列表進(jìn)入播放頁(yè)后才會(huì)自動(dòng)播放，感謝小伙伴提供解決方案單元測(cè)試
單元測(cè)試也是早期規(guī)劃的功能之一，開(kāi)始是參考一些開(kāi)源項(xiàng)目來(lái)搭建，最終選型是 karma + mocha + sinon-chai （官方 demo）。搭建的過(guò)程就是摸著石頭過(guò)河了，其中也經(jīng)歷了一些報(bào)錯(cuò)，比如：安裝依賴(lài)失敗、配置文件出錯(cuò)、缺少依賴(lài)插件等等，然后接近搭建完成后才發(fā)現(xiàn)還有官方文檔。不得不說(shuō)是， cli 的確幫開(kāi)發(fā)者節(jié)省了非常多配置、搭建的工作，搭建完成之后就可以根據(jù)官方文檔來(lái)編寫(xiě)用例了，根據(jù)官方文檔內(nèi)例子已經(jīng)可以覆蓋到絕大部分場(chǎng)景，比如模擬瀏覽器渲染、用戶(hù)點(diǎn)擊等等。但同時(shí)也發(fā)現(xiàn)一個(gè)問(wèn)題，如果項(xiàng)目代碼經(jīng)常發(fā)生變更的話(huà)，那么之前的測(cè)試用例也可能需要重新編寫(xiě)了，想知道大家在項(xiàng)目中是怎么處理或者怎么看待呢？
以上是在開(kāi)發(fā)過(guò)程中遇到一小部分問(wèn)題，還有過(guò)程當(dāng)中大部分問(wèn)題描述和解決方案就不在這里一一展開(kāi)去講了，大家如果有問(wèn)題的地方，歡迎大家私信或者郵件與我交流。
總結(jié)
- 在項(xiàng)目的開(kāi)發(fā)過(guò)程中也參考和使用了很多優(yōu)秀的開(kāi)源項(xiàng)目，幫助我快速消化一些功能實(shí)現(xiàn)，還有提供了后端 api，不然也沒(méi)有開(kāi)發(fā)這個(gè)項(xiàng)目的靈感；
- Vue 生態(tài)下有豐富、詳細(xì)的官方文檔和活躍的社區(qū)，基本上遇到的問(wèn)題都能夠解決，超贊；
- 項(xiàng)目在立項(xiàng)之初可能只是大腦一閃而過(guò)的簡(jiǎn)單想法，再回顧這幾個(gè)月開(kāi)發(fā)經(jīng)歷，其實(shí)過(guò)得是比較充實(shí)和富有激情的，就是有點(diǎn)費(fèi)頭發(fā) ?；
- 最后，自知項(xiàng)目中還有很多不足的地方，如果您發(fā)現(xiàn)有什么問(wèn)題或者有更好的想法，歡迎 issue 或者 pr。如果您覺(jué)得項(xiàng)目有參考和學(xué)習(xí)的價(jià)值，可以在 github 上點(diǎn)個(gè) star，謝謝~
參考資料
NeteaseCloudMusicApi
vue-awesome-swiper
use nginx to add Domain to a Set-Cookie
Cookies on localhost with explicit domain
mini-css-extract-plugin with SSR
Autoplay Policy Changes
總結(jié)
以上是生活随笔為你收集整理的全新版本仿网易云音乐来啦的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [UOJ422]小Z的礼物
- 下一篇： 【Linux系统编程】快速查找errno