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