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

每次去搜個歌，碰巧又不知道在哪一個平臺發佈，這個時候是否是很煩，要去每一個平臺上搜一遍。前兩天 周月半 發了新歌《不愛我就拉倒》，我先後找了兩三個平臺，最後發現是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