1. 项目背景与核心价值
最近在重构一个音乐流媒体项目时，我选择了Python+Django作为后端、Vue.js作为前端的全栈技术方案。这种组合在中小型Web应用中越来越流行——Django提供稳健的后台支撑，Vue则让前端交互体验更加流畅。实际开发中发现，虽然网上有大量零散的教程，但完整呈现音乐网站核心功能的实战案例却不多见。
这个项目实现了音乐上传/播放、歌单管理、用户收藏等基础功能，并针对移动端做了响应式适配。技术栈上特别选用了Django REST framework构建API，配合Vuex进行状态管理，前后端完全分离的开发模式让团队协作效率提升明显。下面分享从环境搭建到核心模块实现的全过程，包含那些官方文档不会告诉你的实战技巧。
2. 技术栈选型解析
2.1 后端框架对比：Django vs Flask
在Python生态中，Django和Flask是最常用的两个Web框架。最终选择Django主要基于三点考量：
-
ORM成熟度：Django自带的ORM对多表关联查询的支持更完善，比如歌单与歌曲的多对多关系，用
ManyToManyField只需几行代码：python复制class Playlist(models.Model): songs = models.ManyToManyField('Song', through='PlaylistSong') class PlaylistSong(models.Model): order = models.IntegerField() # 自定义中间表字段 -
Admin后台：音乐网站需要频繁管理歌曲元数据（标题、艺人、专辑等），Django Admin开箱即用的管理界面节省了70%的后台开发时间。
-
安全性：Django默认开启CSRF保护、XSS过滤等安全机制，对于用户上传的音频文件，可以用
django-storages自动对接云存储（实测S3上传速度比本地存储快3倍）。
提示：如果项目需要更高并发性能，可以考虑Flask+SQLAlchemy组合，但需要自行实现用户认证等基础组件。
2.2 前端框架选择：Vue.js的优势
相比React和Angular，Vue在音乐类项目中的独特优势包括：
-
音频组件封装：通过自定义指令可以优雅地控制音频播放：
javascript复制Vue.directive('audio-control', { inserted(el, binding) { el.addEventListener('play', () => binding.value.onPlay()) } }) -
动画过渡：歌曲切换时的淡入淡出效果用Vue Transition只需CSS配置：
css复制.fade-enter-active { transition: opacity 0.5s; } -
状态管理：Vuex非常适合管理全局播放状态，比如当前播放列表、音量设置等。
3. 核心功能实现
3.1 音乐播放器模块
3.1.1 音频处理方案
音乐网站的核心是音频处理，我们采用以下技术方案：
-
音频格式转换：使用
ffmpeg在服务端统一转码为MP3格式（兼容性最佳），Django中可以通过Celery异步任务处理：python复制@shared_task def convert_audio(upload_id): instance = Upload.objects.get(id=upload_id) subprocess.run(f'ffmpeg -i {instance.file.path} -acodec libmp3lame output.mp3') -
波形图生成：借助
wavesurfer.js在前端可视化音频波形，关键配置：javascript复制WaveSurfer.create({ container: '#waveform', waveColor: '#4a4e69', progressColor: '#ee6c4d' })
3.1.2 播放控制逻辑
实现跨路由持续播放需要解决两个技术难点：
-
全局播放器：在Vue根实例外挂载播放器DOM：
html复制<!-- App.vue --> <div id="app"> <router-view/> <audio-player v-show="false"/> <!-- 隐藏但保持存活 --> </div> -
状态持久化：通过Vuex保存当前播放进度，使用
localStorage做持久化：javascript复制const store = new Vuex.Store({ plugins: [createPersistedState({ paths: ['player.currentTime'] })] })
3.2 歌单管理系统
3.2.1 数据结构设计
采用三张表实现带排序功能的歌单：
| 表名 | 字段 | 说明 |
|---|---|---|
| Playlist | title, cover_url, owner | 歌单元信息 |
| PlaylistSong | playlist_id, song_id, order | 关联表含排序字段 |
| Song | title, artist, duration | 歌曲基础信息 |
对应的Django QuerySet查询优化技巧：
python复制# 预加载关联数据避免N+1查询
playlist = Playlist.objects.prefetch_related(
'playlistsong_set__song'
).get(id=1)
3.2.2 拖拽排序实现
前端使用vuedraggable组件实现可视化排序：
vue复制<draggable v-model="songs" @end="onSort">
<div v-for="song in songs" :key="song.id">
{{ song.title }}
</div>
</draggable>
后端API需要处理排序数组的批量更新：
python复制# views.py
@action(detail=True, methods=['POST'])
def update_order(self, request, pk=None):
orders = request.data.get('orders') # [{id:1,order:2},...]
with transaction.atomic():
for item in orders:
PlaylistSong.objects.filter(
playlist_id=pk,
song_id=item['id']
).update(order=item['order'])
4. 开发环境配置
4.1 PyCharm高效设置
几个提升开发效率的配置：
-
Django模板支持：在
Settings > Languages & Frameworks中启用Django模板语言高亮 -
Vue插件：安装
Vue.js插件获得.vue文件支持，配置ESLint自动修复 -
运行配置：创建Compound配置同时启动后端和前端：
code复制Django runserver → 8000端口 npm run serve → 8080端口
4.2 前后端联调技巧
-
跨域解决方案：Django侧安装
django-cors-headers，配置白名单：python复制CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", ] -
API Mock方案：开发初期可以使用
json-server快速模拟接口：bash复制npm install -g json-server echo '{ "songs": [] }' > db.json json-server --watch db.json
5. 性能优化实战
5.1 数据库查询优化
音乐网站最常见的性能瓶颈是歌单页面的关联查询：
-
使用select_related/prefetch_related：
python复制Playlist.objects.prefetch_related( Prefetch('playlistsong_set', queryset=PlaylistSong.objects.select_related('song')) ) -
添加条件索引：对经常按热度筛选的字段建立索引：
python复制class Song(models.Model): hot_score = models.IntegerField(db_index=True)
5.2 前端懒加载策略
-
路由级代码分割：在Vue Router配置中：
javascript复制const SongDetail = () => import('./views/SongDetail.vue') -
图片延迟加载：使用
v-lazy-image组件：vue复制<v-lazy-image :src="album.cover" src-placeholder="/placeholder.png" />
6. 部署上线方案
6.1 生产环境架构
推荐使用Docker Compose编排服务：
yaml复制version: '3'
services:
web:
build: .
command: gunicorn core.wsgi:application -w 4 -k gevent
ports:
- "8000:8000"
redis:
image: redis
celery:
build: .
command: celery -A core worker -l info
6.2 静态资源处理
-
CDN加速：配置
django-storages对接阿里云OSS：python复制DEFAULT_FILE_STORAGE = 'storages.backends.oss2.OSS2Storage' -
前端资源哈希：在vue.config.js中开启文件名哈希：
javascript复制configureWebpack: { output: { filename: '[name].[contenthash].js' } }
7. 踩坑记录与解决方案
-
音频播放时间获取：部分浏览器需要监听
loadedmetadata事件才能获取duration：javascript复制audio.addEventListener('loadedmetadata', () => { this.duration = audio.duration }) -
Django文件上传临时目录：Linux系统默认的
/tmp可能权限不足，需在settings.py配置：python复制FILE_UPLOAD_TEMP_DIR = '/var/tmp/uploads' -
Vue路由切换白屏：history模式需要Nginx额外配置：
nginx复制location / { try_files $uri $uri/ /index.html; }
这个项目从技术选型到最终上线历时两个月，最大的体会是：音乐类Web应用对前后端协作的要求极高，特别是播放状态管理和音频处理环节。采用Django+Vue的组合既保证了开发效率，又能满足产品级的用户体验要求。如果重做一次，我会在早期就引入End-to-End测试，用Cypress验证核心播放流程的稳定性。