Giter Club home page Giter Club logo

jessic's Introduction

Jessic

一款基于Vue的网易云音乐播放器

Languages:中文 | English

这是一个PC端的在线音乐播放器,后端数据取自网易云音乐。API接口来自:网易云音乐 API.

你可以看看Demo

界面

login.png

main.png

这个项目是我为了练习Vue而搭建的,前后花了两个星期。实现的功能不多,但也是比较复杂和关键的功能,包括歌曲播放、选歌、切换歌单等。 使用的技术栈:Vue, Vuex, Vue-router, elementUI, axios, sass。

其中Vuex是我第一次在项目中使用的。使用下来感觉不错,跟以前的开发思维很不同,感兴趣的同学可以多看看 store 的结构。

目前已知的bug有:

  1. 播放歌曲会抛出DOM异常,但不影响播放效果(后期会补上教程,先占坑)
  2. 切换歌单后,歌单渲染不好,但不影响播放
  3. 登录一定时间后会无法播放歌曲,我认为跟登录状态过期时间有关。需要刷新网页或者重新登录。
  4. 缺乏测试样本,导致大部分异常状况没有被处理
  5. 在Safari上无法播放歌曲。

后期展望:

  1. 可能会把api接口融合进项目里,可避免多部署一套API服务
  2. 可能会改写成SSR的架构
  3. 极有可能使用 Electron 包装成 App,从而在 Mac 或 Linux 上运行
  4. 后续会加入 搜索、歌词、歌曲的增删查改、MV等功能
  5. 可能会使用 Typescript 进行重构(2019.06.19-已经Typescript重写项目)

这个项目是我的个人项目。我会不断地更新,加入新的功能和优化。 Anyway, 这个项目是以练习为目的的,所以不可能做到十全十美。有兴趣的同学可以多交流交流。

前提

需要搭配api接口服务,直接clone我修改好的,运行即可

安装 setup

yarn

运行

yarn run serve

编译

yarn run build

jessic's People

Contributors

danielhuoo avatar

Stargazers

aimee avatar inine avatar

Watchers

James Cloos avatar  avatar

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.