MusicHub -- 三合一(qq、虾米、网易云) 音乐搜索
发布于 6 年前 作者 Spades-S 3762 次浏览 来自 分享

每次去搜个歌,碰巧又不知道在哪个平台发布,这个时候是不是很烦,要去每个平台上搜一遍。前两天 周月半 发了新歌《不爱我就拉倒》,我前后找了两三个平台,最后发现是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

效果

pc端效果: WX20180521-111906.png WX20180521-111959.pngWX20180521-112011.png 移动端效果: m-1.pngm-2.pngm-3.png

4 回复

有意思,资瓷

之前写过一个 客户端相关的 app, 也用的vue。 因为感觉自己有时候并不关注歌来自哪个平台,只要我搜,有结果并且能让我听就行了

回到顶部