moeyy

Online Preview http://140.143.128.100:3000#

?Preface#

As I continue to learn Vue, I need to do a small project to learn more knowledge through the implementation process. With the increasing demand for music among people today, the usage of mobile devices has also increased. This project is implemented using Vue and fully utilizes the UI design and functionality of the NetEase Cloud Music mobile client, striving to achieve a realistic effect. I started working on it a few days ago, and it is barely usable as of today.

This project is conceived and written independently by me.

Note: This project is purely for personal experimentation. For normal use, please choose the official NetEase Cloud Music client.

?Project Goals#

Fully implement the functionality of the NetEase Cloud Music mobile client

The project is still being developed and improved.

?How to Run#

Node version [10.15.3]

✨ Development Process#

# Clone
git clone https://github.com/powerdong/Music-player.git
# Open project directory
cd Music-player

cd musicPlayer
# Install dependencies
npm install
# Start local server to run the project
npm run dev

Welcome to star, welcome to issue

? Project Progress#

Last update (2019-12-8): Started working on the radio category page Latest update (2019-12-10): View user details

? Version Update#

• Version information: 2.4.8 -> 2.8.10
• Date: December 7, 2019
• Update content:
• Added pull-down refresh and light prompts to the discovery page
• Added top anchor list to the radio ranking page
• Added 24-hour list to the program list on the radio ranking page
• Added premium list to the radio ranking page
• Fixed bug where the login page could not be returned
• Fixed other known issues
• Optimized structure

If you have any questions or suggestions, please feel free to raise an issue! This project is constantly being improved, so stay tuned~

Technology Stack#

? Main Dependencies#

• Vue family (using Vue-cli as the build tool)
• WebPack4.0
• ES6
• Less
• ESLint
• Vant UI
• NetEase Cloud Music API

? Project Demo#

demo address (Please use Chrome mobile mode to preview)

? Target Features#

• [x] Mobile login and registration
• [x] Change password
• [x] My page playlist information
• [x] Add and delete playlists
• [x] Recently played
• [x] Heartbeat mode
• [x] My radio
• [x] My collection
• [x] Recommended playlists on the discovery page
• [x] New albums on the discovery page
• [x] New songs on the discovery page
• [x] Daily recommendations on the discovery page
• [x] Playlists on the discovery page
• [x] Video page
• [ ] Friends page
• [x] Playlist square
• [x] New song recommendations
• [x] More new albums
• [x] Ranking list on the discovery page
• [x] Radio on the discovery page
• [x] Log out
• [x] Private FM on the discovery page
• [x] Search function
• [x] Search result display
• [x] Hot search list
• [x] Search history
• [x] Search recommendations
• [x] Artist classification
• [x] Playback function (mini player progress bar)
• [x] Playlist
• [x] Add and delete playlists
• [x] Check-in
• [x] Like or dislike songs
• [x] Collect or uncollect albums
• [x] Playlist comments
• [x] Album comments
• [x] Like, send, and delete comments
• [x] Radio program comments
• [x] Video comments
• [x] User-related
• [ ] Page scroll loading
• [ ] Left and right swipe switching
• [ ] Page transition animation
• [ ] Login status judgment
• [ ] Comprehensive optimization and bug fixes

? Partial Screenshots#

Sidebar account center Playlist & Playlist details Ranking list & Ranking list information My page & Recently played Search display

? Project Layout#

.src
+-- api
 +-- config.js // Store and access relevant API addresses
 +-- index.js // Request related API methods
+-- assets
 +-- styles
 +-- border.css // Mobile 1px border
 +-- global.less // Global application styles
 +-- reset.css // Reset styles
 +-- resetEleUI.less // Modify elementUI component styles
 +-- utils // Global methods to be used
 +-- getPhone // Get phone number
 +-- modalScroll // Handle mobile scrollbars
 +-- Bus.js // Bus
 +-- Mixins.js // Mixins
+-- base // Store common small components for pages
+-- albumPage // Playlist display page component
+-- songListPage // Display song list
+-- alert // Message prompt
+-- audioAllTitle // Play all title row
+-- button // Login page button
+-- djSublistCard // Long card component similar to My Radio page
+-- generalNav // Common page title row
+-- icon // Icon display
+-- idxCard // Official ranking list
+-- imgCard // Playlist image card
+-- interchangeable // Used to display search results page items other than singles
+-- loading // Loading spinner
+-- pageErrorInfo // Error reminder
+-- pageErrorLoading // Page loading spinner
+-- searchInput // Search box
+-- slider // Playlist slider
+-- sliderNav // Slide title
+-- song // Song item
+-- titleFooter // Common header and footer for search display page
+-- getInfos // Get some static information
+-- getData // Get static information methods
+-- icon // Store and access icon information
+-- pages // Project routing pages
+-- router // Router configuration
+-- index
+-- store // Vuex configuration
+-- action // Root-level action
+-- getter // Root-level getter
+-- index // Assemble modules and export store
+-- mutation-types // Root-level mutation types
+-- mutation // Root-level mutation
+-- state // Root-level state

Packaging Log#

This project will be continuously updated. Please feel free to point out any issues and let's learn together.

Author#

? Lambda Original article link: High-fidelity NetEase Cloud Music Mobile Client