Music Website Project – Full‑Stack Implementation with Vue 3 and Spring Boot

Project Description

The client and admin side of this music website are implemented using the Vue framework, while the server side uses Spring Boot + MyBatis, and the database is MySQL.

Implementation details can be seen here: https://yin-hongwei.github.io/2019/03/04/music/

Project startup instructions are at the end of the article.

Project Preview

Front‑end Screenshot Preview

Back‑end Screenshot Preview

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 playlist and artist lists

Synchronized lyric display

Music collection, download, drag control, volume control

Admin management of users, songs, artists, and playlists

Technology Stack

Backend

SpringBoot + MyBatis

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 and Run

1. Clone the project

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

# If the above is slow, use the Gitee mirror
git clone [email protected]:Yin-hongwei/music-website.git

2. Download the media resources

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

Extract the downloaded songs and images into the music-server folder under a data directory.

Note: The resources have been organized according to the screenshots below.

3. Modify configuration files

Create the database by importing tp_music.sql located in music-website/music-server/sql into MySQL.

Update the database username and password in music-website/music-server/src/main/resources/application.properties (fields spring.datasource.username and spring.datasource.password ).

4. Start the project

Start the admin backend: go to the music-server folder and run one of the following commands: // Method 1 ./mvnw spring-boot:run // Method 2 (requires Maven installed) mvn spring-boot:run

Start the client front‑end: go to the music-client directory and run: npm install // install dependencies npm run serve // launch the front‑end project

Start the admin front‑end: go to the music-manage directory and run: npm install // install dependencies npm run serve // launch the admin UI

Project Source Code Download

Download link: https://pan.quark.cn/s/5613280cf2ba

It is recommended to copy the link into a desktop browser before downloading for convenience.

Click the Read Original Article button below to quickly download the source code.