Build a Full‑Featured Music Website with Vue.js and Spring Boot – Step‑by‑Step Guide

Project Overview

The music website project uses Vue.js for the front‑end (including the user‑facing site and admin panel) and a Spring Boot + MyBatis (SSM) stack for the back‑end, with MySQL as the data store.

Key Features

Basic functionalities include online music playback, user management, song library, playlists, artist information, lyric display, and comprehensive admin capabilities.

Deployment Steps

1. Clone the Repository

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

2. Download Static Resources

The project requires music files and cover images. Place the downloaded data folder contents into the music-server directory. These resources are available via a Baidu Cloud link.

3. Configure the Database

Create the database by importing tp_music.sql (found in music-website/music-server/sql) using your preferred IDE or client.

4. Update Backend Configuration

Set the correct MySQL username and password.

Adjust the resource loading path to ensure static assets are found.

5. Start the Services

The project follows a front‑end/back‑end separation model; the back‑end must run before the front‑ends.

Start Backend

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

Start Front‑End (User Site)

cd music-client
npm install
npm run dev

Start Admin Panel

cd music-manage
npm install
npm run dev

Project Screenshots