每次去搜個歌,恰巧又不曉得在哪一個平台宣布,這個時刻是否是很煩,要去每一個平台上搜一遍。前两天 周月半 發了新歌《不愛我就拉倒》,我前後找了兩三個平台,末了發現是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