Build a Full-Stack Music Streaming App with Spring Boot and Vue 3 – Step-by-Step Guide

1. System Overview

This project has two roles: administrator and regular user.

Administrator functions:

Backend management of users, songs, singers, and playlists.

User functions:

Music playback

User login and registration

User profile editing and avatar change

Playlist rating

Playlist and song comments

Paginated display of playlists and singers

Synchronized lyric display

Music collection, drag control, volume control

2. Technology Stack

Backend:

Spring Boot

MyBatis

MySQL

Redis

Frontend:

Vue 3.0 + TypeScript + Vue-Router + Vuex + Axios + ElementPlus + ECharts

3. Environment

Development environment: IDEA/Eclipse, JDK 1.8, MySQL 5.7+, Node.js, Maven.

All source code runs without issues.

4. Project Demo

5. Access URLs

Frontend: http://localhost:8080/

User account/password: Yin/123

Backend: http://localhost:8081/

Administrator account/password: admin/123456

6. Installation Guide

1. Download project

2. Download resources

Place the song and image files from the data folder into the music-server directory.

Note: Resources are organized as shown in the screenshots.

3. Modify configuration

1) Create the database and import tp_music.sql located in music-website/music-server/sql.

2) Edit application.properties to set spring.datasource.username and spring.datasource.password.

4. Start the project

Start backend server : go to the music-server folder and run:

// Method 1
./mvnw spring-boot:run

// Method 2
mvn spring-boot:run // Maven must be installed

Start frontend client : go to the music-client directory and run:

npm install // install dependencies

npm run serve // start frontend project

Start management UI : go to the music-manage directory and run:

npm install // install dependencies

npm run serve // start admin UI

Source Code Acquisition

How to get the source code?

Scan the QR code below and reply with “音乐” to receive the full system.

Or click the public account link to add directly.