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

温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目概述本文介绍如何从零搭建一个基于 Python、Django 和 Vue 的前后端分离音乐管理系统。系统采用 Django 提供 RESTful APIVue 负责前端页面渲染与交互通过 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_length100, verbose_name歌手姓名) avatar models.ImageField(upload_tosinger/, blankTrue, nullTrue) intro models.TextField(blankTrue, 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_length200, verbose_name歌曲名称) singer models.ForeignKey(Singer, on_deletemodels.CASCADE, related_namesongs) audio models.FileField(upload_toaudio/, verbose_name音频文件) cover models.ImageField(upload_tocover/, blankTrue, nullTrue) duration models.IntegerField(default0, verbose_name时长秒) play_count models.IntegerField(default0, verbose_name播放次数) created_at models.DateTimeField(auto_now_addTrue) class Meta: verbose_name 歌曲 verbose_name_plural verbose_name def __str__(self): return self.title执行数据库迁移python manage.py makemigrations python manage.py migrate5. 序列化器与视图创建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(sourcesinger.name, read_onlyTrue) 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 vitelatest 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.jsimport 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 classmusic-app h1音乐管理系统/h1 div classsong-list div v-forsong in songs :keysong.id classsong-item span{{ song.title }}/span span{{ song.singer_name }}/span audio :srcsong.audio controls/audio button clickhandleDelete(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) } /script8. 媒体文件访问配置为了让前端能够访问上传的音频和图片需要在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_rootsettings.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 通信。在此基础上还可以继续扩展用户注册登录、收藏歌单、播放历史、歌词展示等功能逐步完善系统能力。