MusicHub -- 三合一(qq、xiami、網易云) 音樂搜索

codecook 發布于2019-08-22 17:25 / 3955人閱讀

摘要：前兩天周月半發了新歌不愛我就拉倒，我前后找了兩三個平臺，最后發現是音樂獨家發布，更可氣的是我沒有音樂，一個多合一搜索很重要效果簡介，三合一搜索平臺，數據來源網易云蝦米。

每次去搜個歌，碰巧又不知道在哪個平臺發布，這個時候是不是很煩，要去每個平臺上搜一遍。前兩天 周月半 發了新歌《不愛我就拉倒》，我前后找了兩三個平臺，最后發現是QQ音樂獨家發布，更可氣的是我沒有qq音樂app，orz.....  一個多合一搜索很重要！

效果

簡介

MusicHub ，三合一搜索平臺，數據來源：網易云、QQ、蝦米。
Demo地址：MusicHub

git

MusicHub 記得給star啊朋友們

工程結構

-- musichub
    -- App
        -- build   => webpack配置文件
        -- config  => 工程配置文件
        -- src     => 前端源文件目錄
        -- static  => 靜態資源文件目錄
        -- index.html  => htmlwebpackplugin 模板文件
        -- package.json  =>  依賴文件
    -- Server
        -- config  => 工程配置文件
        -- router  => 路由
        -- service => server服務
        -- spider  => 爬蟲
        -- static  => 靜態資源
        -- view    => 頁面html文件
        -- package.json   => 依賴文件

技術棧

前端(App)

vue + vue-router + webpack

瀏覽器兼容：利用兩套代碼做了PC、mobile兼容，PC端用了Element組件、Mobile端用了cube-ui 組件

代碼風格檢查：Eslint + airbnbbase

服務端(Server)

Koa：利用koa搭建了RESTful API服務器

request： spider使用request請求數據

服務端渲染：解析UserAgent，判斷當前設備類型：PC/Mobile，根據設備類型渲染對應頁面

快速使用

前端(App)
? ?- 安裝依賴：yarn (建議使用yarn安裝依賴，依賴里有一個git倉庫(對cube-ui做了修改)，npm 5.5.1 會報錯

開發模式運行: yarn run dev (需要將 App/src/view/desktop/components/Result.vue和App/src/view/desktop/components/Result.vue中 axios.defaults.baseURL 設置為 "http://localhost:3000/api/v1"

打包：yarn run build，打包生成html文件將會在Server/view目錄下，其他文件(css、js等)會在Server/static文件夾下(需要將 App/src/view/desktop/components/Result.vue和App/src/view/desktop/components/Result.vue中 axios.defaults.baseURL 設置為 "/api/v1"

服務端(Server)

修改端口：修改Server/config/index.js中port

開發者模式運行：yarn run dev

product模式：yarn run prod

GPU云服務器云服務器網易云音樂網易云音樂解析網易云音樂下載網易云音樂在線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95147.html

vue——一個頁面實現音樂播放器

摘要：用做進度條本身的樣式很難看，并且不同的瀏覽器呈現出來的效果也不一樣。背景濾鏡模糊將圖片設置為背景的感覺很棒，可以說整個播放器的顏值這背景提供了一半。正確寫法錯誤寫法待優化手動修改進度，偶爾會不生效。請忽略下面這段文字年關將至，時間好歹又多出了些許。卻不敢過度消遣。歲月未曾饒過我，我亦不想饒過歲月。且將它塞得膨脹，讓這一年看似加更充實。不曾料想我一個愛些風花雪月、研墨行歌之人，卻做起...

Java3y 2019-08-01 18:25 評論0 收藏0
vue——一個頁面實現音樂播放器

摘要：用做進度條本身的樣式很難看，并且不同的瀏覽器呈現出來的效果也不一樣。背景濾鏡模糊將圖片設置為背景的感覺很棒，可以說整個播放器的顏值這背景提供了一半。正確寫法錯誤寫法待優化手動修改進度，偶爾會不生效。請忽略下面這段文字年關將至，時間好歹又多出了些許。卻不敢過度消遣。歲月未曾饒過我，我亦不想饒過歲月。且將它塞得膨脹，讓這一年看似加更充實。不曾料想我一個愛些風花雪月、研墨行歌之人，卻做起...

Richard_Gao 2019-08-22 13:57 評論0 收藏0
vue——一個頁面實現音樂播放器

摘要：用做進度條本身的樣式很難看，并且不同的瀏覽器呈現出來的效果也不一樣。背景濾鏡模糊將圖片設置為背景的感覺很棒，可以說整個播放器的顏值這背景提供了一半。正確寫法錯誤寫法待優化手動修改進度，偶爾會不生效。請忽略下面這段文字年關將至，時間好歹又多出了些許。卻不敢過度消遣。歲月未曾饒過我，我亦不想饒過歲月。且將它塞得膨脹，讓這一年看似加更充實。不曾料想我一個愛些風花雪月、研墨行歌之人，卻做起...

genedna 2019-08-29 14:17 評論0 收藏0
selenium實戰-同步網易云音樂歌單到qq音樂

摘要：對于這次的爬蟲來說，由于網易云音樂以及音樂網頁中大部分元素都是使用渲染生成的，因此選擇使用來完成這次的腳本。可以發現網易云音樂的手機版歌單地址是。現在已經支持網易云音樂與音樂歌單的互相同步。本文主要介紹selenium在爬蟲腳本的實際應用。適合剛接觸python，沒使用過selenium的童鞋。(如果你是老司機路過的話，幫忙點個star吧) 項目地址 https://github.c...

dailybird 2019-07-25 12:01 評論0 收藏0