当前位置：首页 > VUE

Django加Vue实现音乐

2026-02-23 04:15:15VUE

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_ORIGIN_ALLOW_ALL = 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）：

Django加Vue实现音乐

from rest_framework import serializers
from .models import Music

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

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

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 项目：

Django加Vue实现音乐

vue create music_frontend
cd music_frontend
npm install axios vue-router vuex

配置 API 调用（src/api/index.js）：

import axios from 'axios'

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

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

创建音乐播放组件（src/components/MusicPlayer.vue）：

<template>
    <div>
        <audio controls :src="currentMusic.audio_file"></audio>
        <h3>{{ currentMusic.title }}</h3>
        <p>{{ currentMusic.artist }}</p>
        <img :src="currentMusic.cover_image" alt="Cover">
    </div>
</template>

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