MusicHub -- 三合一(qq、xiami、网易云) 音乐搜索

每次去搜个歌，碰巧又不知道在哪个平台发布，这个时候是不是很烦，要去每个平台上搜一遍。前两天 周月半 发了新歌《不爱我就拉倒》，我前后找了两三个平台，最后发现是 QQ 音乐独家发布，更可气的是我没有 qq 音乐 app，orz.....

效果

点开看啦 MusicHub

简介

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