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

codecook 发布于2019-08-22 17:25 / 3533人阅读

摘要：前两天周月半发了新歌不爱我就拉倒，我前后找了两三个平台，最后发现是音乐独家发布，更可气的是我没有音乐，一个多合一搜索很重要效果简介，三合一搜索平台，数据来源网易云虾米。

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

专线服务服务器托管网易云音乐网易云音乐解析网易云音乐下载网易云音乐在线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95147.html

vue——一个页面实现音乐播放器

摘要：用做进度条本身的样式很难看，并且不同的浏览器呈现出来的效果也不一样。背景滤镜模糊将图片设置为背景的感觉很棒，可以说整个播放器的颜值这背景提供了一半。正确写法错误写法待优化手动修改进度，偶尔会不生效。请忽略下面这段文字年关将至，时间好歹又多出了些许。却不敢过度消遣。岁月未曾饶过我，我亦不想饶过岁月。且将它塞得膨胀，让这一年看似加更充实。不曾料想我一个爱些风花雪月、研墨行歌之人，却做起...

isaced 2019-08-05 12:49 评论0 收藏0
vue——一个页面实现音乐播放器

摘要：用做进度条本身的样式很难看，并且不同的浏览器呈现出来的效果也不一样。背景滤镜模糊将图片设置为背景的感觉很棒，可以说整个播放器的颜值这背景提供了一半。正确写法错误写法待优化手动修改进度，偶尔会不生效。请忽略下面这段文字年关将至，时间好歹又多出了些许。却不敢过度消遣。岁月未曾饶过我，我亦不想饶过岁月。且将它塞得膨胀，让这一年看似加更充实。不曾料想我一个爱些风花雪月、研墨行歌之人，却做起...

Java3y 2019-08-01 18:25 评论0 收藏0
vue——一个页面实现音乐播放器

摘要：用做进度条本身的样式很难看，并且不同的浏览器呈现出来的效果也不一样。背景滤镜模糊将图片设置为背景的感觉很棒，可以说整个播放器的颜值这背景提供了一半。正确写法错误写法待优化手动修改进度，偶尔会不生效。请忽略下面这段文字年关将至，时间好歹又多出了些许。却不敢过度消遣。岁月未曾饶过我，我亦不想饶过岁月。且将它塞得膨胀，让这一年看似加更充实。不曾料想我一个爱些风花雪月、研墨行歌之人，却做起...

Richard_Gao 2019-08-22 13:57 评论0 收藏0
vue——一个页面实现音乐播放器

摘要：用做进度条本身的样式很难看，并且不同的浏览器呈现出来的效果也不一样。背景滤镜模糊将图片设置为背景的感觉很棒，可以说整个播放器的颜值这背景提供了一半。正确写法错误写法待优化手动修改进度，偶尔会不生效。请忽略下面这段文字年关将至，时间好歹又多出了些许。却不敢过度消遣。岁月未曾饶过我，我亦不想饶过岁月。且将它塞得膨胀，让这一年看似加更充实。不曾料想我一个爱些风花雪月、研墨行歌之人，却做起...

genedna 2019-08-29 14:17 评论0 收藏0
selenium实战-同步网易云音乐歌单到qq音乐

摘要：对于这次的爬虫来说，由于网易云音乐以及音乐网页中大部分元素都是使用渲染生成的，因此选择使用来完成这次的脚本。可以发现网易云音乐的手机版歌单地址是。现在已经支持网易云音乐与音乐歌单的互相同步。本文主要介绍selenium在爬虫脚本的实际应用。适合刚接触python，没使用过selenium的童鞋。(如果你是老司机路过的话，帮忙点个star吧) 项目地址 https://github.c...

dailybird 2019-07-25 12:01 评论0 收藏0