实验室设备管理系统全栈实现：从数据库设计到部署踩坑

“实验室设备管理系统”这几个字我一开始以为是又一个典型的课程设计增删改查。但真正把源码里的设备台账、借用审批、维修记录这条链路跑通之后我承认这个项目的含金量比标题看起来高不少。它用Java做后端、Vue做前端、MySQL做数据存储交付物里带着完整源码、数据库脚本和项目文档是一个标准的全栈管理系统。你如果正在准备Java或Vue方向的岗位面试或者想在毕业设计里找一个“业务完整、能演示、能讲得清楚”的项目这套代码是一个很不错的训练样本。这篇文章我不打算只讲怎么启动它而是把技术选型、数据库设计、后端接口、前端实现、部署流程和踩坑记录全部拆开按一个做过的“过来人”的视角把它吃透让你拿到的是一套能复现、能讲解、能继续扩展的完整项目经验。1. 项目整体设计与技术选型思路1.1 为什么这套技术栈值得选先说为什么是Java加Vue而不是别的方案。实验室设备管理这件事核心诉求很清晰要能维护设备档案要有人能借、有人能批要有维修和报废的记录还要能控制不同角色的权限。这种体量的系统用单体架构完全够用没有必要上微服务那套复杂的东西。Java生态里Spring Boot就是干这个最顺手的依赖管理简单自带内嵌的Tomcat打成一个jar包就能直接跑MyBatis-Plus呢对于这种以单表增删改查为主的系统能把样板代码省掉一大半写起来速度飞快。前端选Vue是因为上手门槛低、组件生态成熟Element UI或者Element Plus组件库拉出来就是一套后台管理界面表格、表单、弹窗、分页基本开箱即用。这套组合在校园、中小企业里的覆盖率非常高网上资料也多到爆炸。你遇到任何一个报错基本都能搜到现成答案这对学习期的人来说太重要了。而且对准备求职的人来说这套技术栈就是面试里的常客Java面试八股里爱问的Spring、MyBatis、JWT前端面试里爱问的Vue生命周期、路由守卫、axios封装在这个项目里全都有实际落地点。简历上写“独立开发实验室设备管理系统”比罗列一堆技术名词有说服力得多因为你能把每个知识点放到真实业务里去解释。1.2 业务模块与核心链路梳理拿到源码第一步不是急着跑起来而是先把业务模块搞清楚。这类系统一般拆成五个模块。第一个是系统管理包括用户登录、角色权限角色通常分为管理员、教师、学生三种身份管理员可以管理用户和设备类别教师和学生是设备的主要使用者。第二个是设备档案管理核心动作是设备的录入、编辑、报废、分类查询和库存盘点设备的状态直接决定它能不能被借走。第三个是借用归还管理这是整个系统里最核心也最容易出问题的地方学生发起借用申请管理员或者设备负责人审批到时间要归还超期了要提醒。第四个是维修管理设备出问题由谁报修、谁来处理、修完状态怎么恢复每一步都要有记录。第五个是统计看板展示设备总数、在库数、借用中、维修中、报废数以及热门设备的借用排行。这里建议你读代码的时候带着一条业务主线去读一个学生从申请借用一台设备开始到管理员审批、学生实际使用、最终归还验收这条链路经过哪些表、调用哪些接口、更新哪些状态。把这条主线跑通了整个系统就懂了一大半。我习惯把业务链路概括成一句话登录拿身份查询看权限借还走流程一切留记录。每次看代码不知道从哪看起的时候就把这句话念一遍思路会清晰很多。2. 数据库设计让设备全生命周期有据可查2.1 四张核心表的结构设计这套系统的数据库设计是整个源码里含金量最高的部分建议哪怕暂时不写代码也先盯着表结构看一遍。核心表大概四张用户表、设备表、借用记录表、维修记录表。用户表字段不多账号、密码、姓名、角色、联系方式这些就两点要注意密码存的是加密后的结果不是明文角色用tinyint整数存比如0管理员、1教师、2学生前端再根据这个数字渲染成不同的标签。设备表要认真看除了设备名称、设备编号、类别、规格型号、存放地点、购置日期、价格这些基础属性之外最关键的是状态字段。这个字段用int存比如0在库、1借用中、2维修中、3报废所有跟设备状态相关的业务逻辑都围着它转。借用记录表是整套系统里优先级最高的一张表它记录的是谁在什么时间借了哪台设备核心字段包括借用记录ID、设备ID、用户ID、申请时间、预计归还时间、实际归还时间、审批状态、审批人、备注。审批状态也建议用数字表示0待审批、1已通过、2已拒绝、3使用中、4已归还、5已逾期。这里有一个关键点容易忽略借用记录表和设备表要保持状态同步。设备被审批通过后设备表状态要从在库变成借用中设备归还后又要从借用中变回在库。很多项目跑着跑着数据对不上设备明明还了却一直显示借用中八成就是这两个状态没同步好。维修记录表相对简单记录设备ID、报修人、故障描述、维修状态、维修人、维修时间、维修费用。2.2 状态流转建模为什么用状态机而不是硬编码我读完这套数据库脚本之后最大的收获是它教给我一件事业务状态不要散落在代码里各个if判断中而是要在表设计阶段就把状态流转想清楚。设备状态不是随意改的必须走合法路径在库→审批通过→借用中→归还→在库在库→报修→维修中→维修完成→在库。借用记录也是类似的待审批→已通过→使用中→已归还或者待审批→已拒绝。每一个状态变更都要对应到一张记录表里的数据变化。这样做的好处有三个。第一能追溯每一条设备变更都有记录不会出现“设备莫名其妙没了”的情况。第二并发操作不容易冲突同一个设备不会被两个人同时借走因为审批通过时会校验设备状态是否仍然是在库。第三统计报表好写直接从状态字段分组统计就能出设备情况看板。所以读代码时重点看设备状态变更的Service方法看它有没有做状态合法性的前置校验。很多课程设计项目最大的问题就在这前端按钮隐藏了不代表后端安全了如果后端接口不校验状态抓包直接调接口就能把一台不在库的设备借走这种漏洞在讲项目时非常致命。2.3 建库脚本与初始数据源码包里的SQL文件一般会帮你把库和表建好还带了一批初始化数据。拿到SQL后的第一件事是用Navicat或者命令行执行执行完重点看几个地方数据库名是不是和后面配置文件里写的一致默认账号密码是什么管理员账号有没有初始化设备类别词典表里有没有数据。最稳妥的步骤是先用CREATE DATABASE创建数据库字符集设置成utf8mb4然后USE这个库再执行SQL文件内容。如果执行报错最常见的原因是MySQL版本差异比如某些字段类型在老版本不支持或者SQL文件里带了特殊注释导致的编码问题这时候把执行工具从图形界面换成命令行一般能解决。初始数据导入之后不要放着不管建议把用户表和管理员的初始密码记下来。很多项目默认密码是123456管理员账号是admin登录后第一件事就是改密码。表与表之间的关联字段也要留意这个系统为了保证借用记录不丢失一般不会在数据库层面建物理外键而是在代码层面维护逻辑关联。好处是删除某条数据时不会被外键约束挡住坏处是需要程序员自己保证数据一致性这一点在看代码时我会格外注意。3. 后端实现从登录鉴权到借用审批流程3.1 项目分层与核心依赖打开后端工程结构一般是标准的Spring Boot分层模式。Controller层负责接收请求和返回结果不在里面写业务逻辑Service层是业务核心事务边界在这里Mapper层也叫DAO层负责数据库操作Entity是实体类跟数据表字段一一对应。另外还会有config、utils、common这些辅助包。这种分层的意义在于让每一层职责单一出了问题能快速定位也方便多人协作每个人负责不同层也不容易冲突。pom.xml里的依赖值得逐个认识一下。spring-boot-starter-web是最基本的Web支持MyBatis-Plus或MyBatis负责数据库映射mysql-connector-java负责连库Lombok用来简化实体类代码减少getter、setter这些样板代码JWT相关依赖做登录鉴权Swagger或Knife4j用来生成接口文档。以MyBatis-Plus为例它最大的优势是让你在大部分单表CRUD场景不需要写SQLMapper接口继承BaseMapper就能直接获得insert、delete、update、selectById这些方法配合LambdaQueryWrapper可以写出非常简洁的查询。dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency我自己用下来MyBatis-Plus能把代码量减少三成以上。但它有个副作用新手容易忽视SQL性能列表页数据量大了以后变慢排查时又找不到具体SQL在哪条。所以读代码的时候要多看条件构造器的用法搞清楚eq、like、between这些方法是在拼接什么SQL做到心里有数。面试被问MyBatis-Plus相关的点时能说出“我清楚它在底层拼SQL的逻辑也自己写过复杂查询”是对比“我只会用BaseMapper”的明显加分项。3.2 登录鉴权JWT加拦截器登录接口是全系统第一个要看的接口流程很标准用户提交用户名和密码后端查用户表把密码用MD5加盐或者BCrypt进行比对匹配成功就签发一个JWT令牌返回给前端。前端把令牌存在localStorage里每次请求通过Authorization请求头带过来。后端用一个拦截器拦截所有需要登录的接口取到令牌就解析出用户信息放进去解析失败就返回401引导用户重新登录。这里我踩过的坑集中在拦截器的路径配置上。很多源码在addInterceptors里设置了排除路径比如登录、注册不需要拦截但静态资源、Swagger文档路径、前端页面路径如果没有排除在外会造成一个奇怪的现象前端资源加载不了接口文档打开也要登录。配置拦截路径时要遵循最小必需原则只拦截真正需要鉴权的接口前缀比如/api/**其他一律放行。拿到源码后建议先到WebConfig或者InterceptorConfig里看拦截器写法这对理解整个系统的访问控制机制非常关键。JWT本身还有一个细节容易被忽略令牌里不要放敏感信息只放userId、username、role这些非敏感字段过期时间也别设太长一般2小时到24小时之间比较合适。快过期时前端可以通过刷新接口换新令牌而不是让用户频繁登录。在实际开发中登录鉴权这件事还牵扯到一个概念叫“无状态”服务端不保存会话信息全靠令牌验证这也是面试官特别喜欢聊的方向。3.3 设备借用与审批接口的实现细节整个后端最值得精读的就是设备借用和审批接口因为这里面包含状态判断、事务控制和权限校验三样核心内容。以借用申请为例正常的流程是学生在前端选择设备、填写预计归还时间提交后后端创建一条待审批的借用记录同时把设备状态改成借用中相当于预占设备防止被别人再借。这里有人会问为什么不等到审批通过再改设备状态原因很简单并发场景下如果两个人同时申请同一台设备都生成了待审批记录等管理员审批时只能通过一条另一条待审批记录的存在会造成视觉混乱和管理负担。而预占的话第二个人在提交时就会看到设备状态已经是借用中的提示从源头避免了冲突。审批接口的代码会校验当前操作者是否具有管理员权限然后拿到借用记录判断状态是否还是待审批是就更新为已通过或已拒绝同时联动更新设备表里的状态。这里最容易出的问题是事务控制。审批通过这个操作要同时更新借用记录状态、更新设备状态、还有可能写入一条操作日志任何一步失败都应该让整个操作回滚。Spring里面在Service方法上标注Transactional即可实现但要注意方法必须是public的而且不能在一个类的内部自己调自己否则事务不生效。这是Java开发面试里的高频考点在这套系统里结合代码理解比单纯背八股容易得多。归还接口一样值得看。学生点击归还后管理员验收设备系统把设备状态修改为在库写入实际归还时间同时计算是否逾期。逾期处理一般会有一个定时任务扫描那些超过预计归还时间还没归还的记录把状态改成已逾期并生成提醒。我看到很多课程设计项目把定时任务省掉了但如果你在项目复盘时想展示亮点把定时任务补上会是很棒的一笔因为这说明你考虑了真实业务场景。Transactional public boolean auditBorrow(Long recordId, Integer auditResult, Long approverId) { BorrowRecord record borrowRecordMapper.selectById(recordId); if (record null || record.getStatus() ! 0) { throw new RuntimeException(记录不存在或已被处理); } Device device deviceMapper.selectById(record.getDeviceId()); if (auditResult 1) { record.setStatus(1); device.setStatus(1); } else { record.setStatus(2); device.setStatus(0); } record.setApproverId(approverId); borrowRecordMapper.updateById(record); deviceMapper.updateById(device); return true; }上面这段代码是一个简化版的审批逻辑实际项目中还会加入操作日志记录。你可以看到核心就是两件事更新借用记录状态同步更新设备状态既要有权限校验又要有事务兜底。4. 前端实现Vue页面从0到能用的关键步骤4.1 前端工程结构与路由设计前端工程拿到手第一步先看package.json确认项目用的是Vue 2还是Vue 3。很多实验室管理系统用的是Vue 2加Element UI也有一部分已经升级到Vue 3加Element Plus。两者写法差异不小Vue 2里用this.$router.push跳转路由Vue 3组合式API里用useRouter()模板绑定和组件通信方式也不同。拿到源码后先分清这一点能少走很多弯路。如果发现README里没写清楚就看package.json里vue的版本号2开头的就是Vue 23开头的就是Vue 3。路由设计上系统一般会有登录页、布局页、设备管理页、借用管理页、审批页、维修页、用户管理页、统计页这几类。布局页作为父路由里面放侧边栏菜单和主内容区子路由挂在children下面实现点击菜单切换页面的效果。路由守卫是必看的重点beforeEach里会判断用户是否登录没登录就重定向到登录页已登录但访问了未授权页面则跳转404。这套逻辑对应着面试里常问的“Vue路由守卫是什么”“路由参数怎么传”这些话题看源码一遍胜过背十遍题。4.2 axios封装与前后端联调前端与后端通信全靠axios。这个封装基本是固定套路创建axios实例设置baseURL添加请求拦截器在拦截器里把localStorage里的token取出来放在Authorization请求头里。再添加响应拦截器如果返回状态码是401就清空登录状态并跳转登录页如果业务码表示失败就用Element的Message组件弹出错误信息而不是简单调用alert弹窗。读代码时多留意响应拦截器里对错误码的统一处理这是前后端联调时排查问题的关键位置。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 response.data, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } )联调时最容易出问题的就是跨域。开发环境下前端跑在5173或8080端口后端跑在8080或9090端口端口不同就会产生跨域问题。解决方案常见两种一种是在后端配置CORS允许指定来源另一种是在前端vite.config.js或者vue.config.js里配置proxy把/api开头的请求代理到后端地址。我个人更推荐第二种因为生产环境前端部署时Nginx里也会配反向代理思路一致而且不暴露后端真实地址。核心原则记住一句话前端页面里看到的是相对路径真正发请求时由代理把协议、域名、端口补全。4.3 表格、表单与状态标签的落地前端页面的核心其实就是三件套表格展示数据、表单收集输入、弹窗确认操作。设备管理页的典型做法是页面加载时调用后端分页查询接口把数据渲染到el-table里每行后面放编辑、删除、借用、维修这些操作按钮不同状态用el-tag做不同颜色的标签比如在库是绿色、借用中是橙色、维修中是红色、报废是灰色。这样管理员扫一眼就知道设备当前处于什么状态不用逐条去点开详情。借用申请页一般是一个表单弹窗选择设备、填写预计归还时间、填写用途说明提交后调用后端借用申请接口。这里有个细节要注意申请提交成功后表格数据要刷新把新的待审批记录显示出来同时设备列表里那台设备的状态也要跟着变化。这就要保证前端在关键操作后主动重新拉取接口而不是靠用户手动刷新页面。表单校验用rules属性配置比如预计归还时间不能早于当前时间用途说明不能为空这些规则写起来不复杂但对用户体验的提升非常明显。面试时能主动聊出这些细节比只会说“我负责写页面”强得多。5. 从源码到跑通完整部署流程跟做版5.1 环境版本清单这套系统的运行环境并不挑剔我整理了一份自己实测过的版本清单照着配基本不会出问题。后端JDK用8或者11都行项目如果是Spring Boot 2.x就用JDK 8如果是3.x建议JDK 17Maven用3.6以上版本Node.js用14或者16如果前端是Vue 3加Vite项目Node建议16以上。数据库用MySQL 5.7或者8.0都行注意8.0以上版本时驱动类和时区参数的写法有变化。这些版本信息在项目的README或者文档里一般会有说明没有的话就先按这个方案试遇到具体报错再针对性解决。5.2 后端启动流程后端启动按这个顺序来基本不会错。第一步创建数据库并导入SQL脚本保证表和数据都就位。第二步打开application.yml或者application.properties核对数据库名、用户名、密码、端口配置把数据库连接URL里的serverTimezone设为Asia/Shanghai字符编码设置成utf8mb4不然会出现时间偏差和中文乱码。第三步用Maven打包命令行执行mvn clean package -DskipTests或者直接在IDEA右侧Maven面板里双击package。第四步运行生成的jar包java -jar target/xxx.jar看到Tomcat started字样就是启动成功了。第一次跑不起来的概率很高但不用慌绝大多数只有三个原因数据库连不上、端口被占用、Maven依赖下载失败。数据库连不上就检查用户名密码和库名端口被占用就把配置文件里的server.port改掉或者找到占用进程kill掉Maven依赖下载失败一般是网络问题换一个镜像源再重新导入。启动日志里有红色报错时先定位是哪一层的问题启动失败的报错信息里通常明确写着哪个Bean创建失败、哪个配置缺失这些信息比后面一大段异常栈更有用。5.3 前端启动与联调前端启动相对简单。在前端目录下执行npm install安装依赖如果网络慢或者报错把npm源切换成国内镜像源很多问题一下就解决了。装完之后执行npm run serve或者npm run dev启动开发服务器启动成功后浏览器访问对应地址就能看到登录页用初始账号密码登录进去。联调阶段要做的事其实很固定先用浏览器F12的Network面板看请求有没有正常发出再看请求URL是不是预期的后端地址再看响应状态码。出现404通常说明路径写错或者后端没启动出现401或403说明token缺失或者权限不够出现500就去看后端日志。我见过很多人一看到Network里红了一片就慌了其实排查顺序就是URL、状态码、响应体、后端日志四步走完基本能找到问题。这里特别提醒一句改完前端配置要重启开发服务器改完后端Java代码要重启Spring Boot进程或者使用devtools热部署很多“怎么改了半天没生效”的问题其实就是服务没重启。5.4 项目文档里容易遗漏的信息源码包里的文档一般会把项目介绍、技术栈、启动步骤写一遍但我建议你在启动成功之后自己做一份个人版笔记专门记录这四件事初始账号密码、数据库连接配置、后端端口、前端端口。这四个信息是每次重新部署项目时都要用到的也是最容易被忽略的。如果文档里没写初始账号去数据库的user表直接查把加密后的密码拿来分析加密方式一般能找到默认值。我通常会把这份笔记当作文档的补充放在项目根目录的NOTE.md里下次换电脑重新部署时能省去很多回忆时间。6. 踩坑实录这些问题我当年卡了一晚上6.1 数据库连接与中文乱码数据库的坑我挑三个最典型的讲。第一个是时区问题报错信息一般是“The server time zone value”解决方案很简单在数据库连接串上加上serverTimezoneAsia/Shanghai。第二个是表名冲突如果建表时把用户表命名为user在一些版本里会跟系统表冲突解决办法是SQL和代码里都写成反引号包裹的表名或者在建表时直接用sys_user这类更安全的名字从源头避开问题。第三个是中文乱码连接串里加上characterEncodingutf8数据库本身和表的字符集都要是utf8mb4三个层面保持一致才不会出现乱码。6.2 前端编译、路由与跨域前端编译失败最常见的原因是依赖版本冲突。比如Element UI的版本和Vue版本对不上或者Node版本太新导致老依赖编译报错。解决方案是严格按package.json里锁定的版本安装不要因为看到新版本就顺手升级。npm install失败时先清缓存再装npm cache clean --force之后重新执行install还是不行就换registry源。路由踩坑主要体现在刷新后404。开发模式下如果使用history模式直接刷新一个子路由页面后端开发服务器没有配置fallback就会404。解决办法是开发环境把vue-router切成hash模式或者在后端配一个转发规则。hash模式URL里带#号虽然看起来不如history模式干净但胜在稳定。很多后台管理系统会长期使用hash模式因为它对部署环境要求最低。跨域问题我在第4章讲过一次这里重提一个重点前端代理配置好以后浏览器请求仍然是相对路径Network面板里基本不会出现跨域报错。如果代理配了还是报跨域八成是代理路径写错了比如前端请求的是/api/device代理却只匹配了/device这种小地方检查起来最费时间。6.3 业务流程边界问题业务逻辑上的坑比技术坑更隐蔽因为它不报错只是数据对不上。我挑两个典型的说。第一个是设备状态不同步。审批通过后设备状态改成了借用中但归还流程没做好设备一直卡在借用中后台看板上借用中数量一直涨。排查思路是去借用记录表看这条记录的状态如果记录显示已归还但设备表没有更新就是归还接口里漏了状态回写。第二个是并发借用同一台设备。如果申请接口没有检查设备当前状态两个学生同时提交借用申请设备就可能生成两条待审批记录。解决方法是提交申请前查一次设备状态在代码事务层面再加一道校验确保只有状态为在库的设备才能创建待审批记录。这两个问题在真实项目中经常遇到能在复盘时把它们讲清楚比能默写一堆框架API更能证明项目能力。6.4 密码和接口安全细节安全细节很容易被忽视但恰恰是面试官和评审老师喜欢问的点。密码不能明文存在数据库里至少要做MD5加盐有条件用BCrypt更好接口参数要做后端校验不能只靠前端校验因为接口可以被绕过有权限要求的接口Controller里一定要有权限判断不能只靠前端藏按钮如果系统里有文件上传记得限制文件类型和大小。这些细节看起来不起眼但你在做项目复盘或者被问到“这个项目有什么你自己觉得做得比较好的地方”时随便挑一条展开讲都能体现出安全意识和工程素养。7. 复盘与扩展方向7.1 从课程设计到生产环境的差距这个项目跑通之后可以站在“如果它要真正给一个实验室用”的角度想一想还缺什么。目前最明显的短板有三个。一是没有主动消息通知设备快到归还日期时系统不会主动提醒用户和管理员需要自己去列表里看。二是没有扫码能力真实实验室盘点资产要快设备编号如果都能生成二维码或者条形码配合扫码枪或者手机扫码效率会高一大截。三是权限粒度还不够细管理员、教师、学生三种角色可能还不够设备管理员和实验室负责人可能需要分开管理。把这三个短板补上这个项目就从一个课程设计级别的系统往一个能真正落地的业务系统迈了一大步。7.2 一些个人体会把整套代码啃完我最深的体会是这个项目把传统意义上很枯燥的实验室管理场景变成了一个学习Java和Vue全栈开发的好训练场。你不用绕开业务去硬背框架知识因为每个框架知识点都能在这里找到真实的使用场景。Spring Boot的分层是为了让业务清晰MyBatis-Plus的条件构造器是为了多条件查询Vue的路由守卫是为了登录鉴权axios拦截器是为了统一处理token和错误码。这套系统里没有特别高深的技术但它把“技术怎么服务业务”这件事讲得很明白。如果这篇文章看完你还不知道怎么动手我建议的行动路径是先把数据库脚本跑起来用Navicat把四张核心表的数据翻一翻再启动后端用Swagger或者Postman调一遍登录、设备列表、借用申请这三个接口最后启动前端把页面完整点一遍。这个流程走完你对一个全栈项目从数据库到接口再到页面的完整链路会有一个非常直观的体感之后再静下心读代码效率会高很多。