Vue3.0 Netease cloud music and introduction case

Time:2022-7-6

preface

I made a few small cases when I studied vue3.0 before, and I have found several cases recently, thinking of putting what I did before and what I do now together, so I set up a vue3 project during my break. The data used in this project is written on the page, and the music player data is obtained by calling the Netease cloud API.

Target function
[√] mobile phone and email login
[√] change password
[√] my song list information
[√] recently played
[√] search function
[√] display of search results
[√] find page song list
[√] discovery page ranking
[√] like music (get users’ favorite music)
[x] Do you like the song
[√] lyrics
[√] relevant comments
[x] Comment and like (at present, only the number of comment and like is obtained, and there is no such function)
[√] song MV playback
[√] sign in
[√] registration
[√] singer classification

The login page originally wanted to do a slider verification, but the Vue monoplasty slide verify plug-in used by vue2 doesn’t seem to support vue3, so this one hasn’t been done yet. The login calls the Netease cloud login interface. At present, only the mobile number and email login are done. The QR code login interface has not returned data for the time being
The function of the movie hall has not been done yet. The API of Douban is no longer available. We will do this part when we find other APIs.

Partial screenshot

1. Landing page

Vue3.0 Netease cloud music and introduction case

2. Homepage

Vue3.0 Netease cloud music and introduction case

3. Change password

Vue3.0 Netease cloud music and introduction case

4. Recommendation page

Vue3.0 Netease cloud music and introduction case

5. Historical song list

Vue3.0 Netease cloud music and introduction case

6. Song MV playback

Vue3.0 Netease cloud music and introduction case

Starting steps
Check the source code and clickView source code Welcome star, welcome issue
npm install
npm run dev

In the later stage, I will encounter pits, learn new knowledge, new methods, etc. in the development process of blog update project. Welcome to pay attention

This project will be updated for a long time. You are welcome to point out problems and learn together
I hope it will be helpful and enlightening to you after reading this article. If there are deficiencies, welcome to criticize, correct and exchange!

I’ve worked hard for a long time. I hope you can manually praise and encourage me~

Recommended Today

Start with Hotspot source code from Thread.start

native start0 is traced to the hotspot source code private void native start0(); The principle of native is to call JNI, and the convention of Hotspot source code is, usually one Xxx.java corresponds to one Xxx.c, Here are three examples: Java class Path relative to the OpenJDK source java.lang.Thread jdk/src/share/native/java/lang/Thread.c java.lang.String jdk/src/share/native/java/lang/String.c java.lang.System jdk/src/share/native/java/lang/System.c So […]