Build a Full‑Stack Music Streaming Site with Vue, Spring Boot, and MySQL – Step‑by‑Step Guide

During a month of home isolation, the author discovered an open‑source music website project called music-website on GitHub, built with a Vue front end and a Spring Boot + MyBatis back end, using MySQL for data storage.

The client and admin interfaces are implemented with Vue, while the server side runs on Spring Boot with MyBatis. Front‑end dependencies include TypeScript, Vue‑Router, Vuex, Axios, ElementPlus, and Echarts.

Implemented features:

Music playback

User login and registration

User profile editing and avatar upload

Song and playlist search

Playlist rating

Comments on playlists and songs

Paginated display of playlists and artists

Synchronized lyric display

Music collection, download, drag control, and volume control

Admin management of users, songs, artists, and playlists

To quickly start the project:

1. Clone the repository locally and locate the music-server folder, which contains the required music files and images.

2. Create a MySQL database and import the tp_music.sql script from music-website/music-server/sql. Update the database username and password in

music-website/music-server/src/main/resources/application.properties

(modify spring.datasource.username and spring.datasource.password).

3. Start the back‑end server:

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

// Method 2 (requires Maven installed)
mvn spring-boot:run

4. Launch the front‑end client:

npm install   // install dependencies
npm run serve // start the client

5. Launch the admin interface:

npm install   // install dependencies
npm run serve // start the admin panel

After these steps, the music website is ready to use.