Python + Django + Vue 前后端分离的音乐管理系统实战-拓冰网站定制

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！

1. 项目概述

本文介绍如何从零搭建一个基于 Python、Django 和 Vue 的前后端分离音乐管理系统。系统采用 Django 提供 RESTful API，Vue 负责前端页面渲染与交互，通过 Axios 完成前后端数据通信，实现音乐上传、播放、分类管理、用户收藏等核心功能。

2. 技术选型与架构设计

本项目的技术栈选择如下：

后端：Python 3.10 + Django 4.2 + Django REST Framework
前端：Vue 3 + Vite + Vue Router + Pinia
数据库：MySQL 8.0（也可使用 SQLite 快速开发）
接口通信：Axios + RESTful API
文件存储：本地媒体目录（生产环境可接入 OSS）

系统整体采用前后端分离架构，前端通过 HTTP 请求访问后端接口，后端返回 JSON 数据，两者通过 CORS 配置实现跨域通信。

3. 后端环境搭建

首先创建虚拟环境并安装依赖：

mkdir music-system cd music-system python -m venv venv source venv/bin/activate # Windows 使用 venv\Scripts\activate pip install django djangorestframework django-cors-headers pillow

创建 Django 项目和应用：

django-admin startproject music_backend cd music_backend python manage.py startapp music

在settings.py中注册应用并配置跨域：

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'music', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # ... 其他中间件 ] CORS_ALLOW_ALL_ORIGINS = True # 开发环境放开，生产环境需配置白名单

4. 数据模型设计

音乐管理系统的核心模型包括歌曲、歌手、专辑和用户收藏。在music/models.py中定义：

from django.db import models class Singer(models.Model): name = models.CharField(max_length=100, verbose_name='歌手姓名') avatar = models.ImageField(upload_to='singer/', blank=True, null=True) intro = models.TextField(blank=True, verbose_name='歌手简介') class Meta: verbose_name = '歌手' verbose_name_plural = verbose_name def __str__(self): return self.name class Song(models.Model): title = models.CharField(max_length=200, verbose_name='歌曲名称') singer = models.ForeignKey(Singer, on_delete=models.CASCADE, related_name='songs') audio = models.FileField(upload_to='audio/', verbose_name='音频文件') cover = models.ImageField(upload_to='cover/', blank=True, null=True) duration = models.IntegerField(default=0, verbose_name='时长（秒）') play_count = models.IntegerField(default=0, verbose_name='播放次数') created_at = models.DateTimeField(auto_now_add=True) class Meta: verbose_name = '歌曲' verbose_name_plural = verbose_name def __str__(self): return self.title

执行数据库迁移：

python manage.py makemigrations python manage.py migrate

5. 序列化器与视图

创建music/serializers.py，定义接口返回的数据格式：

from rest_framework import serializers from .models import Singer, Song class SingerSerializer(serializers.ModelSerializer): class Meta: model = Singer fields = ['id', 'name', 'avatar', 'intro'] class SongSerializer(serializers.ModelSerializer): singer_name = serializers.CharField(source='singer.name', read_only=True) class Meta: model = Song fields = ['id', 'title', 'singer', 'singer_name', 'audio', 'cover', 'duration', 'play_count']

在music/views.py中编写视图集：

from rest_framework import viewsets from .models import Singer, Song from .serializers import SingerSerializer, SongSerializer class SingerViewSet(viewsets.ModelViewSet): queryset = Singer.objects.all() serializer_class = SingerSerializer class SongViewSet(viewsets.ModelViewSet): queryset = Song.objects.all() serializer_class = SongSerializer

配置路由，在music_backend/urls.py中注册：

from django.contrib import admin from django.urls import path, include from rest_framework.routers import DefaultRouter from music.views import SingerViewSet, SongViewSet router = DefaultRouter() router.register('singers', SingerViewSet) router.register('songs', SongViewSet) urlpatterns = [ path('admin/', admin.site.urls), path('api/', include(router.urls)), ]

6. 前端项目搭建

使用 Vite 创建 Vue 3 项目：

npm create vite@latest music_frontend -- --template vue cd music_frontend npm install npm install axios vue-router pinia

配置 Vite 开发代理，在vite.config.js中设置：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://127.0.0.1:8000', changeOrigin: true } } } })

7. 前端页面实现

创建 Axios 请求封装src/api/index.js：

import axios from 'axios' const request = axios.create({ baseURL: '/api', timeout: 10000 }) export const getSongs = () => request.get('/songs/') export const getSingers = () => request.get('/singers/') export const createSong = (data) => request.post('/songs/', data) export const deleteSong = (id) => request.delete(`/songs/${id}/`)

在src/App.vue中实现歌曲列表页面：

<template> <div class="music-app"> <h1>音乐管理系统</h1> <div class="song-list"> <div v-for="song in songs" :key="song.id" class="song-item"> <span>{{ song.title }}</span> <span>{{ song.singer_name }}</span> <audio :src="song.audio" controls></audio> <button @click="handleDelete(song.id)">删除</button> </div> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { getSongs, deleteSong } from './api' const songs = ref([]) onMounted(async () => { const res = await getSongs() songs.value = res.data }) const handleDelete = async (id) => { await deleteSong(id) songs.value = songs.value.filter(song => song.id !== id) } </script>

8. 媒体文件访问配置

为了让前端能够访问上传的音频和图片，需要在settings.py中配置媒体文件路径：

MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media'

并在music_backend/urls.py中添加静态文件路由：

from django.conf import settings from django.conf.urls.static import static urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

9. 运行与测试

启动后端服务：

python manage.py runserver

启动前端开发服务器：

npm run dev

访问http://localhost:5173即可看到音乐管理系统页面。通过 Django Admin 后台可以方便地添加歌手和歌曲数据，前端页面会自动拉取并展示。

10. 总结

本文完整演示了 Python + Django + Vue 前后端分离音乐管理系统的搭建过程。后端使用 Django REST Framework 提供标准 RESTful 接口，前端使用 Vue 3 组合式 API 实现页面交互，两者通过 Axios 通信。在此基础上，还可以继续扩展用户注册登录、收藏歌单、播放历史、歌词展示等功能，逐步完善系统能力。

资讯详情

Python + Django + Vue 前后端分离的音乐管理系统实战