简介面向计科、信息安全、大数据、人工智能等计算机相关专业学生的完整毕业设计项目资料包围绕Web云存储硬盘系统的设计与实现展开覆盖需求分析、概念建模、数据库设计、前后端编码、论文撰写与格式修订全过程。既适合在校学生用作大作业、课程设计或毕设参考也可帮助初学Web开发的读者了解一个完整系统从设计到落地的交付形态。压缩包共125个文件整体约127MB其中文档类以33个docx、8个doc和10个pdf为主承载毕业论文、修改意见及过程记录设计类包含23个vsdx Visio图示及pdm等建模文件用图表呈现系统结构与数据库关系另有20个png界面截图、sql数据库脚本与vue前端文件直观对应实现细节。目前已有114人学习浏览。资料中既有论文初稿与修订稿也保留了概念模型cdm/cdb、物理数据模型及系统设计图等过程性内容便于对照文档理解设计思路同时标注有修改意见、登记表等材料还原真实毕设流程适合作为课设答辩、毕设审查或初期项目立项演示的参考样本。1. 课设题「web 云存储硬盘系统」到底在做什么别把它做成网盘每年课设和大作业里「web 云存储硬盘系统」都是热门题目但很多人一上手就把它做成了「网盘」最后答辩被问两句就卡住。其实这个题目的考察点非常固定用户怎么把文件传上去、传上去之后存在哪、文件元数据怎么管理、怎么把文件分享给别人以及多用户之间怎么隔离。网盘只是它的一种可见形态真正的难点在「存储」和「权限」这两个词的落地。这篇不聊空泛的设计模式直接给一套能抄、能改、能解释清楚的实现路线后端用 Spring Boot 这类 web 框架本地磁盘或对象存储当文件仓库MySQL 管元数据表前端用 Vue 做页面交互。新手能跟着把最小系统跑起来熟手则能看到分片、秒传、防盗链这些加分项应该卡在哪。适合正在做课设、需要交完整代码和文档的同学也适合想拿一套可复现方案去横向对比的人。2. 选型与总体设计文件服务、元数据库和对象存储怎么分工做「web 云存储硬盘系统」时设计部分比实现更决定答辩成败。常见做法是先把存储选型、数据表、接口三件事定下来再写代码。这里有一个容易被忽略的点文件的「存放」和文件的「描述」是两套系统前者负责二进制流后者负责文件名、大小、上传时间、用户归属这些能被检索的信息。不建议把文件内容直接塞进数据库表除非你做的只是几十 KB 的小文本演示。2.1 三种存储选型本地磁盘、MinIO、对象存储课设该用哪个先给结论默认选本地磁盘时间充裕再考虑 MinIO 或云上对象存储。存储方式适合场景课设成本答辩里能讲的点本地磁盘单机演示、课程验收零依赖改个路径就能跑文件系统目录设计、磁盘占用统计MinIO需要对象存储 API、要展示生产架构要多跑一个服务端口和配置有额外学习量Bucket、Access Key、客户端 SDK阿里云 OSS 等已上云、有免费额度需要密钥和联网离线答辩会翻车生命周期、CDN、签名 URL如果你只有一到两周时间本地磁盘是最稳妥的。具体做法是配置一个绝对路径的存储根目录比如D:/cloud-storage/data或 Linux 下的/var/data/cloud-storage上传时把文件写进这个目录文件名用 UUID 重新生成数据库里只保存存储路径和原始文件名。MinIO 的好处是能讲「对象存储 bucket 的概念」但它本质上也是把文件落到磁盘只是多了一层 API如果老师问到生产环境怎么做你可以说「把本地存储实现换成了 MinIO SDK」代码里留一个接口即可。还有一个很多人踩过的选择用内存存储。比如把文件转成 byte[] 存到 HashMap 里演示时确实快但服务一重启文件全部丢失这是课设里的大忌。文件系统至少能保证重启后数据还在。2.2 数据表设计用户、文件元数据、分享链接三张表够不够对于课设规模三张表足够用户表、文件元数据表、分享链接表。这里给一套可以直接用的建表 SQL采用 utf8mb4 字符集。CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(64) NOT NULL UNIQUE COMMENT 登录名, password_hash VARCHAR(128) NOT NULL COMMENT BCrypt 哈希后的密码, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, deleted TINYINT DEFAULT 0 COMMENT 软删除标记 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表; CREATE TABLE file_meta ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT 归属用户做数据隔离, file_name VARCHAR(255) NOT NULL COMMENT 用户看到的原始文件名, file_size BIGINT NOT NULL COMMENT 字节数前端展示和配额用, storage_path VARCHAR(512) NOT NULL COMMENT 相对存储根目录的路径, file_md5 VARCHAR(64) DEFAULT NULL COMMENT 上传时算的 MD5做秒传和去重, parent_id BIGINT DEFAULT 0 COMMENT 父目录ID0 表示根目录, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, deleted TINYINT DEFAULT 0 COMMENT 软删除回收站依赖这个字段, KEY idx_user_parent (user_id, parent_id), KEY idx_md5 (file_md5) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT文件元数据表; CREATE TABLE share_link ( id BIGINT PRIMARY KEY AUTO_INCREMENT, file_id BIGINT NOT NULL COMMENT 哪个文件, token VARCHAR(64) NOT NULL UNIQUE COMMENT 分享码网址里那个随机串, expire_at DATETIME NOT NULL COMMENT 过期时间永不过期给个很大的日期, created_by BIGINT NOT NULL COMMENT 创建人, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT分享链接表;注意几个设计决策第一file_meta里存storage_path而不是全路径这样换存储根目录不用改库第二file_md5加上索引后面做「秒传」就是一条 SELECT 的事第三parent_id用于 文件树/目录结构很多人把目录也当文件存用is_dir字段区分但课设只做「文件夹 文件列表」的话给每条记录一个父目录 ID 就够了。用户和文件之间有user_id外键逻辑但不建议物理外键课设项目删数据时物理外键会带来一堆互斥问题。2.3 接口与鉴权RESTful 路径、状态码和 JWT 拦截器接口设计不要太花哨按资源风格来就好。下面这份接口清单是我经常用的覆盖了课设的必做点上传、列表、下载、删除、分享。方法路径说明关键参数POST/api/auth/register注册username, passwordPOST/api/auth/login登录返回 JWTusername, passwordPOST/api/files/upload上传文件可选 parentIdmultipart 表单GET/api/files/list列出当前目录文件parentId, page, sizeGET/api/files/download/{id}下载文件无DELETE/api/files/{id}删除文件软删除无POST/api/share生成分享链接fileId, expireAt, password(可选)GET/api/share/{token}通过分享码访问无GET/api/share/{token}/download分享下载无鉴权用 JWT 而不是 Session原因很简单前后端分离后Session 要处理 CORS 携带 Cookie 的复杂配置JWT 只要在请求头里带Authorization: Bearer xxx后端写一个拦截器统一校验即可。登录接口返回 token前端存到 localStorage每次请求由 axios 拦截器自动添加到 header。拦截器里放行/api/auth/**和/api/share/**其余接口都要求有效 token这就是最基础的用户数据隔离。3. 手写一个可运行的核心上传下载与分片合并的完整链路课设项目的核心链路只有一条文件从浏览器到服务器再从服务器回浏览器。中间涉及 MultipartFile 解析、磁盘写入、数据库记录、下载响应头设置。这一章会给出可以直接搬过去的最小代码并解释每个参数为什么这么设。3.1 Spring Boot 上传最小链路MultipartFile 到本地磁盘假设你已经建好了 Spring Boot 项目并引入spring-boot-starter-web用下面的 Controller 加上一个存储服务类就能跑通第一个上传接口。RestController RequestMapping(/api/files) public class FileController { private final FileStorageService storageService; public FileController(FileStorageService storageService) { this.storageService storageService; } PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file, RequestParam(value parentId, required false, defaultValue 0) Long parentId) { if (file.isEmpty()) { return Result.error(文件不能为空); } FileMeta meta storageService.store(file, parentId); return Result.ok(meta); } }MultipartFile是 Spring 封装的上传文件对象。需要注意Spring Boot 默认会用内存或临时目录承接上传流文件超过阈值后自动落盘所以业务代码里不需要手动开流读取直接交给transferTo就能把临时文件移动或复制到目标位置。parentId是可选的默认 0 表示根目录。下面看存储服务实现Service public class FileStorageService { private final Path storageRoot Paths.get( System.getProperty(cloud.storage.root, /data/cloud-storage)); public FileMeta store(MultipartFile file, Long parentId) { String originalName file.getOriginalFilename(); String ext StringUtils.getFilenameExtension(originalName); String storedName UUID.randomUUID() . ext; Path target storageRoot.resolve(storedName); try { Files.createDirectories(storageRoot); file.transferTo(target); } catch (IOException e) { throw new BusinessException(文件写入失败: e.getMessage()); } FileMeta meta new FileMeta(); meta.setFileName(originalName); meta.setFileSize(file.getSize()); meta.setStoragePath(storedName); meta.setParentId(parentId); // 这里调用 mapper 插入数据库省略 return meta; } }核心逻辑把原始文件名和扩展名拆开用 UUID 生成存储名避免中文文件名、重名文件导致的路径冲突。storageRoot从系统属性读取默认值是/data/cloud-storage。这里有个血泪经验不要用相对路径./data。如果你在 IDE 里启动项目工作目录是项目根目录相对路径没问题但如果部署时用 jar 包启动工作目录变成了 jar 所在目录路径一变你上传的文件会出现在意想不到的地方而且服务重启后容易找不到。使用绝对路径并通过application.yml里的cloud.storage.root配置覆盖才是可复现的。application.yml里两个参数必须显式设置spring: servlet: multipart: max-file-size: 100MB max-request-size: 200MB默认最大上传文件只有 1MB不调这个配置传一个稍大的 PPT 就会报MaxUploadSizeExceededException。max-file-size限制单个文件max-request-size限制一次请求里的全部内容总和。做课设这两个参数通常调到 100MB/200MB同时要确认操作系统的/tmp目录有足够空间因为 Spring 处理大文件时会在临时目录写中间文件。3.2 大文件分片上传前端切片、后端合并与并发控制如果你只做到单文件上传答辩时老师很可能追问文件超过 100MB 怎么办答案用分片。分片思路是前端把文件切块逐个上传后端收齐后合并。前端核心代码const CHUNK_SIZE 5 * 1024 * 1024; // 5MB 分片避免请求过多 const file document.getElementById(fileInput).files[0]; const totalChunks Math.ceil(file.size / CHUNK_SIZE); async function uploadChunks() { for (let i 0; i totalChunks; i) { const start i * CHUNK_SIZE; const chunk file.slice(start, start CHUNK_SIZE); const formData new FormData(); formData.append(chunk, chunk); formData.append(index, i.toString()); formData.append(total, totalChunks.toString()); formData.append(fileMd5, fileMd5); // 上传前计算整个文件的 MD5 await axios.post(/api/files/chunk, formData); } // 全部完成后通知后端合并 await axios.post(/api/files/merge, { fileName: file.name, fileSize: file.size, fileMd5: fileMd5 }); }分片大小 5MB 是一个平衡点分片越小请求越多容易触发浏览器并发连接限制分片越大又失去分片意义。每个分片带index和total后端用这些信息判断是否收齐。fileMd5是整个文件的 MD5有两个用途作为分片临时目录名以及做最后的秒传判断素材。MD5 计算可以用 SparkMD5 库在文件选择后异步算几 GB 文件可能会卡几秒建议放到 Web Worker 里。后端接收分片的逻辑PostMapping(/chunk) public Result receiveChunk(RequestParam(chunk) MultipartFile chunk, RequestParam(index) int index, RequestParam(total) int total, RequestParam(fileMd5) String fileMd5) throws IOException { Path chunkDir storageRoot.resolve(chunks_ fileMd5); Files.createDirectories(chunkDir); chunk.transferTo(chunkDir.resolve(index .part)); long uploaded Files.list(chunkDir).count(); if (uploaded total) { return Result.ok(chunk_ready); } return Result.ok(chunk_ok); } PostMapping(/merge) public Result merge(RequestBody MergeRequest request) throws IOException { Path chunkDir storageRoot.resolve(chunks_ request.getFileMd5()); Path mergedFile storageRoot.resolve(UUID.randomUUID() .tmp); try (OutputStream out Files.newOutputStream(mergedFile)) { for (int i 0; i request.getTotal(); i) { Files.copy(chunkDir.resolve(i .part), out); } } // 合并完成删除分片目录写入文件元数据 FileMeta meta fileMetaService.createFromMergedFile(request, mergedFile); return Result.ok(meta); }合并时按index顺序把.part文件依次写入同一个输出流。这里有个「后端要不要做并发控制」的问题如果前端串行上传后端不需要额外加锁因为同一时刻只有一个分片写入。如果你为了让上传更快而并行上传分片后端就要用分布式锁或数据库唯一索引来防止分片丢失。课设做串行上传足够答辩时能说出「串行保证顺序并发需要额外处理幂等」这句话就够了。合并完成后mergedFile是临时文件名最终元数据里的storage_path应该再替换成 UUID 命名的正式路径。合并后立刻把分片目录删掉否则一次大文件上传会留下几十个临时文件。3.3 下载响应与分享链接Content-Disposition 和参数签名下载接口比上传简单但两个细节经常翻车中文文件名乱码、下载被第三方盗链。前者用Content-Disposition处理后者用签名参数。GetMapping(/download/{id}) public ResponseEntityResource download(PathVariable Long id) throws Exception { FileMeta meta fileMetaService.getById(id); Path path storageRoot.resolve(meta.getStoragePath()); Resource resource new FileSystemResource(path); String encoded URLEncoder.encode(meta.getFileName(), StandardCharsets.UTF_8) .replace(, %20); return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, attachment; filename*UTF-8 encoded) .contentType(MediaType.APPLICATION_OCTET_STREAM) .contentLength(meta.getFileSize()) .body(resource); }filename*UTF-8是 RFC 5987 标准写法浏览器会正确解码中文文件名。如果你只用filename文件名Windows 浏览器可能显示乱码。URLEncoder.encode之后要把替换成%20因为空格在路径里应该是%20而不是。分享链接的签名做法生成分享记录时把文件 ID、过期时间戳、随机 token 组合后存库访问时后端校验 token 是否存在、是否过期。不需要对 URL 本身做复杂加密因为 token 本身就是随机字符串。加上过期时间分享接口就完整了。前端拿到 token 后拼成/api/share/{token}再用 qrcode 插件生成二维码扫码后可以用手机访问下载页。4. 前端与交互Vue 3 页面、上传进度条和分享链接的实现后端把接口交出后前端页面的体验决定了课设的完成度。老师验收时不会只看接口他们会打开页面上传文件、刷新、下载、分享走一遍完整流程。所以前端最少要有文件列表、上传按钮、进度条、删除和分享入口。4.1 页面骨架表格 文件夹路径别用花哨的卡片流文件管理类的页面推荐用表格而不是卡片瀑布流。原因文件列表需要展示文件名、大小、上传时间、操作按钮表格天然适合这种结构化信息卡片流在文件数量多时会让页面冗长。给每个目录增加一个「在当前文件夹上传」的功能就实现了文件夹概念。数据来源是/api/files/list?parentIdxxx接口返回当前目录下的文件和子目录标记。我一般会在file_meta里加一个is_dir字段或者用parent_id递归查询前端渲染时对目录显示「进入」按钮对文件显示「下载/删除/分享」按钮。刷新保持目录状态用vue-router的 query 参数比如/list?parentId123这样刷新页面不会退回根目录。如果不用路由用全局变量存currentParentId也能跑但刷新就丢了体验会打折。4.2 上传进度条与取消请求onUploadProgress AbortController上传进度是云存储项目的脸面。axios 提供了onUploadProgress它能拿到浏览器底层上报的loaded和total不需要后端额外配合。const controller new AbortController(); async function uploadFile(file) { const formData new FormData(); formData.append(file, file); formData.append(parentId, currentParentId.value.toString()); try { await axios.post(/api/files/upload, formData, { timeout: 0, // 大文件上传不能走默认超时 onUploadProgress: (event) { if (event.total) { progress.value Math.round((event.loaded / event.total) * 100); } }, signal: controller.signal }); } catch (error) { if (axios.isCancel(error)) { console.log(上传已取消); } } } function cancelUpload() { controller.abort(); }必须设置timeout: 0因为 axios 默认 0 是不超时但如果你在创建实例时设置了默认 10 秒超时大文件上传必挂。onUploadProgress的event.total是当前请求体的总字节数包含 multipart 的头部和文件所以进度到 100% 时不代表服务器已经写完只代表浏览器把数据发完了。要更精确可以等后端返回后再把进度固定到 100%。4.3 分享二维码与有效期后端校验比前端更可靠分享功能的前端很简单点击「分享」按钮弹出对话框选择有效期1 天 / 7 天 / 永久调用/api/share拿到 token 后生成二维码。这个接口如果只做前端校验用户可以手动改系统时间绕过所以有效期判断必须放在后端。后端拿到分享记录后用文件 ID 拼接一个访问地址前端用qrcode库渲染import QRCode from qrcode; QRCode.toCanvas(canvasRef.value, shareUrl, { width: 200, margin: 2, errorCorrectionLevel: M });errorCorrectionLevel: M是二维码容错级别M 级别足够扫描同时不会让二维码太密。分享出去的页面要隐藏文件列表只展示一个下载按钮并且后端对/api/share/{token}的下载接口做独立校验不要求登录 token只校验分享 token 和过期时间。这样才真正实现了「不登录也能下载」。5. 云存储硬盘系统避坑清单五个让课设翻车的典型问题这一章集中写我在帮别人调这个课设时遇到的高频问题。每条都是「现象 → 原因 → 解决」的套路你可以直接对照自己的项目排查。1. 上传稍大的文件就报 413 或 500。现象超过默认限制就报MaxUploadSizeExceededException或者请求直接超时。原因Spring Boot 默认max-file-size只有 1MB同时 Nginx 默认client_max_body_size是 1MB两者任意一个没调都会限制上传。解决后端在application.yml里把max-file-size和max-request-size调大如果用了 Nginx 反向代理在 server 块里加上client_max_body_size 200m;。注意max-request-size要大于等于max-file-size否则多个文件同时上传时总请求体超限。2. 下载时中文文件名全变%E4%B8%AD%E6%96%87或乱码。现象浏览器下载的附件名是百分号编码或者干脆是乱码。原因前端拿到下载链接直接window.location.href url没有经过任何编码处理或者后端只写了filename中文而没有filename*。解决后端用我上面给出的filename*UTF-8写法前端下载时用 axios 以 blob 方式请求再从响应头里解析文件名。后者更稳因为 blob 方式不会触发浏览器直接打开 PDF、图片文件。3. 前后端分离后接口请求被浏览器拦截。现象控制台报CORS policy错误请求发出去了但响应被浏览器拦下。原因前端端口比如 5173和后端端口比如 8080不一致形成了跨域。解决后端配置一个CorsFilter允许前端 origin 和所有常用方法。注意allowedOrigins(*)和allowCredentials(true)不能同时用浏览器不允许这样的组合。开发环境用http://localhost:5173生产环境换成实际域名。Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(http://localhost:5173); config.addAllowedMethod(*); config.addAllowedHeader(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); }4. 重启后文件丢失或路径找不到。现象上传成功但重启服务后列表里的文件下载全部 404或者上传时直接报NoSuchFileException。原因使用了相对路径比如new File(upload/)它在 IDE 里工作正常但换到 jar 包运行时目录变成系统临时目录或者用了CrossOrigin但没配置实际文件存储路径。解决把存储根目录配置成绝对路径写入application.yml启动时打印日志输出路径和是否存在。前端能忍受但要接受「项目运行目录变化导致文件找不到」这类翻车必须在开发时就避开。5. 删除文件后数据库记录还在或者文件被删但记录没删。现象删除接口返回成功后刷新列表文件还在或者列表没了但下载接口还能从磁盘把文件读出来。原因删除时先删了文件然后数据库操作失败文件没了但记录还在或者反过来。数据库操作可以放在事务里但文件系统操作无法回滚所以跨系统的数据一致性是课设里最大的黑匣子。建议方案删文件时先在数据库把记录标记为deleted1这一步是事务保护的然后异步删除磁盘文件并由一个定时任务定期扫描deleted1且落盘超过 1 天的记录真正删文件并把数据库记录物理删除。这样用户看到的「删除」是软删除后台能保证最终一致。6. 让答辩更硬的进阶用法秒传、软删除和并发压测这一章讲三个能让答辩加分的小动作它们都不需要大量代码但能明显体现你对「web 云存储硬盘系统」主题的理解深度。6.1 秒传用已有 MD5 元数据跳过文件写入上传接口在接收文件前先按file_md5查数据库如果当前用户已经上传过同一 MD5 的文件并且原始文件还在磁盘上就直接返回一条新的元数据记录不写磁盘。实现只需在上传接口入口加一段逻辑if (fileMd5 ! null) { FileMeta existing fileMetaMapper.findByMd5(fileMd5); if (existing ! null Files.exists(storageRoot.resolve(existing.getStoragePath()))) { return Result.ok(FileMeta.copyForUser(existing, currentUserId)); } }注意copyForUser要生成新的记录不能直接返回别人的文件引用否则会导致多用户间 ID 混乱。秒传算是「文件去重」的简化版答辩时能解释清楚这个分支老师会觉得你不只是写了 CRUD。6.2 软删除与回收站回收站是一个不到 100 行但性价比极高的功能。在file_meta里已经有deleted字段列表接口只查deleted0删除操作改为UPDATE file_meta SET deleted1 WHERE id#{id}回收站列表查deleted1恢复操作再改回deleted0。真正的磁盘删除交给定时任务。这样答辩时你可以讲「文件数据保留期策略」比直接硬删高级很多。6.3 用 curl 脚本做并发压测验证课设文档里能放几张压测截图是让整套方案落地的有力证据。不需要用 JMeter一个 bash 循环就能模拟并发上传for i in {1..20}; do curl -s -F file./test_$i.txt \ -H Authorization: Bearer $TOKEN \ http://localhost:8080/api/files/upload done wait echo 并发上传完成后台运行 20 个并发请求观察后端日志里有没有线程阻塞、文件是否有损耗。更严谨的验证是上传后下载回来计算两份文件的 MD5 做对比md5sum original.txt downloaded.txt。这个结果可以直接放进实验报告说明系统在并发场景下没有产生文件损坏。我自己的习惯是每次改完存储逻辑都跑一遍这个脚本防的是 Nginx 或 Tomcat 连接数限制这种玄学问题。希望这些经验能让你少走一段弯路把时间花在真正能展示能力的功能上。本文还有配套的精品资源点击获取