Build a Full‑Stack Music Website with Vue 3 and Spring Boot – Step‑by‑Step Guide

Project Overview

The music website’s client and admin panels are built with Vue, while the server uses Spring Boot + MyBatis and MySQL.

Implementation details are available at https://yin-hongwei.github.io/2019/03/04/music/.

Project start instructions and source code are at the end of the article.

Project Preview

1. Front‑end screenshots

Project Features

Music playback

User login and registration

User profile editing and avatar change

Song and playlist search

Playlist rating

Playlist and song comments

Paginated display of playlists and artists

Lyric synchronization

Music collection, download, drag control, volume control

Admin management of users, songs, artists, and playlists

Technology Stack

1. Backend

SpringBoot + MyBatis

2. Frontend

Vue 3.0 + TypeScript + Vue‑Router + Vuex + Axios + ElementPlus + Echarts

Development Environment

JDK: jdk-8u141

MySQL: mysql-5.7.21‑1‑macos10.13‑x86_64 (or newer)

Node: v14.17.3

IDE: IntelliJ IDEA 2018, VSCode

Download & Run

1. Clone the repository

git clone [email protected]:Yin-Hongwei/music-website.git

# Alternative (faster)
git clone [email protected]:Yin-hongwei/music-website.git

2. Download resource files

Download link: https://pan.quark.cn/s/088e0b8a6957

Place the downloaded songs and images into the data folder under music-server.

Note: Resources have been organized according to the screenshots.

3. Configure the database

Create a database and import tp_music.sql from music-website/music-server/sql.

Update spring.datasource.username and spring.datasource.password in

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

.

4. Start the project

Start the admin backend: run the following command in the music-server directory:

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

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

Start the client: run the following commands in the music-client directory:

npm install
npm run serve

Start the management UI: run the following commands in the music-manage directory:

npm install
npm run serve

Source Code Download

Download link: https://pan.baidu.com/s/16IapLhCQMKNSEHTjkjCSdw (extraction code: 64w1). It is recommended to open the link in a desktop browser before downloading.

Reply with “music” to the backend to obtain the download link as well.