vue仿163musicPC端
来源:互联网 发布:thinkphp mysql pdo 编辑:程序博客网 时间:2024/05/22 01:58
前言
vue2越来越受欢迎,无奈现在在公司做的平台是以ng1.x为主,一直没有机会练手vue2,虽然写过一些小demo,但是与完整的项目相比较中间会少很多东西。于是趁在公司空闲的时候以及周末双休,自己用vue2复写了163musicPC端。相比较之掘金上大大写的很多都是纯静态页面vue2,实际开发中肯定会涉及到接口、数据渲染方面,本项目接口通过http-proxy-middleware
, 一个http代理的中间件,进行http请求转发,实现跨域请求,直接复用网易爸爸的接口,在服务端对返回的JSON进行解构即可。
介绍
vue-163-music(网易云音乐web版),用vue仿写163音乐客户端版。
原计划仿写完所有页面,碍于网易的接口API有限,实现页面也有限。
不推荐手机端访问。
页面高度为670px
,1366 X 768
分辨率及其以下按F11全屏浏览效果更佳
Github项目地址:https://github.com/ShanaMaid/vue-163-music
欢迎issue
,pr
,star
or follow
!我将继续开源更多有趣的项目
在线版
点击进入 http://www.shanamaid.top:3000/
腾讯学生云主机,最低配,存在卡顿,建议clone到本地进行体验
使用
1234567891011121314151617
git clone https://github.com/ShanaMaid/vue-163-music.gitcd vue-163-musicnpm install# 开发环境npm run dev访问 http://localhost:8080/# 打包npm run build# 实际环境cd servernode app.js访问 http://localhost:3000/
效果截图
工具&技能
vue
+ vuex
+ vue-router
+ vue-resource
express
http-proxy-middleware
一个http代理的中间件,进行http请求转发,实现跨域请求
store.js
一个非常棒的处理localStorage
的轮子,原生localStorage
只支持存储字符串类型,轮子进行封装后可以直接存储Array
、Object
、function
、Set
等类型
animate.css
css动画库
vue-slider-component
滑块组件
postman
接口测试工具
实现功能
发现音乐
- 个性推荐(推荐歌单中除每日歌曲推荐外,其余歌单可点击进入)
播放音乐
- 上一曲
- 播放
- 暂停
- 下一曲
- 进度控制
- 音量控制
音乐搜索
输入搜索关键词,回车键
搜索,或者点击放大镜
图标
- 单曲(单击或双击歌曲添加至音乐播放列表,部分音乐会存在版权问题无法播放)
- 歌手
- 专辑
- MV
- 歌单(左键点击进入歌单列表)
- 主播电台 (单期节目部分单击或双击歌曲添加至音乐播放列表,目前不存在版权问题)
- 用户
歌单
- 播放全部
播放列表
- 切歌(单击切歌)
- 删歌(鼠标悬浮在要删除的歌曲上,点击右侧小X)
- 清空播放列表
- 本地缓存播放列表
一些问题
通过api接口获取的mv播放量基本不准,尚未找到原因,其余类型的播放量准确
目录结构
12345678910111213141516171819
||—— 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
中添加下列配置即可
123456789
proxyTable: {'/api': {target: 'http://music.163.com',changeOrigin: true,headers: {Referer: 'http://music.163.com/'}}}
实际环境中,服务器端配置
123456789101112131415161718
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/
目录下,比如对单曲搜索结果进行解构
123456789101112131415161718192021222324
single: (data) => {let list = []let count = data.result.songCountif (count === 0) {return {list, count}}for (let item of data.result.songs) {let singer = ''let {name,mp3Url,duration,id,album: {name: albumName}} = itemfor (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
哦!
- vue仿163musicPC端
- vue仿163musicPC端
- vue仿PC端163music图片滚动组件
- vue仿PC端163music图片滚动组件
- Vue小Demo,仿lofter移动端
- Vue 仿百度搜索
- 用Vue高仿qq音乐官网-pc端
- 用Vue高仿qq音乐官网-pc端
- vue.js仿简易搜索
- Vue.js 仿 Select 下拉框
- 二五、vue仿百度搜索框
- 视频学习Vue-仿APP学习笔记
- vue 简单仿写百度搜索
- 使用vue.js仿一个链家
- Vue高仿《one·一个》app
- vue-仿手机qq的demo
- Vue之仿百度搜索框
- 仿写简单的vue虚拟dom
- mail,postfix,postpix+mariadb,dovecot,dovecot+mariadb,postfix空壳邮件
- PHP 时间 日期
- C语言-数据结构-图的遍历
- Fréchet distance
- 判断radio是否有选中获取选中的值
- vue仿163musicPC端
- 离散题目12
- vue仿PC端163music图片滚动组件
- hibernate的对象三种状态说明
- Spring MVC @PathVariable注解
- 【重要更新】世界级版本控制工具Vault v10.0发布,多项功能改进|附下载
- Reactor模式详解
- Git托管项目搭建第一步
- 离散题目13