1. 项目概览为什么我推荐用这个组合做个人云盘先聊聊这个项目到底是个什么东西。个人云盘管理系统说白了就是自己动手写一个类似百度网盘、阿里云盘的Web应用支持用户注册登录、文件上传下载、在线预览、目录管理这些核心功能。后端用SpringBoot前端用Vue.js数据存在MySQL里这就是最典型的Java全栈毕设组合。我在帮人看过不少毕设选题之后发现个人云盘这个方向在最近几年越来越热门原因其实很简单它既有业务逻辑的复杂度用户权限、文件树、上传下载又不需要特别冷门的中间件依赖整个技术栈都是学校课堂上讲过的Java、MySQL、Vue这三件套做起来不至于无从下手但做完又能把简历上的技术点串起来。相比图书管理系统、学生管理系统这种人人都在做的题目云盘项目在答辩的时候更容易讲出亮点因为文件上传、断点续传、视频预览这些功能点天然就带着技术深度。从技术选型角度看SpringBoot负责提供RESTful接口处理文件存储和业务逻辑Vue.js搭建管理界面通过Axios和后端交互MySQL存用户信息、文件元数据。三者的分工非常清晰刚好对应后端开发、前端开发、数据库设计三个能力维度。而且这些都是目前企业里真正在用的技术做完这个项目你对SpringBoot自动配置、Vue组件化开发、MyBatis映射这些概念会有比课本深刻得多的理解。这篇博客就围绕这套源码把整个项目从设计思路到具体实现再到我实际调试过程中踩过的坑完整地过一遍。不管你是准备拿它当毕设、课设还是单纯想学SpringBoot和Vue怎么配合做项目看完都能知道这套系统是怎么搭起来的以及每一个环节里最关键的地方在哪里。2. 功能设计与模块拆解一个云盘系统到底有哪些东西2.1 核心功能清单个人云盘虽然听起来是个大工程但核心功能收敛下来其实就是下面这张表里的内容功能模块具体功能点技术实现要点用户模块注册、登录、退出、密码加密存储MD5或BCrypt加密JWT或Session做登录态文件上传单文件上传、批量上传、进度显示MultipartFile接收分片上传为可选增强项文件管理文件列表、新建文件夹、重命名、移动、删除数据库维护目录层级物理删除或逻辑删除文件预览图片预览、视频在线播放、文本内容查看静态资源映射video标签播放m3u8或MP4文件下载单文件下载、打包下载流式输出支持断点下载是加分项分享功能生成分享链接、提取码、取消分享独立的分享表UUID标识分享记录回收站删除文件进回收站、恢复、彻底删除逻辑删除标记位定时清理对于毕设来说上面这些功能已经足够覆盖“管理系统”的完整性要求了。如果你想冲高分可以在文件上传这个模块上做文章加上秒传和断点续传这两个功能在答辩时几乎是必问项提前准备一下原理效果会好很多。2.2 为什么选前后端分离架构这套源码采用的是前后端完全分离的模式后端只提供JSON接口前端负责页面渲染和交互。这和传统的JSPServlet方案有一个本质区别前端代码和后端代码可以完全独立开发、独立部署Debug的时候不用像以前那样改完Java代码还要重启整个Tomcat才能看效果。从学习角度来说前后端分离更重要的是让你提前适应真实公司的开发流程。现在的互联网项目基本没有用JSP做页面的了前端工程化Node.js、Vue CLI、Webpack这些已经是基本功。你在毕设阶段就把这套流程跑通毕业之后找工作面试的时候至少不会出现“前端项目不会启动”这种尴尬情况。Vue.js在这个项目里承担的任务是构建单页应用SPA页面切换不需要刷新浏览器。路由层面的跳转由Vue Router管理各个功能页面做成组件文件列表是一个组件上传面板是一个组件预览对话框又是一个组件这样代码组织起来特别干净。数据交互层面用Axios向后端发HTTP请求拿到JSON数据之后驱动视图更新。2.3 项目目录结构规划拿到源码之后先把项目结构看明白再动手改这是最重要的第一步。整个项目按照Maven多模块还是单模块组织都可以我建议初学者直接用单模块结构简单不会把自己绕晕。后端包结构大致是这样的com.example.clouddisk ├── controller // 控制器层接收前端请求 ├── service // 业务逻辑层 ├── mapper // MyBatis数据访问层 ├── entity // 实体类对应数据库表 ├── dto // 前端传参的封装对象 ├── vo // 返回给前端的封装对象 ├── config // 配置类跨域、拦截器等 ├── common // 公共类统一返回结果、异常处理等 └── CloudDiskApplication.java // 启动类前端用Vue CLI创建的项目src目录下核心就是views页面视图、components公共组件、router路由配置、storeVuex状态管理、api接口请求封装这几个文件夹。看到这个结构就像看到一套房子的户型图哪里是客厅、哪里是卧室一目了然后面改代码的时候知道去哪找文件效率会高很多。3. 数据库设计几张表如何撑起整个云盘业务3.1 数据表结构设计数据库设计是整个系统的地基。地基没打好后面写代码的时候会发现自己一直在跟数据结构的坑较劲。个人云盘最核心的表就三张用户表、文件信息表、分享表。用户表user设计得比较常规但是有几个字段值得注意。除了用户名和密码建议加一个avatar字段存头像地址加一个storage_used字段记录用户已用空间这样前端展示剩余容量的时候就不用临时去统计文件大小了一次查询直接出结果。文件信息表file_info是系统的核心表字段设计决定了整个文件管理功能的复杂程度。我建议的表结构是这样的字段名类型说明idbigint主键自增user_idbigint所属用户ID外键关联用户表parent_idbigint父目录ID根目录为0file_namevarchar(128)文件名包含扩展名file_pathvarchar(512)文件在服务器上的物理存储路径file_sizebigint文件大小单位字节file_typevarchar(32)文件类型folder/image/video/doc等is_dirtinyint是否文件夹1是0否del_flagtinyint逻辑删除标记1已删除0正常create_timedatetime创建时间update_timedatetime更新时间这个表最大的特点是通过parent_id来维护目录层级这是一种典型的邻接表模型。查询某个目录下的所有文件只需要一条SQLSELECT * FROM file_info WHERE parent_id ? AND user_id ? AND del_flag 0。实现起来非常简单对初学者非常友好。如果你想让项目显得更高级一些可以换成path枚举模型每个文件存一个祖先路径列表但那是进阶玩法毕设阶段用邻接表完全足够。分享表share_info简单很多主要字段有share_id分享的UUID标识、file_id被分享的文件ID、user_id分享者ID、extract_code提取码、expire_time过期时间、create_time创建时间。访问分享链接的时候前端把share_id和提取码传给后端后端校验通过后返回文件信息这个功能就串起来了。3.2 为什么建议用逻辑删除而不是物理删除这可能是整个数据库设计里最容易踩坑的地方。很多初学者做删除功能的时候直接一条DELETE语句把记录干掉这在毕设里会有个很尴尬的问题你辛辛苦苦写好的回收站、恢复功能全都没法实现了。因为数据已经被物理删除了拿什么恢复所以在这套源码里删除操作只是把del_flag从0改成1查询列表的时候自动过滤掉del_flag1的记录。回收站页面做的其实就是查询所有del_flag1的数据恢复就是把它改回0彻底删除才是真正的DELETE。这个设计模式叫软删除或逻辑删除在真实项目里也大量使用因为它保证了数据可追溯。我见过不少同学为了在答辩时展示回收站功能又不想做软删除就搞了两张表一个存正常文件一个存已删除文件。这个方案不是说不行但是删除和恢复的时候要同步操作两张表事务控制变复杂了完全没有必要。一个字段就能解决的事情不要人为制造复杂度。3.3 索引设计的基本思路数据量小的时候感觉不到索引的作用但在答辩的时候面试官通常会问一句“你的表建了哪些索引”如果回答不上来这一分就丢了。文件信息表最常用的查询条件是user_id parent_id del_flag所以这三列的联合索引是必须的ALTER TABLE file_info ADD INDEX idx_user_parent_del (user_id, parent_id, del_flag)。上传文件的时候要查重做秒传功能需要根据user_id和文件的MD5值去查找记录所以md5字段也要单独加索引。用户表的用户名在登录时要查询username字段加唯一索引。这三个索引建上之后数据库层面的设计就算过关了。4. 后端核心接口实现从上传到下载的完整链路4.1 文件上传接口的实现细节文件上传是整个云盘系统的技术核心也是最容易出问题的地方。先看最基础的单文件上传接口Controller层用MultipartFile接收前端传过来的文件Service层负责把文件写入磁盘然后把文件的元数据插入数据库。后端在保存文件的时候不要把文件名直接用原始文件名否则不同用户上传了同名文件就会互相覆盖。我的做法是给文件名加一个UUID前缀String storedName UUID.randomUUID().toString() _ originalFilename这样既避免了重名问题又能从存储名里看出原始文件名排查问题的时候很方便。存储路径也要规划好建议按照用户ID和时间分目录存放/upload/用户ID/202502/xxxxxxxxxxxx_fileName.zip这样分的好处有三个一是单个目录下的文件数量不会太多文件系统读取效率有保障二是按用户隔离后面想单独清理某个用户的文件很轻松三是按月份分目录做定时清理策略的时候很直观。上传接口还有一个容易被忽略的点大小限制。SpringBoot默认的单文件上传上限是1MB如果你不上传大文件会发现文件传到一半就报MaxUploadSizeExceededException。需要在application.yml里显式配置spring: servlet: multipart: max-file-size: 1024MB max-request-size: 1024MB这里我把大小调大到1GB是为了支持视频文件的上传。如果你只传文档和图片100MB也足够了。这个配置是个隐形坑到时候找半天原因可能只是缺了这一行。4.2 文件列表接口的层次化返回前端展示文件列表的时候有几种设计方案。最简单的是只返回当前目录下的文件列表用户点进子文件夹的时候再调一次接口。这个方案对数据库压力小但页面切换的时候会有一个加载的延迟感。更流畅的做法是返回当前目录的全部文件列表同时返回面包屑导航需要的数据。我在实现的时候设计了一个FileListVO里面包含两个字段当前目录的文件列表、当前目录的路径链。前端拿到之后既能直接渲染表格又能根据路径链生成面包屑。后端查询的逻辑是这样的先根据当前文件的id查出它的路径链通过parent_id一直往上递归再查出当前目录下的所有文件。这里有一个性能小技巧如果文件都在同一层级可以一次性查出来再在Java内存里做树形组装避免多次查库。4.3 文件下载与断点续传文件下载接口的核心是HttpServletResponse输出流。把文件从磁盘读出来写入响应输出流同时设置Content-Disposition响应头告诉浏览器这是一个需要下载的文件。如果只做到这一步在答辩的时候会显得比较单薄因为面试官随便问一句“如果网络中断了怎么办”你可能就答不上来了。所以我在源码里支持了断点下载也就是HTTP协议里的Range请求头。浏览器或者下载工具请求文件的时候会带上Range: bytes0-1023这样的头信息后端解析出起始位置和结束位置用RandomAccessFile定位到指定位置后读取指定的字节数。Override public void downloadFile(Long fileId, HttpServletRequest request, HttpServletResponse response) { FileInfo fileInfo fileInfoMapper.selectById(fileId); File file new File(fileInfo.getFilePath()); long fileLength file.length(); // 解析Range头 String rangeHeader request.getHeader(Range); long startByte 0; long endByte fileLength - 1; if (rangeHeader ! null rangeHeader.startsWith(bytes)) { String range rangeHeader.substring(6).trim(); String[] parts range.split(-); startByte Long.parseLong(parts[0]); if (parts.length 1 !parts[1].isEmpty()) { endByte Long.parseLong(parts[1]); } response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT); response.setHeader(Content-Range, bytes startByte - endByte / fileLength); } response.setContentLengthLong(endByte - startByte 1); RandomAccessFile raf new RandomAccessFile(file, r); raf.seek(startByte); byte[] buffer new byte[4096]; int len; long totalRead 0; long needRead endByte - startByte 1; while ((len raf.read(buffer)) ! -1 totalRead needRead) { response.getOutputStream().write(buffer, 0, (int) Math.min(len, needRead - totalRead)); totalRead len; } raf.close(); }这段代码完整展示了Range请求的处理逻辑。有了它你在演示的时候用IDM或者curl带Range头下载就能看到服务器正确地返回206状态码这个细节是会让人眼前一亮的东西。4.4 统一返回结果和全局异常处理后端开发里有一个很容易被别人忽略但实际很重要的设计就是接口返回格式的统一。如果一个接口返回JSON对象另一个接口直接返回字符串前端处理数据的时候就会非常痛苦判断逻辑会越写越乱。我统一封装了一个Result类public class ResultT { private Integer code; // 状态码200成功500失败 private String message; // 提示信息 private T data; // 业务数据 }所有的Controller接口都返回Result类型前端拿到响应后先判断code是否为200再决定后续操作。配合RestControllerAdvice做全局异常处理不管是业务异常还是系统异常都能统一转换成Result格式返回不会出现前端拿到一堆看不懂的报错信息的情况。这个设计看似简单但会让代码的整洁程度上一个台阶答辩时也方便讲解。4.5 登录鉴权的两种主流方案登录功能是所有管理系统的入口云盘系统也不例外。在SpringBoot生态里做登录鉴权有两种主流方案一种是基于Session的传统方案一种是基于Token的无状态方案。传统的Session方案是服务器在登录成功之后把用户信息存在Session里给浏览器返回一个JSESSIONID的Cookie之后的每次请求都会带着这个Cookie服务器从Session里查出用户身份。这个方案实现简单但是有一个明显的短板如果项目部署在多台服务器后面负载均衡Session必须做共享否则用户在A服务器登录了请求被转发到B服务器就认不出他了。无状态的Token方案比如JWT解决了这个问题。登录成功后服务器签发一个带有用户ID和过期时间的Token返回给前端前端存在localStorage里每次请求在请求头中带上Authorization: Bearer 后端拦截器验签通过后就能拿到用户身份。因为Token本身是无状态的服务器不需要存储任何会话数据在分布式环境下天然适用。我在这套源码里用的是JWT方案拦截器实现如下Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getMethod().equals(OPTIONS)) { return true; } String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { throw new BusinessException(401, 未登录或登录已过期); } token token.substring(7); // 解析Token校验用户 LoginUser loginUser JwtUtil.parseToken(token); UserContext.set(loginUser); return true; } }用JWT的好处不止是分布式友好你还可以在Token里塞一些常用信息比如用户ID、用户名这样每个请求进来的时候不用再去数据库查一次用户表直接解析Token就能拿到性能上有优势。5. 前端核心界面实现Vue.js怎么把云盘页面搭起来5.1 页面布局与组件设计前端部分的界面设计最核心的原则是“一眼就能看出这是个网盘”。主布局采用经典的左侧导航栏加右侧内容区结构左侧放个人空间、分享管理、回收站、设置这些菜单入口右侧顶部是路径导航、搜索框、上传按钮中间是文件列表区域。文件列表我建议用Element UI的el-table组件来做它自带的排序、多选、右键菜单功能正好匹配文件管理的需求。每一行的操作按钮放预览、下载、分享、重命名、移动、删除这几个核心操作点击之后弹出对应对话框。后端管理界面要做到能用、好用、看着专业。我常用的套路是继续用Element UI的组件库它提供了一套完整的企业级组件表格、表单、弹窗、消息提示都有现成的不用自己造轮子。整体的视觉风格以白色和蓝色为主色调这种风格最接近常见网盘产品视觉效果比较稳。5.2 前端文件上传组件的封装上传功能不只是调一个接口那么简单。前端要考虑文件选择的交互、上传进度的展示、文件类型和大小的校验、上传失败的重试机制。Element UI的el-upload组件已经封装了大部分能力但要做云盘这种业务场景还需要自己加一些逻辑。一个比较重要的点是上传前要校验文件大小。后端虽然也校验了但前端校验是为了提升用户体验如果一个文件明显超过了限制没必要让用户等上传完成再收到报错。另一个点是上传成功后要刷新文件列表让用户立刻看到新上传的文件。handleUploadSuccess(response, file) { if (response.code 200) { this.$message.success(${file.name} 上传成功); this.loadFileList(); // 重新加载文件列表 } else { this.$message.error(response.message || 上传失败); } }对于多文件批量上传前端需要用一个uploadList数组管理上传队列逐个调用上传接口同时更新每个文件的上传进度。如果某个文件失败了允许用户点击重试按钮重新上传。5.3 在线视频预览m3u8播放方案的选型视频预览是整个项目里最容易让评委眼前一亮的功能。你有两个技术路径可以选一个是上传MP4文件直接用HTML5的video标签播放另一个是支持m3u8格式的流媒体播放。MP4方案实现最简单后端把上传目录映射为静态资源路径前端给video标签的src指向文件地址就能播放。但MP4方案有两个缺点一是MP4格式默认是渐进式下载用户在浏览器里拖动进度条如果文件比较大超过1GB服务器要处理整个文件的HTTP请求容易卡顿二是现在很多视频资源都是m3u8分片格式直接放video标签里是播不了的。如果你的云盘想支持m3u8视频的在线播放前端需要引入hls.js这个库。它是目前在浏览器里播放HLS流最成熟的方案把m3u8索引文件拉下来分析里面的TS分片地址然后通过Media Source ExtensionsMSE把分片喂给video元素播放。安装hls.jsnpm install hls.js --save然后在视频预览组件里这样用template video refvideo controls autoplay stylewidth: 100%/video /template script import Hls from hls.js; export default { name: VideoPlayer, props: { videoUrl: { type: String, required: true } }, mounted() { this.playVideo(); }, methods: { playVideo() { const video this.$refs.video; if (Hls.isSupported() this.videoUrl.includes(.m3u8)) { const hls new Hls(); hls.loadSource(this.videoUrl); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () { video.play(); }); this.hls hls; } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // 兼容Safari原生播放m3u8 video.src this.videoUrl; video.play(); } else { // 普通MP4直接播放 video.src this.videoUrl; video.play(); } } }, beforeDestroy() { if (this.hls) { this.hls.destroy(); } } }; /script这段代码里有个重要的细节beforeDestroy钩子里必须调用hls.destroy()否则用户关闭预览弹窗之后hls实例还在后台拉取视频分片属于资源泄漏运行时间长了会越来越卡。这是网上很多教程里不会提的细节我在这里给同学们标出来面试官问你项目踩过哪些坑这就是一个很好的素材。5.4 前端路由和状态管理Vue Router负责前端的页面跳转云盘这种单页应用的典型路由设计是划分多个页面模块路由表大致是这样/login - 登录页/register - 注册页/home - 云盘主页文件列表/share/:shareId - 分享页通过链接访问/admin - 管理后台可选路由守卫是一个不能少的设计。用户没有登录就访问/home应该被重定向到/login页面。Vue Router提供了全局前置守卫beforeEach在每次路由跳转之前判断当前是否有登录Tokenrouter.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path /login || to.path /register) { next(); return; } if (!token) { next(/login); return; } next(); });状态管理用Vuex来维护全局的用户信息和系统状态。用户登录成功后把用户信息存到Vuex里同时持久化到localStorage这样页面刷新后用户状态也不会丢失。6. 环境配置与项目部署从零开始把项目跑起来6.1 开发环境版本选择这个项目的运行环境说简单也简单说麻烦也麻烦主要是版本兼容性问题。我按自己实际跑通的配置来推荐组件推荐版本备注JDK1.8稳定和SpringBoot 2.x绝配SpringBoot2.7.x老牌稳定资料多MySQL5.7 或 8.0都可以8.0注意驱动配置Maven3.6.x包管理工具Node.js14.x 或 16.x太高版本可能导致Vue CLI报错Vue CLI4.x 或 5.x前端脚手架Element UI2.15.xVue2配套别装成Element Plus这里有非常重要的一点SpringBoot 3.x是Java 17的版本如果你还在用JDK 8直接启动SpringBoot 3.x项目会报ClassNotFoundException之类的错误。网上报出“SpringBoot版本太高”这个搜索词的频率很高根因就是这个。从热词里就能看到有很多人在问SpringBoot版本太高的问题建议同学们直接按上面的表来配可以少踩很多坑。6.2 后端启动步骤后端项目的启动流程比较固定按照下面几步来就可以在IntelliJ IDEA里导入Maven项目等待依赖下载完成在MySQL里创建数据库CREATE DATABASE cloud_disk DEFAULT CHARACTER SET utf8mb4导入项目里的cloud_disk.sql脚本生成数据表修改application.yml里的数据库连接配置重点是用户名密码spring: datasource: url: jdbc:mysql://localhost:3306/cloud_disk?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver配置本地文件存储路径。在application.yml里加一个自定义配置项cloud: disk: upload-path: D:/cloud-disk-storage/启动CloudDiskApplication.java控制台出现Started CloudDiskApplication说明后端起来了打开浏览器访问 http://localhost:8080/api/file/list 能看到JSON数据说明接口正常如果用的是MySQL 8.0驱动类是com.mysql.cj.jdbc.DriverURL里最好加上serverTimezoneAsia/Shanghai否则会报时间时区问题这是老生常谈的坑了。6.3 前端启动步骤前端项目启动前需要先安装依赖。在项目根目录执行npm install这个过程取决于网络环境几分钟到十几分钟不等。装完之后执行npm run serveVue CLI会启动一个开发服务器默认端口是8080。这时候问题就来了前端开发服务器占用了8080后端SpringBoot也占用了8080端口冲突。解决办法有两个一是把SpringBoot的端口改成8081二是用Vue CLI提供的代理功能把前端的请求转发到后端。我强烈建议用Vue CLI的代理方案这样前端的开发体验最好不用处理跨域问题。在vue.config.js里面配置module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这样前端页面跑在3000端口所有以/api开头的请求都会被转发到后端的8080端口前端的Axios请求地址统一写成/api/file/list这种相对路径就行开发环境不需要关心跨域问题。6.4 前端打包部署的细节开发完成之后如果要部署到服务器上或者演示给别人看需要把前端构建成静态文件。执行npm run buildVue CLI会在dist目录下生成打包后的文件里面有index.html和一堆压缩后的JS、CSS文件。打包成功后把这个dist目录里的所有文件扔到Nginx的html目录下同时配置Nginx把/api开头的请求反向代理到后端的SpringBoot服务server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }注意location /里的try_files配置这个很关键。因为前端是SPA应用路由是前端自己控制的用户如果在浏览器里直接访问/home这个路径Nginx需要在文件系统里找不到对应的/home文件时统一返回index.html由前端路由来解析否则会404。这个坑非常常见“vue 打包后 布局异常”这个热词的搜索结果里很多情况都是因为try_files没配好导致的。7. 常见问题排查把我在调试中踩过的坑列给你看7.1 跨域请求报错前端页面在3000端口后端接口在8080端口浏览器默认会拦截这种跨域请求。开发环境靠Vue CLI代理解决但如果直接用Axios请求完整的后端地址http://localhost:8080就会报CORS错误。后端的跨域问题有几种解法。最简单的是加一个配置类全局开启跨域支持Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }注意allowedOriginPatterns不要写成allowedOrigins()因为allowCredentials(true)的时候allowedOrigins()是不合法的这是Spring新版本的规则网上很多旧教程里没说明这一点。7.2 文件上传后文件名乱码这个问题主要出现在Windows系统上。上传中文文件名的文件之后文件名显示为乱码原因是请求编码没有统一。在application.yml里加一行server: servlet: encoding: charset: UTF-8 force: trueforce: true的意思是强制所有HTTP请求和响应都使用UTF-8编码。数据库连接URL里也别忘了characterEncodingutf8参数两头都统一了才能保证不出乱码。7.3 MySQL连接报Public Key Retrieval is not allowed使用MySQL 8.0的时候连接数据库会报这个错误。原因是MySQL 8.0默认使用caching_sha2_password认证插件客户端首次连接时需要获取服务器的公钥做密码加密传输。解决方法是连接URL后面加一个参数jdbc:mysql://localhost:3306/cloud_disk?useSSLfalseallowPublicKeyRetrievaltrueserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue表示允许客户端自动获取服务器公钥。这个参数在开发环境是安全的生产环境建议用SSL证书替代。7.4 前端页面加载时白屏报错Cannot read property xxx of undefined这种报错十有八九是后端返回的数据结构和前端预期的不一致。排查思路是先打开浏览器开发者工具切到Network面板找到对应的请求看Response里到底返回了什么数据然后一步步对照前端代码是字段名拼错了还是某个嵌套层级为空没有做判断。我建议前端数据结构访问的时候养成一个习惯有嵌套的对象要加可选链操作符比如response.data?.list这样即使数据异常也不会白屏。7.5 视频预览时进度条能拖但画面不动这个问题的底层原因是文件上传时没有把完整的视频数据写入磁盘或者在传输过程中有数据丢失。排查步骤是先确定文件大小是否和原文件一致用MD5对比然后确认后端是否把响应头里的Content-Length设置正确。如果你的视频是MP4格式建议用工具转成H.264编码的MP4浏览器对编码格式的支持并不全面。视频播放器报“没有找到支持的视频格式和 MIME 类型”这个错误通常就是编码格式问题。部分浏览器对HEVCH.265编码的MP4支持比较差选择H.264编码通用性最好。m3u8格式则用hls.js播放效果稳定。7.6 数据库连接池连接数耗尽SpringBoot默认的数据库连接池是HikariCP默认最大连接数是10。如果前端上传大文件的请求比较多或者项目的某个接口有慢查询很容易把连接池打满后面的请求排队等待最终报连接超时。解决方案有两个第一是把最大连接数调大在application.yml里spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5第二是排查慢查询在MySQL里开启慢查询日志找出执行时间超过1秒的SQL语句通过加索引或者优化SQL来解决问题。光调大连接池不解决慢查询只是把问题延后了。7.7 磁盘空间不够用云盘系统跑一段时间之后如果一直上传大文件宿主机的磁盘很容易被撑爆。小项目可以在启动时检查磁盘剩余空间低于阈值时提示用户禁止上传。更优雅的方案是给文件存储做容量配额在用户表里加storage_quota和storage_used两个字段每次上传时检查用户空间是否还有剩余超出容量就拒绝上传。8. 毕设答辩准备这些技术点要提前想明白拿到这套源码之后不建议直接拿去做毕设交差自己一定要把核心代码的逻辑搞懂否则答辩的时候一问三不知分数会很惨。答辩老师最喜欢问的几个方向提前准备一下基本就能稳过。第一个必问的问题是文件是怎么存储的。你要能说清楚文件上传后落在服务器的哪个目录文件名怎么处理的数据库里存了什么字段以及为什么要加UUID前缀避免同名文件覆盖。这属于项目的基本盘答不上来就穿帮了。第二个高频问题是数据库表为什么这么设计。这里重点讲一下file_info表的parent_id邻接表模型是如何实现目录多级嵌套的以及逻辑删除字段del_flag怎么实现回收站功能。如果能再提一嘴索引设计上的考虑user_idparent_iddel_flag联合索引老师会认为你有数据库优化意识。第三个加分项是你自己做了什么功能扩展。源码里没有现成功能的你可以自己加一个文件搜索功能或者做一个回收站的定时清理任务加一个统计图表展示空间使用的可视化界面。这些扩展点在答辩时属于“主动加分项”表明你不只是把代码跑通了还有自己的想法在里面。对于想在毕设基础上继续扩展的同学有三个方向比较有价值第一是做秒传功能就是上传前先根据文件MD5去对比服务器上是否已有相同文件如果有就直接给用户关联一条记录思路上值得思考第二是做断点续传核心是分片存储、进度记录和唤醒机制第三是集成网盘预览能力比如播放各类音视频格式、预览文本和办公文档做的时候选一两个能带来实际体验提升的就行。9. 我在实际调试中的几点体会这套系统我在多个环境上跑通过前前后后也帮人排查了不少问题。有几个心得体会供准备上手这个项目的同学参考。第一个体会是毕设项目不在于功能多而在于每个功能都经得起问。比如“用户登录”这个功能大多数管理系统都有但如果你能做到用JWT做无状态鉴权、用拦截器统一校验、密码用BCrypt加密存储、前端路由守卫拦截未登录用户这四个细节加起来登录功能就从一个凑数的功能变成了一个有深度的功能。第二个体会是动手之前先花时间把环境配好后面会顺很多。配置JDK、MySQL、Node.js这些基础环境如果只看视频不自己操作大概率会卡在某个版本兼容问题上。我自己当初搞的时候SpringBoot 3.0刚出手头的教程还是SpringBoot 2.x的写法照着敲到一半发现注入写法变了整段代码全废掉重新看官方文档。那时候真是苦不堪言。强烈建议所有新手先按前面表格里的版本号来跑通了之后再考虑升级版本。第三个体会是学会用日志排查问题比记住代码更重要。后端日志级别的调整、前端Console面板的报错定位、SQL日志的打印配置这三个技能在调试过程中反复用到。SpringBoot里配置mybatis-plus或者MyBatis打印SQL语句的日志logging: level: com.example.clouddisk.mapper: debug开启后每个SQL语句都会打印到控制台哪个SQL执行异常一目了然。前端遇到接口返回异常先F12看Network里对应请求的状态码和响应体80%的问题靠这个就能定位到原因。做这个项目的过程其实就是一个缩小版的完整软件开发流程从数据库设计到后端接口开发再到前端页面联调最后打包部署。走完这一整个流程你对软件开发的理解会从“写过几段代码”升级到“能独立做出一个完整产品”这个收获比代码本身值钱得多。