SpringBoot 在线音乐平台毕设后端搭建

使用 Spring Initializr 快速生成项目基础结构，选择依赖包括 Spring Web、Spring Data JPA、MySQL Driver。Maven 或 Gradle 作为构建工具均可，根据个人偏好选择。

配置 application.yml 文件设置数据库连接和服务器端口。示例配置中需包含数据源 URL、用户名密码及 Hibernate 的 ddl-auto 策略。开发环境建议使用 update 模式便于调试。

建立实体类映射数据库表结构，核心表包括 User、Song、Playlist。使用 Lombok 简化代码，通过 @Entity 和 @Id 注解定义主键。关系型字段使用 @ManyToMany 和 @OneToMany 建立关联。

@Entity
@Data
public class Playlist {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    
    @ManyToMany
    private Set<Song> songs = new HashSet<>();
    
    @ManyToOne
    private User creator;
}

RESTful API 接口设计

创建 Controller 层处理 HTTP 请求，遵循 REST 规范设计路由。歌单相关接口包括 GET /api/playlists（获取列表）、POST /api/playlists（创建歌单）、PUT /api/playlists/{id}（更新歌单）。

实现 Service 层业务逻辑，包括歌单的增删改查操作。使用 JPA 的 Repository 接口进行数据库交互，复杂查询可结合 @Query 注解编写 JPQL。

@RestController
@RequestMapping("/api/playlists")
@RequiredArgsConstructor
public class PlaylistController {
    private final PlaylistService playlistService;

    @GetMapping
    public ResponseEntity<List<Playlist>> getAll() {
        return ResponseEntity.ok(playlistService.findAll());
    }
}

文件存储与音频处理

配置资源处理器暴露本地文件目录，使上传的音频文件可通过 URL 访问。创建 FileStorageService 处理文件上传逻辑，使用 MultipartFile 接收前端传输的文件。

集成 FFmpeg 进行音频元数据提取，通过 Java 的 ProcessBuilder 调用命令行工具。获取歌曲时长、比特率等信息存储到数据库，为前端播放器提供必要参数。

public void extractMetadata(File audioFile) throws IOException {
    Process process = new ProcessBuilder(
        "ffmpeg", "-i", audioFile.getAbsolutePath()
    ).start();
    // 解析输出流获取元数据
}

Vue 前端歌单功能实现

使用 Vue CLI 创建项目，安装 vue-router 和 axios。设计歌单展示组件包含封面图、标题、创建者信息，通过 v-for 渲染从后端获取的列表数据。

实现歌单创建表单，包含文件上传组件用于设置封面。通过 FormData 对象组装数据，设置 Content-Type 为 multipart/form-data 发送到后端。

methods: {
    async submitForm() {
        const formData = new FormData();
        formData.append('title', this.form.title);
        formData.append('cover', this.selectedFile);
        
        await axios.post('/api/playlists', formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
        });
    }
}

用户交互与状态管理

集成 Vuex 管理全局状态，存储当前用户信息和歌单数据。实现歌单收藏功能，通过 watch 监听路由变化自动更新视图。

使用 vue-aplayer 或自定义组件实现音频播放器，维护播放队列。通过 Web Audio API 可视化音频频谱，增强用户体验。

computed: {
    ...mapState(['currentUser']),
    isCreator() {
        return this.playlist.creator.id === this.currentUser.id;
    }
}

安全与性能优化

后端配置 Spring Security 实现 JWT 认证，保护 API 端点。使用 @PreAuthorize 注解控制权限，如歌单修改限制为创建者本人。

前端实施路由守卫，未登录用户跳转到认证页面。添加懒加载优化首屏性能，使用 keep-alive 缓存组件状态减少重复请求。

@PreAuthorize("#playlist.creator.username == authentication.name")
@PutMapping("/{id}")
public ResponseEntity<Playlist> update(@PathVariable Long id, @RequestBody Playlist playlist) {
    return ResponseEntity.ok(playlistService.update(id, playlist));
}