Vue NetEasy-music

Js + vuex + VUE-Router + VUE-AXIos + Better-Scroll + Scss + ES6 and so on to develop a mobile end music WebApp UI which refers to netease Cloud Music and its own revision.

Inspiration comes from my teacher Huang Yi’s VUE-Music course, but the teacher uses qq music interface, and this is the use of netease cloud music real interface. NeteaseCloudMusicApi provided by Binaryify.

Address: [vue-Neteasy-music]http://218.244.159.175/)

  • It is recommended to use mobile preview. The Chrome debug mode works better on the PC. If you cannot scroll after enabling the mobile debug mode, you need to manually refresh the page

preview

Recommendations, charts, artists

Playlist details, singer details

Player, playlist

Search page

The user center

Log in to register

Development purposes

By learning to develop a Vue bucket project, I will be more familiar with Vue and improve my ability to design, program and solve problems independently.

Technology stack

The front end

  • Vue: MVVM framework for building user interfaces
  • vue-router: a routing system for single-page applications, usedLazy Loading RoutesTechnology to optimize performance for asynchronous loading
  • vuex: Vue centralized state management, which is convenient when several components share some state
  • vue-lazyload: Realize lazy image loading, save user traffic, optimize page loading speed
  • better-scroll: plug-ins to solve the needs of various scrolling scenarios on the mobile terminal, making the mobile terminal sliding experience more smooth
  • SCSS: CSS precompiled processor
  • ES6: ECMAScript new generation syntax, modularity, destruct assignment, Promise, Class, etc are very useful

The background

  • Node.js: A local test server built using Express
  • vue-axios: used to request back-end API music data
  • NeteaseCloudMusicApi: netease Cloud Music NodeJS API, providing music data

Other tools

  • vue-cli: Vue scaffolding tool to build the initial project environment
  • eslint: code style checker
  • iconfont: Alibaba icon library
  • fastclick: Eliminates 300ms delay for click mobile viewer

Realize the function

Player kernel, recommendation page, hot list page, singer page, song list details, singer details, list details, search page, playlist, user center, login registration and other functions.

Recommended page

The recommendation page is divided into three parts, namely, the banner rotation chart, a row of Icon (not fully realized) recommended song list and recommended song list. The data are obtained by using AXIos request API, and the pictures are lazy loading by vue-Lazyload.

Rotation diagram: Use better Scroll to implement, see Slide here.

Recommended playlists, recommended songs: Use VUEX to manage data and facilitate data interaction between components (players play songs). Because of the number of plays in the data, so incidentally added.

Leaderboard page

We also get the data of the ranking through API, but because API gets the data of all songs in the ranking, it is inevitable that the loading speed is a little slow. We will see if we can optimize it later. After all, the slow loading will affect the user experience, and nothing else.

Singer page

Realize the left and right linkage of the singer list

Songlist component

Used to display the list of songs, in many places have been reused, such as: playlist details page, chart details page, artist details page, search results and so on.

Playlist details page, chart details, artist details

Get the song data in the playlist using the playlist ID. These three are using the same component, and you can select different list styles based on the props passed in

player

Functions: sequence play, single cycle, random play, collection, etc.

Play, pause using HTML5 audio implementation.

Vuex is used to manage data, playback status, playback history, custom songs and other aspects. Because there is too much data, direct transmission of components will kill people, so it is better to use Vuex honestly, the transmission of data before is really convenient.

ICONS use Iconfont Alibaba icon library, the middle of the record rotation animation using animation.

The lyric data of netease was obtained in the lyric part, and then processed by the third-party library Lyric-Parser. Display lyrics, drag the progress bar lyrics synchronous scrolling, lyrics follow the progress of the song highlight.

Use localStorage to store favorite songs and play historical data.

The playlist

Displays and manages the current playing songs, which can be used to delete songs from the list and select songs to play.

The search function

Functions: search singer, song list, song, hot search, data throttling, pull up refresh, save search records.

Search data is obtained through keyword request API to display artists, playlists and songs.

To achieve the refresh, because the search can set the number of requested data, so can be used to achieve the refresh function.

Data throttling is implemented through throttling functions, and search data is stored through localStorage.

The user center

Call the interface to obtain the song list, personal information and other information of the login user, and more functions will be added later

TODO

  1. Home page day push a series of functions
  2. Optimizing duplicate code
  3. Playlist operation, add favorites and so on
  4. Add radio functions

Build Setup

After the code is downloaded locally, you need to run the NetEasy interface.

# install dependencies
npm install

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

# build for production with minification
npm run build
Copy the code