moeyy

Online preview http://140.143.128.100:3000#

?Preface#

With continuous learning of 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 terminals is increasing. The project is implemented through Vue writing, fully borrowing the UI design and functional implementation of the Netease Cloud Music mobile terminal, and strives to achieve a realistic effect. I started working on it a few days ago, and it can be used reluctantly until today.

This project is conceived and written independently by individuals.

Note: This project is purely personal messing around. Please choose the official Netease Cloud Music client for normal use.

?Project Goal#

Fully implement the functions of the mobile terminal Netease Cloud Music

The project is still being written and improved.

?How to run#

Node version [10.15.3]

✨ Development process#

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

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

Welcome star, welcome issue

?Project progress#

Last update (2019-12-8): Radio classification page started Recent update (2019-12-10): View user details

?Version update#

• Version information: 2.4.8-> 2.8.10
• Time: December 7, 2019
• Update content:
• Add pull-down refresh and light prompt on the discovery page
• Add anchor list on the radio ranking page
• Add 24-hour list in the program list on the radio ranking page
• Add premium list in the radio list on the radio ranking page
• Fix the bug that the login page cannot return
• Fix other known issues
• Optimize structure

If you have any questions or suggestions during use, please feel free to issue! This project is constantly improving, so please wait and see~

Technology stack#

?Main dependencies#

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

?Project demonstration#

demo address (Please preview in Chrome mobile mode)

?Target function#

• [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 recommendation
• [x] More new albums
• [x] Ranking list on the discovery page
• [x] Radio on the discovery page
• [x] Logout
• [x] Private FM on the discovery page
• [x] Search function
• [x] Search result display
• [x] Hot search list
• [x] Search history
• [x] Search recommendation
• [x] Singer classification
• [x] Playback function (small 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, delete comments
• [x] Radio program comments
• [x] Video comments
• [x] User related
• [ ] Page scroll loading
• [ ] Left and right slide switch
• [ ] Page transition animation
• [ ] Login status judgment
• [ ] Comprehensive optimization & repair

?Partial screenshots#

Side 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 related api addresses
 +-- index.js // Request related api methods
+-- assets
 +-- styles
 +-- border.css // Mobile 1px border
 +-- global.less // Global application style
 +-- reset.css // Reset style
 +-- resetEleUI.less // Modify elementUI component style
 +-- utils // Global methods to be used
 +-- getPhone // Get phone number
 +-- modalScroll // Handle mobile scroll bar
 +-- Bus.js // Bus
 +-- Mixins.js // Mixin
+-- base // Store common small components of the page
+-- albumPage // Playlist display page component
+-- songListPage // Display song list
+-- alert // Prompt message
+-- audioAllTitle // Play all title row
+-- button // Login page button
+-- djSublistCard // Long card component similar to my radio page
+-- generalNav // Title row at the top of the general page
+-- icon // Icon display
+-- idxCard // Official ranking list
+-- imgCard // Playlist image card
+-- interchangeable // Used to display search display page items other than singles
+-- loading // Loading
+-- pageErrorInfo // Error reminder
+-- pageErrorLoading // Page loading
+-- searchInput // Search box
+-- slider // Playlist slider
+-- sliderNav // Slide title
+-- song // Song item
+-- titleFooter // Common header and footer of the comprehensive page of the search display page
+-- getInfos // Get some static information
+-- getData // Get static information method
+-- icon // Store and access icon information
+-- pages // Project routing pages
+-- router // Routing 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 updated for a long time, and everyone is welcome to point out problems and learn together

Author#

? Lambda Original link: High imitation Netease Cloud Music mobile client