SpringBoot+Vue+MySQL档案管理系统设计与实现：前后端分离毕业设计完整指南

想做档案管理系统作为毕业设计、课程设计的人，多半是看中了它业务边界清晰、技术栈通用、演示效果好这几点。项目标题里直接把“SpringBoot + Vue + Java + MySQL”写清楚，说明这是一个典型的前后端分离项目：后端用 SpringBoot 提供 REST 接口，前端用 Vue 做页面交互，数据落在 MySQL 里。档案管理本身覆盖了用户登录、分类维护、档案录入、借阅审批、查询统计等常见流程，既不像电商系统那样复杂度高，又能把增删改查、权限控制、文件上传这些核心技能点全部串起来，非常适合拿来练手，也适合作为毕设或课设选题。

这篇文章就围绕这套系统的设计思路、表结构、后端接口、前端页面、环境搭建和常见坑位做一次完整拆解。如果你正准备答辩，或者想完整跑通一个全栈项目，这篇内容基本可以当路线图用。我会把我实际开发中觉得重要的细节都写出来，有些是文档里没有、只有踩过坑才明白的。

1. 系统整体设计与技术选型思路

1.1 为什么是 SpringBoot + Vue 而不是其他组合

选技术栈不能只看热闹，要看你拿来干什么。SpringBoot 的核心价值是“约定优于配置”，它会帮你内置 Tomcat、自动装配数据源、提供大量 starter 依赖，让一个能跑起来的后端服务在半小时内成型。对课设、毕设来说，时间是硬成本，SpringBoot 可以把很多基建问题直接抹掉，让你把精力放在业务逻辑上。

Vue 的优势在于组件化开发和响应式数据绑定。档案列表、弹窗表单、分页器这些界面元素，在 Vue 里都可以拆成独立组件，数据源变了页面跟着变，不用像 jQuery 时代那样手动操作 DOM。配合 Element UI 或 Element Plus 组件库，表格、表单、上传、日期选择器几乎是开箱即用，做出来的界面也够整洁。

MySQL 就更不需要多解释，它是国内教学场景和学生项目里最普及的数据库，网上资料多、工具支持全、自己电脑上安装调试也方便。用这套组合还有一个实际好处：毕业后面试聊项目，SpringBoot、Vue、MySQL 这些关键词和用人单位的日常开发是重叠的，你写在简历里也不会让人觉得是“玩具技术”。

1.2 前后端分离架构与分层职责

前后端分离并不是把代码拆成两个文件夹就算完事，它要解决的是“谁负责什么”的问题。

前端只负责页面渲染和用户交互，通过 HTTP 请求跟后端要数据，拿到 JSON 之后再绑定到页面；后端只负责业务逻辑、数据校验和数据库读写，不关心页面是怎么画的。这样一来，前端开发可以和后端开发并行推进，也方便把接口文档先定好。

在实际项目中，后端一般分成四层：

• Controller 层：接收前端请求，做参数校验，调用业务层，把结果包装成统一格式返回。
• Service 层：写核心业务逻辑，比如借档时检查档案状态、归还时更新状态。
• Mapper 层：操作数据库，简单的单表查询直接用 MyBatis-Plus 的方法，复杂统计写 SQL。
• Entity 层：对应数据库表的实体类。

这样的分层最大的好处是可替换性。如果以后想把数据库从 MySQL 换掉，理论上只动 Mapper 层；如果想把业务规则调整，只改 Service 层。答辩时老师问起“你这个项目架构怎么理解”，拿这套分层回答，基本能说明你在按真实工程习惯做事。

1.3 核心功能模块划分与演示重点

一个标准的档案管理系统，功能模块建议这样划分：

• 登录与个人中心：用户输入账号密码，后端校验身份，返回令牌；前端跳转到主页。
• 用户管理：管理员维护用户账号、角色、部门信息，支持新增、编辑、禁用。
• 档案分类管理：树形结构展示分类，比如“人事档案”“合同档案”“技术资料”一级分类下再挂二级。
• 档案信息管理：录入档案编号、标题、分类、存放位置、电子附件；支持条件检索、分页展示、详情查看。
• 借阅管理：用户申请借阅，管理员审批，记录借出时间、归还时间，处理逾期。
• 操作日志与数据统计：记录谁在什么时间操作了什么；统计各分类档案数量，为图表展示提供数据。

这套模块把日常办公中“档案从入到出”的完整链路覆盖了。演示的时候，最好从登录开始，顺着“新建分类 → 上传档案 → 申请借阅 → 审批借出 → 归还归档”这条流程走一遍，评委一眼就能看懂系统在解决什么问题。

2. 数据库设计与核心表结构

2.1 用户、角色与权限相关表

档案管理系统虽然功能不算特别复杂，但权限还是必须做的。不同角色看到的功能菜单、操作的按钮都应该有区别，否则“管理员”和“普通员工”就没有区分度。

用户表 sys_user 的基本字段：

• id：主键，自增。
• username：登录账号，唯一。
• password：加密后的密码，不要存明文。
• real_name：真实姓名。
• dept：所属部门。
• status：账号状态，0 禁用 1 启用。
• create_time、update_time：创建和更新时间。

角色表 sys_role 可以只存 id、role_code、role_name。管理员是 ADMIN，普通员工是 USER。用户和角色是多对多关系，所以需要中间表 sys_user_role，通过 user_id 和 role_id 关联。如果项目想细化到“某个用户能不能导出数据”，还可以加菜单表 sys_menu 和角色菜单中间表，不过课设阶段做到用户-角色级别已经够用。

这里有一个我建议关注的设计点：密码字段用 BCrypt 加密。网上很多简单项目直接明文存密码，答辩时如果老师问到安全问题，会很难看。Spring Security 或者单独的 BCrypt 工具类都能处理，代码量其实很少。

2.2 档案信息、分类与借阅表设计

档案信息表 archive_info 是核心业务表，字段可以这样设计：

• id：主键。
• archive_no：档案编号，建议唯一。
• title：档案标题。
• category_id：关联分类表。
• file_type：文件类型，比如 PDF、DOCX、图片。
• storage_location：存放位置，比如档案柜编号。
• file_path：电子文件存储路径。
• status：档案状态，0在库 1借出 2已归还待上架。
• upload_user_id：上传人。
• remark：备注。
• create_time：入库时间。

档案分类表 archive_category 用父子关系表达层级：id、parent_id、category_name、sort_order。parent_id 为 0 表示一级分类。查询时可以先查一级分类，再逐层查子分类，前端用树形表格或者下拉树展示。

借阅表 archive_borrow 记录借阅过程：

• id、archive_id、borrow_user_id、apply_time、reason。
• approve_user_id：审批人。
• borrow_time：实际借出时间。
• return_time：预计归还时间。
• actual_return_time：实际归还时间。
• status：0 待审批，1 借出中，2 已归还，3 已驳回。

这样设计的好处是职责单一，档案表只关心“我目前在不在库”，借阅表只关心“借用过程走到哪一步”。状态变化靠业务逻辑把这两张表串起来。

2.3 外键、索引与逻辑删除的取舍

很多学生项目会为了“看起来规范”强行在数据库里加物理外键。我的建议是：表结构设计时画出外键关系，但建表时不一定加物理外键约束。

物理外键的限制很多，比如插入子表时外键字段必须存在，删除父表时会被约束卡住。实际开发里大家更倾向于用逻辑外键，也就是在代码层面保证关联字段有效，数据库层面只建立普通索引加速查询。原因很简单：高并发写入时物理外键会带来额外检查开销，而且遇到需要“软删除”的业务场景特别别扭。

关于软删除，可以在每张核心表上加一个 deleted 字段，默认 0，删除时更新为 1，查询时所有 SQL 自动带条件 deleted = 0。MyBatis-Plus 里配置逻辑删除后，这个条件会自动拼上。这个设计在答辩里也很加分，因为它是真实项目里常用且教材里很少强调的技巧。

索引方面，archive_info 表的 archive_no 要建唯一索引，category_id、status 要建普通索引。借阅表的 archive_id、status 也建议建索引。查询量不大的时候索引作用不明显，但你要在答辩时能说出“哪条查询快、为什么快”，就有了区分度。

3. SpringBoot 后端核心功能实现

3.1 项目初始化与依赖配置

创建一个 SpringBoot 后端项目，使用 Maven 管理依赖比较省心。Java 版本建议用 JDK8 或 JDK11，SpringBoot 用 2.7.x，稳定且网上问题方案最多。如果非要追新用 SpringBoot 3.x，那要求 JDK17，有些历史教程就不完全适用了，调试成本会高不少。

pom.xml 里的关键依赖大概有这些：

• spring-boot-starter-web：提供 Web 能力和内置 Tomcat。
• mybatis-plus-boot-starter：简化数据库单表操作。
• mysql-connector-j / mysql-connector-java：MySQL 驱动。
• lombok：减少实体类的 getter、setter 代码。
• hutool-all：工具类库，里面有 JWT、加密、文件处理等工具，适合省事。
• spring-boot-starter-validation：参数校验注解。

配置文件 application.yml 里最核心的是数据源配置：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0 configuration: map-underscore-to-camel-case: true

3.2 统一返回结果与登录鉴权

前后端交互一定不要有的没的返回一堆乱七八糟格式。我一般定义一个 Result 类，统一包 code、message、data 三个字段。code 为 200 表示成功，401 表示未登录，500 表示业务失败。

@Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> ok(T data) { Result<T> r = new Result<>(); r.setCode(200); r.setMessage("操作成功"); r.setData(data); return r; } public static <T> Result<T> error(Integer code, String message) { Result<T> r = new Result<>(); r.setCode(code); r.setMessage(message); return r; } }

登录接口的逻辑很简单：前端传 username 和 password，后端用 BCrypt 校验密码，校验通过后用 JWT 生成 token，把用户 id、角色编码放进去，token 返回给前端。之后前端每次请求都在 Header 里带上 token，后端拦截器解析 token 确认身份。

String token = JWT.create() .withClaim("userId", user.getId()) .withClaim("roleCode", role.getRoleCode()) .withExpiresAt(new Date(System.currentTimeMillis() + 2 * 60 * 60 * 1000)) .sign(Algorithm.HMAC256("你的签名密钥"));

Token 过期时间根据项目需要调整，演示项目设成 2 小时或 24 小时都行。拦截器里要注意放行登录接口、验证码接口，不然会出现自己打自己接口都 401 的乌龙。

3.3 档案管理的增删改查与文件上传

用 MyBatis-Plus 写单表 CRUD 会非常轻松，继承 IService 接口以后，list、page、getById、save、updateById、removeById 都现成。档案管理里比较需要花心思的是档案编号生成和文件上传。

档案编号建议按“分类前缀 + 年月日 + 随机数或者序号”生成，比如 HT20250601001。前端录入时不用用户手填，后端在新增接口里自动生成。这样可以避免用户乱填导致编号重复，也显得系统设计更严谨。

文件上传的 Controller 大概是这个样子：

@PostMapping("/upload") public Result<String> upload(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return Result.error(500, "上传文件不能为空"); } String originalFilename = file.getOriginalFilename(); String ext = originalFilename.substring(originalFilename.lastIndexOf(".")); List<String> allowExt = Arrays.asList(".pdf", ".doc", ".docx", ".jpg", ".png"); if (!allowExt.contains(ext.toLowerCase())) { return Result.error(500, "不支持的文件类型"); } String fileName = UUID.randomUUID().toString().replace("-", "") + ext; String dir = System.getProperty("user.dir") + "/upload/"; File dirFile = new File(dir); if (!dirFile.exists()) { dirFile.mkdirs(); } file.transferTo(new File(dir + fileName)); return Result.ok("/upload/" + fileName); }

上传文件时会遇到两个常见问题：一是后端默认限制单文件大小为 1MB，需要配置 spring.servlet.multipart.max-file-size 和 max-request-size；二是 Windows 和 Linux 路径分隔符不同，最好用 File.separator 拼接路径，不要硬编码斜杠。

新增档案的时候，记得把表单数据和附件路径放在同一个事务里：档案基本信息入库、文件路径字段保存、同时记录一条操作日志。如果文件上传成功但数据库写入失败，文件会变成垃圾数据，所以可以先保存数据库，失败再清理文件，或者定时清理无用文件。毕设阶段不用做太复杂，但至少心里要有这根弦。

3.4 借阅与归还流程的并发问题

借阅流程很容易出现一个隐患：两个人同时申请借同一份档案，如果代码只做了“先查状态，再更新状态”，在高并发下可能两个请求都查到“在库”，然后都借出成功。单机演示一般不会触发这个问题，但答辩时老师可能会问，所以你最好做点保护。

最简单可行的方案是给记录加 optimistic lock。archive_info 表增加 version 字段，更新时带上 where version = 当前值，更新成功后 version 加 1。两并发请求同时读到 version=1，第一个更新成功以后 version 变为 2，第二个再更新时发现 version 不匹配，更新行数为 0，就知道冲突了，直接提示用户“该档案已被借出”。

这段逻辑在 Service 层用一行 update 也能实现，更贴近实际工程：

UPDATE archive_info SET status = 1, version = version + 1 WHERE id = #{id} AND status = 0

如果影响行数为 1，说明抢占成功；如果为 0，说明已被别人借走。这套逻辑不需要引入 Redis 锁或分布式锁，对毕设项目刚刚好，又能展示你对并发问题的思考。

4. Vue 前端页面设计与联调实现

4.1 项目结构与路由规划

前端部分我会推荐 Vue2 配合 Element UI，原因是课设、毕设的参考代码和踩坑文章绝大多数基于这套组合，遇到问题很容易搜到答案。Vue3 当然更时髦，但如果你是第一次写完整前端，光组合式 API 和 Element Plus 的一些差异就够你折腾一阵子。

前端项目结构可以这样划分：

• src/api：存放所有接口请求方法。
• src/router：路由配置。
• src/store：用户信息、菜单状态。
• src/views：页面级组件，如 login、layout、user、category、archive、borrow、statistics。
• src/components：局部复用组件。
• src/utils：axios 封装、工具函数。

路由配置里，登录页单独一条，其他页面都放在 Layout 布局下，通过嵌套路由渲染侧边栏区域。顺便设置 404 页面，否则路径写错的时候页面白屏会很尴尬。

4.2 Axios 封装与登录状态保持

Axios 封装是所有接口请求的基础，也是 Vue 项目里最容易出问题的环节。我建议把 baseURL 设置为 /api，开发时通过转发指向后端 8080 端口，部署时再统一调整。拦截器里主要做两件事：请求发出前把 token 塞进 Header；响应回来后判断 code，如果不是 200 就统一弹错误信息。

import axios from 'axios' const service = axios.create({ baseURL: '/api', timeout: 10000 }) service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = token } return config }) service.interceptors.response.use(response => { const res = response.data if (res.code === 401) { localStorage.removeItem('token') window.location.href = '/login' return Promise.reject(new Error('未登录或登录已过期')) } if (res.code !== 200) { return Promise.reject(new Error(res.message)) } return res })

开发环境跨域问题，最简单的方式是在 vue.config.js 里配置代理：

devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } }

配了代理，前端里就不要趁手写完整的 http://localhost:8080 地址了，统一走相对路径。不配代理也不允许跨域的话，只能在后端加 CORS 配置，但有时候还会因为 Options 请求拦截器没放行，出现“预检请求失败”，代理方案可以完全绕开这种问题。

4.3 路由守卫与菜单权限控制

路由守卫的作用是防止未登录用户直接敲 URL 进入系统内部页面。每次路由跳转前检查 localStorage 里的 token 是否存在，没有就重定向到登录页。

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.path === '/login') { next() } else if (!token) { next('/login') } else { next() } })

如果想让按钮级的权限也做起来，可以在登录的时候把当前用户的角色编码存到 store 里，页面上用 v-if 判断。比如导出按钮只对 ADMIN 显示，普通 USER 看不到。用指令封装一下会更优雅，但课设里直接用 v-if 也不丢分，前提是你能把思路讲清楚。

4.4 档案上传与表格联动要点

档案录入表单里，文件上传建议单独先传，拿到后端返回的路径以后，再把表单数据一起提交。不要试图把文件塞进同一个 JSON 请求里，那样既难调格式也会让代码变得复杂。Element UI 的 el-upload 组件配置 action 指向后端上传接口，上传成功后的 response 里有文件路径，把它 hidden 放在表单对象里即可。

表格页的常见组合是“搜索条件区 + 表格 + 分页”。搜索时把关键词、分类、状态传给后端，后端返回分页对象，前端把 total 和 records 绑定到组件上。这里有一个体验细节：点击搜索按钮后记得把当前页码重置为 1，不然你在第 5 页搜索，结果只有 10 条，页面还停留在第 5 页就没数据了。

5. 项目环境搭建、运行与部署

5.1 本地开发环境准备

开发前先把环境统一好，能省掉很多不可名状的报错。我个人的推荐组合是：

• JDK 1.8 或 11。
• MySQL 8.0。
• Node 14 或 16 版本，Vue2 项目的 webpack 版本对高版本 Node 不一定兼容，装个 nvm 切版本比较稳。
• Maven 3.6.x 以上。
• IDEA，前端部分也可以直接用 IDEA，装好 Vue 插件就能写。

数据库连接方面，MySQL 8 的驱动类名是 com.mysql.cj.jdbc.Driver，连接地址最好带上 serverTimezone=Asia/Shanghai，不然时区报错能让你怀疑人生。建库时统一用 utf8mb4 字符集，这样中文和 emoji 都能存，虽然系统里用不上 emoji，但这个设置属于避免坑的常规操作。

5.2 数据库初始化与后端启动步骤

拿到源码以后，一般会看到 sql 目录下有个初始化脚本。不要直接在命令行里茫茫多复制粘贴，直接用一个支持执行 SQL 脚本的工具，把整个 .sql 文件跑一遍。执行完后重点检查几个细节：有没有创建数据库 archive_db，有没有自动导入初始管理员账号，所有表数量是不是符合预期。

启动后端前，改好 application.yml 里的数据库账号密码。如果你本机 MySQL 的端口不是 3306，连接地址也要同步改。启动后控制台出现“Tomcat started on port 8080”就是成功，可以先用浏览器访问一下后端地址，出现错误页或者统一返回结果说明服务已经活了。接手一个项目时，第一步务必先跑通，再谈优化和开发新功能。

5.3 npm 依赖安装与前后端联调

前端启动前先 npm install 安装依赖。这个过程偶尔会卡在 node-sass 或某个包上，解决办法通常是删除 node_modules 和 package-lock.json，再重新安装，或者切换 Node 版本。装好之后执行 npm run serve，前端默认在 8081 端口跑起来。

联调时最直接能证明前后端通了的操作是：打开页面登录一次。如果登录成功，说明代理配置、接口地址、数据库连接、密码校验这一整条链路都是好的。如果卡住，就打开浏览器开发者工具看 Network 面板，请求是发出去了还是直接红字报错，一眼就能判断问题出在前端还是后端。

5.4 打包部署的两种常见方式

课设和毕设一般不需要真正部署到云服务器，但准备一套打包方案会让答辩更有说服力。第一种方式是后端 Maven 打包，前端也打包，把前端 dist 目录拷贝到后端 static 目录下，由 SpringBoot 统一提供服务，适合一台服务器本地演示。第二种方式是后端和前端分开部署，后端跑在 8080，前端用 Nginx 托管静态文件，再把 /api 反向代理到后端。第二种更接近真实生产模式，但本地演示容易把端口搞乱，不熟悉 Nginx 配置的同学不建议现场操作。

本地演示我更推荐“后端 8080 + 前端 8081 + 代理转发”的方式，两个终端窗口各自跑，稳定且改动最小。要把 demo 发给老师，可以写一个启动说明文档，把如何导入数据库、如何启动后端、如何启动前端写清楚，这个文档本身在评认真程度上就是加分项。

6. 常见问题与避坑指南

6.1 前后端联调高发问题速查表

6.2 接手旧源码时的检查顺序

很多人拿到一套源码先急着改模块、加功能，这是效率比较低的做法。我建议按固定顺序做检查：

• 先看 README 或项目文档，搞清楚它用的是什么版本组合。
• 检查 SQL 脚本是否完整，能不能一次建库成功。
• 后端先启动，不带前端的情况下用接口测试工具把所有接口都测一遍。
• 前端再启动，验证登录和主流程。
• 确认没问题之后，再在现有结构上加自己的功能。

这样做的好处是：你所有后续的改动都有了基线。如果一上来就乱动代码，最后连“原本能跑”的状态都没保住，调试难度会成倍增加。

6.3 我踩过的几个典型坑

我第一次做这类项目时，在借阅功能上吃了大亏。当时只写了“查询档案状态正常就 update 为借出”，结果测试时用两个浏览器同时操作，出现了同一档案被借两次的数据。后来改成乐观锁版本控制，才把问题解决。这个经历也让我意识到，看似简单的业务，一旦涉及多人操作，就一定要考虑并发，哪怕课程设计不会真有人同时点，但设计思路必须在。

还有一次是前端明明改了代码，页面却一直显示旧样式。把 Node 服务重启、浏览器强缓存清掉都不行，最后发现是改了 Component 的名称大小写，路由引用不一致，报错被忽略了。这提醒我：浏览器控制台里的红色报错不能关，哪怕页面看着正常，报错本身就是线索。

另一个很实际的坑是系统里用了大量绝对路径保存文件。把项目从一台电脑拷到另一台电脑后，所有上传的图片全部加载失败，因为路径前缀还带着原来电脑的磁盘名。后来改成相对路径，并且统一在配置类里做一个静态资源映射，才算真正解决。这也是为什么我在写文件上传时，刻意强调不要将完整绝对路径存到数据库，存相对路径就好。

6.4 让毕设答辩加分的几个扩展点

如果你的时间有余，不需要只满足于“能跑”。在基础模块上做几个低成本高展示度的扩展，会让项目明显上一个档次。

• 给档案信息增加 Excel 批量导入导出，用 EasyExcel 或 POI 都行，演示时直接拿一份表格导入几十条数据，效果比一条条录入震撼得多。
• 在统计页面用图表展示各分类的档案数量、借阅趋势。前端用 ECharts，后端只需要写一条 group by 查询，成本很低。
• 增加操作日志列表，展示用户登录、新增档案、审核借阅等操作的时间线和操作人，非常直观地体现安全审计意识。
• 对档案编号实现扫码或条码管理，前端用现成的条码库渲染编号，这个创新点虽然不是很难，但很容易让评委记住。

我个人在实际操作中的体会是，课设和毕设项目，完成度永远比功能数量重要。一个档案管理的核心流程能稳定跑通，代码结构清晰，数据库设计合理，答辩时你能讲清楚每一个表、每一个接口的用途，就已经在平均水平之上了。比起贪多求全把系统塞满功能，不如把“借阅并发”“逻辑删除”“token 鉴权”“文件上传限制”这些点做扎实，它们才是真正能体现工程能力的地方。

最后再分享一个小技巧：写任何模块之前，先写下这个模块“为什么需要”“涉及哪些表”“接口有哪些”“前端页面在哪”。哪怕只是简单的几行笔记，也能让你在整个开发过程中思路非常清楚，不会被代码带偏。这套思路放到以后做任何项目，都很有用。