1. 项目概述与核心价值
这个前后端分离的Web音乐网站系统，是我在2022年实际交付的一个商业项目改造而来的教学案例。采用SpringBoot+Vue的技术栈组合，完整实现了音乐上传、在线播放、歌单管理、用户收藏等核心功能模块。相比传统单体架构，这种分离模式让前端开发不再受限于后端模板引擎，后端API也可以独立演进。
关键优势：前端Vue组件化开发体验流畅，后端SpringBoot保障稳定服务，MyBatis灵活操作MySQL数据，这种技术组合已成为当前企业级应用的主流选择。
系统最让我满意的设计点是播放器模块。通过H5 Audio API与Vue的自定义指令结合，实现了无缝切换播放、进度拖拽、音量控制等完整功能，且完全兼容移动端触屏操作。后台采用分片上传技术解决大文件传输问题，实测上传500MB的音频文件仍能保持稳定。
2. 技术栈深度解析
2.1 SpringBoot后端设计
采用2.7.4版本构建RESTful API，核心配置如下：
java复制@SpringBootApplication
@MapperScan("com.music.mapper")
public class MusicApp {
public static void main(String[] args) {
SpringApplication.run(MusicApp.class, args);
}
@Bean
public CommonsMultipartResolver multipartResolver() {
CommonsMultipartResolver resolver = new CommonsMultipartResolver();
resolver.setMaxUploadSize(1024*1024*500); // 500MB
return resolver;
}
}
数据库设计特别注意了音乐文件的存储策略：
- 音频文件实际存储在NFS服务器
- MySQL只保存相对路径和元数据
- 采用雪花ID替代自增主键，便于分布式扩展
2.2 Vue前端架构
使用Vue 3的组合式API开发，项目结构经过优化：
code复制/src
├── api/ # 封装所有axios请求
├── assets/ # 静态资源
├── components/ # 通用组件
│ ├── Player/ # 播放器核心组件
│ └── Uploader/ # 带进度条的上传组件
├── router/ # 动态路由配置
└── stores/ # Pinia状态管理
播放器组件的关键实现：
vue复制<template>
<div class="player" @touchmove.prevent>
<audio ref="audioEl" @timeupdate="updateProgress"/>
<div class="progress-bar" @click="seekTo"></div>
</template>
<script setup>
const audioEl = ref(null)
const seekTo = (e) => {
const percent = e.offsetX / e.target.offsetWidth
audioEl.value.currentTime = percent * audioEl.value.duration
}
</script>
3. 核心功能实现细节
3.1 音乐文件分片上传
前端采用web-worker处理大文件分片：
javascript复制// upload.worker.js
self.onmessage = async ({data: file}) => {
const chunkSize = 5 * 1024 * 1024 // 5MB
for (let i = 0; i < file.size; i += chunkSize) {
const chunk = file.slice(i, i + chunkSize)
await uploadChunk(chunk, i)
}
postMessage('done')
}
后端用临时文件合并分片：
java复制@PostMapping("/merge")
public Result mergeChunks(
@RequestParam String md5,
@RequestParam String fileName) throws IOException {
File tempDir = new File("/tmp/upload/" + md5);
File dest = new File("/music/" + fileName);
try (OutputStream out = new FileOutputStream(dest)) {
for (File part : tempDir.listFiles()) {
Files.copy(part.toPath(), out);
}
}
return Result.success();
}
3.2 播放列表管理
采用Vue的provide/inject实现跨组件状态共享：
javascript复制// playerStore.js
export const usePlayerStore = defineStore('player', {
state: () => ({
playlist: [],
currentIndex: -1
}),
actions: {
async addToQueue(song) {
this.playlist.push(song)
if (this.currentIndex === -1) {
this.currentIndex = 0
}
}
}
})
4. 安全防护实践
4.1 SQL注入防御
针对MyBatis使用#{}预防注入：
xml复制<select id="searchSongs" resultType="Song">
SELECT * FROM songs
WHERE name LIKE CONCAT('%', #{keyword}, '%') <!-- 安全 -->
<!-- 危险示例：WHERE name LIKE '%${keyword}%' -->
</select>
4.2 文件上传安全
严格校验文件类型和内容：
java复制boolean isAudio(InputStream is) throws IOException {
byte[] header = new byte[4];
is.read(header);
return Arrays.equals(header, new byte[]{0x49, 0x44, 0x33}) // MP3
|| Arrays.equals(header, "fLaC".getBytes()); // FLAC
}
5. 部署实战指南
5.1 生产环境部署
Nginx关键配置示例：
nginx复制server {
listen 80;
server_name music.example.com;
location /api {
proxy_pass http://127.0.0.1:8080;
proxy_set_header X-Real-IP $remote_addr;
}
location / {
root /var/www/music-web;
try_files $uri $uri/ /index.html;
}
}
5.2 性能优化建议
- 开启Gzip压缩节省带宽
- 配置CDN加速静态资源
- 使用Redis缓存热门歌单
- 对音频文件启用HTTP范围请求
6. 常见问题排查
6.1 跨域问题解决方案
SpringBoot配置类示例：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
6.2 播放器兼容性问题
针对iOS的特别处理：
javascript复制// 检测iOS自动播放限制
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
document.addEventListener('touchstart', initAudio, { once: true });
}
function initAudio() {
audioEl.value.play().catch(e => {
console.warn('Autoplay blocked:', e);
});
}
这个项目在交付后持续迭代了三个版本，最大的收获是认识到良好的错误处理机制的重要性。比如在播放器组件中，我们最初没有充分考虑网络波动的情况，后来增加了自动重试和降级处理逻辑后，用户体验评分提升了40%。建议开发类似系统时，一定要在初期就建立完善的错误监控体系。