当前位置：首页 > VUE

Django加Vue实现音乐

2026-01-22 13:15:49VUE

Django 后端搭建

安装 Django 和相关依赖：

pip install django djangorestframework django-cors-headers

创建 Django 项目和应用：

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

配置 settings.py：

INSTALLED_APPS = [
    ...,
    'rest_framework',
    'corsheaders',
    'api',
]

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True

创建音乐模型（api/models.py）：

from django.db import models

class Music(models.Model):
    title = models.CharField(max_length=200)
    artist = models.CharField(max_length=200)
    audio_file = models.FileField(upload_to='musics/')
    cover_image = models.ImageField(upload_to='covers/')

序列化模型（api/serializers.py）：

from rest_framework import serializers
from .models import Music

class MusicSerializer(serializers.ModelSerializer):
    class Meta:
        model = Music
        fields = '__all__'

创建视图（api/views.py）：

Django加Vue实现音乐

from rest_framework import viewsets
from .models import Music
from .serializers import MusicSerializer

class MusicViewSet(viewsets.ModelViewSet):
    queryset = Music.objects.all()
    serializer_class = MusicSerializer

配置路由（api/urls.py）：

from rest_framework.routers import DefaultRouter
from .views import MusicViewSet

router = DefaultRouter()
router.register(r'musics', MusicViewSet)

Vue 前端搭建

创建 Vue 项目：

npm init vue@latest music_frontend
cd music_frontend
npm install axios vue-router

配置 API 请求（src/services/api.js）：

import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:8000'
})

export default {
    getMusics() {
        return api.get('/musics/')
    }
}

创建音乐列表组件（src/components/MusicList.vue）：

Django加Vue实现音乐

<template>
    <div>
        <div v-for="music in musics" :key="music.id">
            <h3>{{ music.title }}</h3>
            <p>{{ music.artist }}</p>
            <audio controls :src="music.audio_file"></audio>
        </div>
    </div>
</template>

<script>
import api from '@/services/api'

export default {
    data() {
        return {
            musics: []
        }
    },
    async created() {
        const response = await api.getMusics()
        this.musics = response.data
    }
}
</script>

前后端联调

启动 Django 开发服务器：

python manage.py runserver

启动 Vue 开发服务器：

npm run dev

确保 Django 的 MEDIA_URL 和 MEDIA_ROOT 配置正确：

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在 Django 的 urls.py 中添加媒体文件路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...,
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)