Giter VIP home page Giter VIP logo

vue-music-player's Introduction

Vue.js音乐播放器2.0升级版

之前初学Vue做了一个音乐播放器,受到不少人的喜欢。现在升级版来了!功能更强,技术栈更多。

源代码

源代码地址:👉 GitHub 欢迎大家star和follow😄

预览

在线预览

在线预览地址:👉 Vue音乐播放器

预览图

Vue音乐播放器升级版 - microzz.com

更多预览图请看👉 更多

技术栈

Vue2:采用最新Vue2的语法😁

Vuex:实现不同组件之间的状态共享✌️

vue-router:单页应用路由管理必备😎

axios:发起http请求😉

SASS(SCSS):css预处理语言💪

Express(上线版本是Koa2):因为vue-cli是用的Express做服务器,所以开源的开发版本是Express,自己生产环境用的是Koa2。 😜

Webpack:自动化构建工具,大部分配置vue-cli脚手架已经弄好了,很方便。😏

ES6:采用ES6语法,这是趋势。👏

localStorage(HTML5):本地存储,保存用户个性化设置。😊

CSS3:CSS3动画及样式。👍

使用 Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

遇到的问题

  1. vuex什么时候使用,如何使用,就要看项目需要。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

各组件之间状态共享也是难点。

  1. 异步编程:JS是单线程,异步编程尤为重要。当我们向后端请求数据,是异步的,如果没有处理好相关的异步操作,是会有各种问题的。JS可以利用setTimeout回调GeneratorPromiseAsync。 定时这种方式太麻烦,还是不推荐;回调层次多了,有回调地狱,代码维护性很差;Generator需要手动去执行,当然可以使用类似co的模块。相比之下PromiseAsync是比较理想的。(详看👉Promise对象异步操作和Async函数)
  2. 本项目中使用了QQ音乐和One(一个)的接口,后端API编写也是难点,包含了各种异步请求。对返回数据的解析也是难点,有的时候你还需要对数据进行解码。
  3. 各组件结构的设计:一开始大纲没设计好,后面想修改涉及面会很广。
  4. 过渡动画让交互更有趣,但是有的还是耗性能的,有设备差异,没用好会造成卡顿。

【声明】:本项目仅供学习交流,请不要用做任何商业用途😊有任何疑问请联系作者📩[email protected]

About

源代码地址:👉 GitHub

个人网站:🔗microzz-IT技术分享

GitHub:🔗microzz

vue-music-player's People

Contributors

microzz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-music-player's Issues

关于首次加载的一些小问题

你好,我是一个自学前端的菜鸟,在学习您这个项目的时候遇到了一些小问题,
1.清除localStorage和sessionStorage之后 ,刷新页面,mini播放器 在不停的循环显示歌曲列表的信息,
2.此时 点击歌曲列表,也不能正常播放。歌曲时间显示NaN 。是不是默认写死的music-data.json失效的原因呢?
end

关于axios 疑问

疑问: 1.百度到有的文章说,axios 没有install,所以vue不能use。2.你的项目中我看到vue-axios 这个和axios 有什么区别呢? 3.另外你的写法 Vue.axios.get() post的话,是不是要配置呢?请大神帮我解答下

Vue.axios 的具体是怎么实现的

在网上看了一下Vue.axios教程,为什么this.axios.get('/api/hot')就可以获得返回,不用设置baseURL吗?

this.axios.defaults.baseURL = 'http://music.qq.com/musicbox/shop/v3/data/hit';
this.axios.get('/hit_newsong.js')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

没看懂axios,写了一下,可以获得返回但是提示存在跨域问题。不懂axios在这个项目怎么访问接口

请教下歌曲切换时缓存问题?

发现你的播放器在每次歌曲切换到新的歌曲时 如果是已经播放过的歌曲 会直接调用缓存返回206 Partial Content (from disk cache) 很好奇这个是怎么实现的?看缓存的返回头部似乎就少了一个Connection?我目前在写一个播放器 但切换时总是重新请求 很费流量 项目是放在githubpage上的 歌曲就在github上 因此有什么办法能从前端实现缓存吗?或者调虾米的api?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.