Music Website Project Tutorial: Vue.js Frontend and Spring Boot Backend

Today we recommend a nice music website project, with a Vue.js based front‑end and a Spring Boot + MyBatis back‑end, storing data in MySQL.

The system provides basic music site features such as online playback, user management, song library, playlists, singer info, lyrics display, and an admin console.

Deployment steps

1. Clone the repository:

git clone https://github.com/Yin-Hongwei/music-website.git

2. Download static resources (song files and covers) from the provided Baidu Cloud link and place them in the music-server directory.

https://pan.baidu.com/s/1Qv0ohAIPeTthPK_CDwpfWg  (extraction code: gwa4)

3. Import the database schema tp_music.sql located in music-server/sql into MySQL.

4. Modify the back‑end configuration files to set the correct datasource username/password and resource paths.

5. Start the services:

Backend:

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

Frontend (music‑client):

npm install
npm run dev

Admin console (music‑manage):

npm install
npm run dev

All three projects are independent; the back‑end must run first, then the front‑end or admin UI can be launched as needed.

After deployment, the site can be accessed to browse and play music, manage users, and administer content.