基于 Vue 的音乐播放器设计

本文由 GPT 5.6 Luna 根据毕业设计论文整理生成。

项目背景

我的毕业设计是一个基于 Vue 的音乐播放器系统，主要面向本地音乐管理和局域网使用场景。相比只提供在线播放的音乐平台，本项目更关注本地音乐资源的整理、播放和共享，希望把分散在电脑中的歌曲集中管理起来，并让同一局域网内的其他设备也能够方便地访问。

在实际使用中，音乐文件通常分布在不同位置，用户需要在歌曲、歌手、专辑和歌单之间反复查找。因此，本项目在完成基础播放功能的同时，也加入了局域网音乐共享能力，尝试让同一网络中的设备更方便地访问统一的音乐资源。

项目源码：RLMusic

系统按照使用权限划分为游客、普通用户和管理员三类角色。游客可以浏览公开歌单和音乐资源，并使用基础播放功能；普通用户可以注册登录，创建自己的歌单，管理播放历史并收藏喜欢的内容；管理员则负责用户、公共歌单和曲库资源的维护。

这样的角色划分让不同用户拥有清晰的操作范围。普通用户主要关注音乐的浏览和播放，管理员则可以通过管理面板完成曲库扫描、用户权限调整、公共歌单维护以及系统数据查看。

项目主要使用 Vue 3、TypeScript 和 Vite 构建前端，使用 Go 和 Gin 提供后端 API 服务，数据库采用 SQLite。

Vue 3 的组件化开发方式适合构建播放器、歌单、搜索和管理面板等多个页面模块。TypeScript 可以为接口数据和组件状态提供更清晰的类型约束，Vite 则负责开发环境和生产环境的构建。后端使用 Go 和 Gin 实现用户认证、音乐资源管理、歌单操作以及 AI 服务调用等业务逻辑。

整体架构按照用户界面层、表现层、业务逻辑层、数据访问层和数据库层进行划分。客户端通过 HTTP 请求访问后端接口；后端完成权限验证和业务处理后，再将数据返回给前端。

在数据设计方面，系统围绕用户、歌曲、歌单、歌手和专辑等核心对象建立数据关系，同时保存封面、播放历史和系统信息等数据。歌单与歌曲、歌曲与歌手之间使用关联关系连接，这样既能支持一首歌曲属于多个歌单，也能为后续扩展收藏和推荐功能保留空间。

系统提供用户注册、登录、退出登录和修改密码等功能。用户登录后，前端保存必要的身份信息，并在访问需要权限的接口时携带认证信息。后端根据用户身份判断其是否可以进行歌单修改、曲库扫描和管理员操作。

普通用户登录后可以进入个人页面，查看自己的信息和歌单；管理员登录后可以进入管理面板，对用户权限和公共资源进行维护。通过前后端同时进行权限判断，可以避免只依赖前端隐藏按钮带来的安全问题。

系统首页主要展示发现内容、公共歌单和音乐资源，导航栏负责连接发现页、搜索页、系统信息页、个人页面和局域网访问页面。

播放器是整个系统的核心模块。用户点击歌曲后，系统会加载音乐资源并更新当前播放状态，底部播放栏负责提供常用的播放控制，全屏播放器则展示更加完整的歌曲信息、歌词和进度控制。

系统支持播放、暂停、进度调整、音量控制、上一首和下一首切换等操作。用户从歌单中播放歌曲时，相关歌曲还可以自动加入播放列表，方便连续播放。播放过程中产生的记录会保存到播放历史中，用户可以在之后重新查找最近播放过的歌曲。

普通用户可以创建私有歌单，并向歌单中添加或移除歌曲，也可以修改歌单封面和删除不再需要的歌单。公共歌单则由管理员进行维护，管理员可以修改歌单信息或删除不符合要求的内容。

搜索模块按照歌曲、歌单、歌手和专辑进行分类展示。用户输入关键词后，前端同时请求不同类型的搜索接口，并将结果分别呈现在对应区域中。这样的设计可以让用户快速定位目标资源，也避免把所有结果混杂在同一个列表中。

局域网共享是这个项目中比较有特色的功能。在同一个局域网内，系统可以生成包含访问地址的二维码，手机或其他设备扫描二维码后，就能通过浏览器访问运行在电脑上的音乐播放器。

这种方式不要求其他设备安装专门的客户端，用户只需要连接到相同的网络即可完成访问。对于家庭网络或小型办公网络来说，可以把一台电脑作为音乐资源服务器，其他设备通过浏览器共同使用同一个音乐库。

系统还加入了 AI 辅助模块，用于增强音乐内容的表达能力。管理员可以针对公共歌单生成介绍，也可以为歌手和专辑生成更加完整的文字描述。除此之外，系统还可以调用 TTS 服务，为歌曲生成开场白音频。

AI 模块并不是简单地把每次请求都转发给模型，而是加入了缓存处理。当相同对象已经生成过对应内容时，系统可以优先返回已有结果，减少重复调用，从而降低等待时间和服务消耗。

系统以 Web 端为基础，用户可以根据使用设备选择合适的访问方式，避免为不同平台分别维护完全独立的业务系统。

移动端访问：手机可以通过浏览器访问音乐播放器，也可以使用 Capacitor 将 Web 应用打包为移动端 APP，从而使用音乐浏览、搜索和播放等功能。
电脑端访问：电脑可以直接通过浏览器访问系统，也可以使用 Electron 将应用打包为 Windows、macOS 或 Linux 客户端，获得更加接近原生桌面应用的使用体验。

这次毕业设计让我认识到，一个完整的应用项目并不只是实现几个页面，还需要同时考虑权限、数据关系、接口组织和实际使用流程。播放器看似功能简单，但当它加入歌单、历史记录、局域网共享和 AI 服务后，各个模块之间就产生了比较多的关联。

项目目前仍有一些可以继续改进的地方。例如，音乐标签和分类能力还比较基础，大规模曲库下的扫描效率需要进一步优化，用户认证和资源权限也可以加入更加完善的安全机制。AI 功能目前主要集中在文字生成和语音生成，后续还可以继续探索个性化推荐、播放数据分析等方向。

通过这次毕业设计，我对前端项目开发、后端接口设计和数据库使用都有了更加完整的认识。这个项目覆盖了从需求分析、系统设计到功能实现的完整开发过程，也让我综合实践了 Vue、Go 和 SQLite 等技术。

从最初确定选题，到完成页面设计、接口开发、功能联调和论文整理，这个项目贯穿了我的毕业设计过程。它不仅是一次课程和专业知识的综合实践，也让我对一个项目从想法变成可以运行的系统有了更加具体的认识。

这就是我的毕业设计——一个基于 Vue 的音乐播放器。它尝试把本地音乐管理、局域网共享和 AI 辅助结合起来，虽然还有继续完善的空间，但也记录了我在大学阶段完成的一次完整项目实践。