vue 仿 163musicPC 端项目 (支持歌曲搜索播放,列表记录保存等)

前言

vue2 越来越受欢迎,无奈现在在公司做的平台是以 ng1.x 为主,一直没有机会练手 vue2 ,虽然写过一些小 demo ,但是与完整的项目相比较中间会少很多东西。于是趁在公司空闲的时候以及周末双休,自己用 vue2 复写了 163musicPC 端。相比较之掘金上大大写的很多都是纯静态页面 vue2 ,实际开发中肯定会涉及到接口、数据渲染方面,本项目接口通过http-proxy-middleware, 一个 http 代理的中间件,进行 http 请求转发,实现跨域请求,直接复用网易爸爸的接口,在服务端对返回的 JSON 进行解构即可。

介绍

vue-163-music(网易云音乐 web 版),用 vue 仿写 163 音乐客户端版。

原计划仿写完所有页面,碍于网易的接口 API 有限,实现页面也有限。

不推荐手机端访问。

页面高度为670px1366 X 768分辨率及其以下按 F11 全屏浏览效果更佳

Github 项目地址:https://github.com/ShanaMaid/vue-163-music

欢迎issueprstar or follow!我将继续开源更多有趣的项目

在线版

点击进入 http://www.shanamaid.top:3000/

腾讯学生云主机,最低配,存在卡顿,建议 clone 到本地进行体验

使用

git clone https://github.com/ShanaMaid/vue-163-music.git

cd vue-163-music

npm install 

# 开发环境
npm run dev
访问 http://localhost:8080/

# 打包
npm run build

# 实际环境
cd server
node app.js
访问 http://localhost:3000/

效果截图

https://github.com/ShanaMaid/vue-163-music/tree/master/screenshot

工具&技能

vue + vuexvue-router + vue-resource

express

http-proxy-middleware 一个 http 代理的中间件,进行 http 请求转发,实现跨域请求

store.js 一个非常棒的处理localStorage的轮子,原生localStorage只支持存储字符串类型,轮子进行封装后可以直接存储ArrayObjectfunctionSet等类型

animate.css css 动画库

vue-slider-component 滑块组件

postman 接口测试工具

实现功能

发现音乐

  • 个性推荐(推荐歌单中除每日歌曲推荐外,其余歌单可点击进入)

播放音乐

  • 上一曲
  • 播放
  • 暂停
  • 下一曲
  • 进度控制
  • 音量控制

音乐搜索

输入搜索关键词,回车键搜索,或者点击放大镜图标

  • 单曲(单击或双击歌曲添加至音乐播放列表,部分音乐会存在版权问题无法播放)
  • 歌手
  • 专辑
  • MV
  • 歌单(左键点击进入歌单列表)
  • 主播电台 (单期节目部分单击或双击歌曲添加至音乐播放列表,目前不存在版权问题)
  • 用户

歌单

  • 播放全部

播放列表

  • 切歌(单击切歌)
  • 删歌(鼠标悬浮在要删除的歌曲上,点击右侧小 X)
  • 清空播放列表
  • 本地缓存播放列表

一些问题

通过 api 接口获取的 mv 播放量基本不准,尚未找到原因,其余类型的播放量准确

目录结构

|
|—— build 
|—— config
|—— server 服务端
| |—— app.js 服务端启动入口文件
| |—— static 打包后的资源文件
| |__ index.html 网页入口
|
|—— src 资源文件
| |—— assets 组件静态资源库
| |—— components 组件库
| |—— deal  163api 返回的 JSON 字符串解构
| |—— filters 自定义过滤器
| |—— router 路由配置
| |—— store vuex 状态管理
| |—— App.vue 163SPA
| |__ main.js SPA 入口
|
|__ static 静态资源目录

一些注意事项

项目中使用了网易爸爸的接口,需要使用http-proxy-middleware进行转发,开发环境下需要在config/index.js中的dev中添加下列配置即可

proxyTable: {
  '/api': {
      target: 'http://music.163.com',
      changeOrigin: true,
      headers: {
          Referer: 'http://music.163.com/'
      }
  }
}

实际环境中,服务器端配置

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();
app.use('/static', express.static('static'));
app.use('/api', proxy({
  target: 'http://music.163.com', 
  changeOrigin: true, 
  headers: {
    Referer: 'http://music.163.com/'
  }
}
));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});
app.listen(3000);

对返回的数据解构js文件位于src/components/deal/目录下,比如对单曲搜索结果进行解构

single: (data) => {
  let list = []
  let count = data.result.songCount
  if (count === 0) {
    return {list, count}
  }
  for (let item of data.result.songs) {
    let singer = ''
    let {
      name,
      mp3Url,
      duration,
      id,
      album: {
        name: albumName
      }
    } = item
    for (let item of item.artists) {
      singer += item.name + ' '
    }
    list.push({name, mp3Url, duration, id, albumName, singer})
  }
  return {list, count}
}

vuex状态管理位于src/components/store目录下

vue-router路由配置管理位于src/components/router目录下

自定义过滤器位于src/components/filters/目录下

网易云音乐接口来源于http://moonlib.com/606.html

Github 项目地址:https://github.com/ShanaMaid/vue-163-music

总结

本项目的实际意义在于熟悉 vue 生态链以及 ES6 语法,同时思考如何用 vue 构建实现一个完整的项目。

最后的感觉 vue2 在开发中带来的体验确实很棒, vue2 能如此之火自然有它的道理。

如果觉得本项目不错的话,别忘记star哦!

转载于:https://my.oschina.net/u/3376646/blog/864106

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值