简介本资源为基于SpringBoot与Vue的校园图书借阅与管理系统完整项目源码面向计算机专业学生、Java全栈开发者及需要课程设计或毕业设计参考的技术人员帮助解决图书借阅管理场景下的前后端分离开发与权限控制问题。压缩包共1087个文件约1.8MB以559个js脚本、160个md说明文档、117个json配置、30个java后端源码、25个yml配置文件及17个vue组件为主另含少量sql、html、css与dockerfile等覆盖依赖库、项目配置与业务代码。系统包含用户、图书管理、借阅、预约、统计分析与权限控制六大模块采用JWT认证、Spring Data JPA、Vuex与Vue Router实现遵循RESTful API设计并基于MySQL存储数据。目前已有259人学习适合需要完整项目结构、接口设计与前后端协作思路的读者参考借鉴。1. 校园图书借阅系统为什么总在“借书”这一步翻车做过校园项目的都知道图书借阅管理系统的演示视频里借书、还书、查库存三步走得行云流水可一旦放到真实场景——几百个学生同时抢一本热门教材、管理员在后台手动改库存、超期罚款按天滚动计算——系统就开始出问题。这不是技术选型的问题而是业务边界没划清楚。基于 SpringBoot 和 Vue 的校园图书借阅与管理系统核心要解决的就是三件事图书库存的并发扣减、借阅记录的准确追踪、以及前后端分离下的权限控制。它适合正在做课程设计的学生、需要快速交付内部工具的后端开发者以及想拿一个完整项目练手 SpringBoot 和 Vue 全栈配合的人。这篇文章不讲空泛的架构图只讲怎么把借阅流程跑通、库存怎么防超卖、前后端怎么联调以及我踩过的那些坑。2. 技术选型与项目骨架为什么是 SpringBoot Vue 而不是别的2.1 后端选 SpringBoot 的四个现实理由校园图书借阅系统的业务复杂度不高但要求快速出活、方便调试、部署简单。SpringBoot 在这三点上几乎没有对手。第一内嵌 Tomcat打成 jar 包直接java -jar就能跑不需要额外装 Web 服务器宝塔面板里用 Docker 部署也就是一条命令的事。第二starter 依赖把 MyBatis、MySQL 驱动、JSON 处理全部打包好pom.xml里加几个依赖就能开工不用像传统 SSM 那样写一堆 XML 配置。第三SpringBoot 的自动配置机制让数据源、事务管理器、MVC 视图解析器全部默认就绪你只需要关注业务代码。第四社区资料足够多遇到springboot版本太高导致的兼容性问题搜一下就能找到降级方案。我一般会选 SpringBoot 2.7.x 这个版本原因是它同时兼容 JDK 8 和 JDK 17而很多学校的实验环境还停留在 JDK 8。如果你用 JDK 17SpringBoot 3.x 也可以但要注意javax.servlet已经换成jakarta.servlet老代码直接迁移会报错。数据库用 MySQL 8.0连接串里记得加serverTimezoneAsia/Shanghai否则借阅时间会差 8 小时这个坑后面还会细说。2.2 前端选 Vue 的考虑与版本选择Vue 在这个项目里的角色是提供管理后台和学生端界面。选 Vue 而不是 React 或 Angular主要因为上手快、模板语法直观、和 Element Plus 这类 UI 库配合默契。校园项目的前端页面无非是表格、表单、弹窗、分页Element Plus 的el-table、el-form、el-dialog能覆盖 90% 的需求。版本上Vue 3 Vite Pinia 是当前的主流组合。Vite 的冷启动速度比 Webpack 快一个数量级改样式几乎秒级热更新。如果你还在用 Vue 2 Webpack开发体验会差很多但 Vue 2 的生态更成熟遇到vue和edge冲突这类浏览器兼容问题时资料更多。我的建议是新项目直接上 Vue 3用script setup语法代码量能少三分之一。2.3 项目骨架搭建从零到能跑的最小步骤先建后端。用 Spring Initializr 或者 IDEA 的 Spring Boot 插件生成项目勾选 Spring Web、MyBatis Framework、MySQL Driver、Lombok。生成后的目录结构是标准的src/main/java下放启动类和控制器src/main/resources下放application.yml和 mapper XML。# application.yml 最小配置 server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/library?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.campus.library.entity这段配置里serverTimezoneAsia/Shanghai必须加否则 Java 的LocalDateTime写入 MySQL 时会按 UTC 时间存读出来就少了 8 小时。mapper-locations告诉 MyBatis 去哪里找 XML 映射文件type-aliases-package让实体类不用写全限定名。再建前端。用npm create vitelatest library-frontend -- --template vue生成 Vue 3 项目然后安装依赖npm install element-plus axios vue-router pinia npm install -D unplugin-auto-import unplugin-vue-componentsunplugin-auto-import和unplugin-vue-components用来按需引入 Element Plus避免打包时把整个 UI 库塞进去。配置在vite.config.js里// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }), ], server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })server.proxy是开发阶段的关键配置。前端跑在 5173 端口后端跑在 8080浏览器直接请求 8080 会跨域。通过代理把/api开头的请求转发到后端changeOrigin让后端以为是同源请求rewrite去掉/api前缀这样后端接口不用额外加/api路径。提示前端打包后放进 SpringBoot 的static目录是一种常见部署方式但要注意 Vue Router 的 history 模式需要后端配置 fallback否则刷新页面会 404。3. 数据库设计与借阅核心逻辑库存扣减和超期计算怎么做3.1 四张核心表与字段设计校园图书借阅系统的数据库不需要太复杂四张表就能撑起来book图书、user用户、borrow_record借阅记录、category分类。关键字段设计如下表名字段类型说明bookidBIGINT主键自增bookisbnVARCHAR(20)唯一索引防止重复录入booktitleVARCHAR(200)书名booktotal_countINT总库存bookavailable_countINT可借库存borrow_recordidBIGINT主键borrow_recorduser_idBIGINT借阅人borrow_recordbook_idBIGINT图书borrow_recordborrow_dateDATETIME借出时间borrow_recorddue_dateDATETIME应还时间borrow_recordreturn_dateDATETIME实际归还时间borrow_recordstatusTINYINT0借出 1已还 2超期available_count是库存扣减的核心字段。每次借书available_count - 1还书 1。total_count和available_count分开存是为了在图书丢失或损坏时能单独调整可借数量而不影响总库存记录。3.2 借书接口的库存扣减乐观锁还是悲观锁库存扣减最怕超卖。两个学生同时借同一本书如果代码写成先查再改就会出现都查到available_count 1然后都扣减最后库存变成 -1。解决方式有两种悲观锁和乐观锁。悲观锁用SELECT ... FOR UPDATE在事务里锁住行其他事务排队等待。写法简单但并发高时响应变慢。乐观锁用版本号或条件更新SQL 写成UPDATE book SET available_count available_count - 1 WHERE id ? AND available_count 0根据返回的影响行数判断是否成功。这种方式没有锁等待适合校园场景的并发量。// BookMapper.java Update(UPDATE book SET available_count available_count - 1 WHERE id #{bookId} AND available_count 0) int decreaseStock(Param(bookId) Long bookId); // BorrowService.java Transactional public Result borrowBook(Long userId, Long bookId) { // 先检查用户是否已借同一本书且未还 int borrowing borrowRecordMapper.countByUserAndBook(userId, bookId); if (borrowing 0) { return Result.fail(您已借阅此书请先归还); } // 扣减库存影响行数为 0 说明库存不足 int affected bookMapper.decreaseStock(bookId); if (affected 0) { return Result.fail(库存不足借阅失败); } // 写入借阅记录 BorrowRecord record new BorrowRecord(); record.setUserId(userId); record.setBookId(bookId); record.setBorrowDate(LocalDateTime.now()); record.setDueDate(LocalDateTime.now().plusDays(30)); record.setStatus(0); borrowRecordMapper.insert(record); return Result.success(借阅成功); }decreaseStock的 SQL 里available_count 0是防超卖的关键条件。Transactional保证扣库存和写记录在同一个事务里任何一步失败都回滚。countByUserAndBook用来防止同一用户重复借同一本书这个检查放在扣库存之前避免无效扣减。3.3 还书与超期罚款的计算逻辑还书时要做三件事更新借阅记录的状态和归还时间、恢复库存、计算是否超期。超期天数用ChronoUnit.DAYS.between(dueDate, returnDate)计算如果大于 0 就按每天 0.5 元生成罚款记录。Transactional public Result returnBook(Long recordId) { BorrowRecord record borrowRecordMapper.selectById(recordId); if (record null || record.getStatus() 1) { return Result.fail(借阅记录不存在或已归还); } LocalDateTime now LocalDateTime.now(); record.setReturnDate(now); record.setStatus(1); // 计算超期天数 long overdueDays ChronoUnit.DAYS.between(record.getDueDate(), now); if (overdueDays 0) { record.setStatus(2); BigDecimal fine BigDecimal.valueOf(overdueDays * 0.5); record.setFine(fine); } borrowRecordMapper.updateById(record); bookMapper.increaseStock(record.getBookId()); return Result.success(归还成功); }ChronoUnit.DAYS.between返回的是完整天数比如应还时间是 1 号实际 3 号还返回 2。罚款金额用BigDecimal而不是double避免浮点精度问题。increaseStock就是简单的available_count 1但要注意加上限判断防止还书次数异常导致库存超过total_count。注意如果系统允许续借due_date要能修改同时要记录续借次数一般限制最多续借一次。4. 前后端联调与权限控制登录、路由守卫和接口封装4.1 登录认证JWT 还是 Session前后端分离项目里Session 依赖 Cookie跨域时配置麻烦所以 JWT 是更常见的选择。登录成功后后端生成 token前端存到 localStorage每次请求通过 Axios 拦截器放到Authorization头里。后端写一个拦截器或过滤器校验 token 的有效性解析出用户 ID 和角色。// JwtUtil.java 核心方法 public static String generateToken(Long userId, String role) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() 86400000)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); }setExpiration设置 24 小时过期claim(role, role)把角色写进 token前端可以根据角色动态渲染菜单。SECRET要放在配置文件里不要硬编码在代码中。4.2 前端路由守卫与动态菜单Vue Router 的beforeEach守卫用来判断用户是否登录、是否有权限访问目标页面。如果 token 不存在就跳转到登录页如果角色不匹配就跳转到 403 页面。// router/index.js router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role to.meta.role ! localStorage.getItem(role)) { next(/403) } else { next() } })to.meta.requiresAuth在路由配置里标记哪些页面需要登录to.meta.role标记哪些页面只允许管理员访问。这样学生登录后看不到管理后台的入口管理员能看到全部菜单。4.3 Axios 封装与统一错误处理前端所有请求走一个 Axios 实例请求拦截器加 token响应拦截器统一处理错误码。后端返回格式统一为{ code, message, data }code为 200 表示成功401 表示未登录403 表示无权限。// utils/request.js import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) if (res.code 401) router.push(/login) return Promise.reject(new Error(res.message)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } )请求拦截器自动加Bearer前缀响应拦截器在code ! 200时弹出错误提示401 时跳转登录页。这样业务代码里只需要写const data await request.get(/books)不用每次都判断错误码。提示vue打包放进springboot中时Axios 的baseURL要改成/因为打包后前端和后端同源不需要代理前缀。5. 部署与避坑那些让我熬夜排查的六个问题5.1 时间差 8 小时时区配置的连锁反应现象借阅记录里的borrow_date比实际时间少 8 小时超期计算因此出错。原因MySQL 连接串没加serverTimezone或者加了但值不对。Java 的LocalDateTime.now()取的是系统时区时间如果 JVM 时区是 UTC写入 MySQL 就会按 UTC 存。解决连接串加serverTimezoneAsia/Shanghai同时在启动类里加PostConstruct设置TimeZone.setDefault(TimeZone.getTimeZone(Asia/Shanghai))。两个地方都配才能保证从 Java 到 MySQL 全链路时区一致。5.2 库存扣成负数并发下的超卖现象压测时available_count出现 -1。原因扣减 SQL 没加available_count 0条件或者加了但事务隔离级别是 READ COMMITTED两个事务同时读到 1 然后都扣。解决用条件更新WHERE available_count 0根据影响行数判断。如果影响行数为 0直接返回库存不足不要继续写借阅记录。另外把事务隔离级别设为 REPEATABLE READMySQL 默认配合条件更新就能防住。5.3 前端刷新 404history 模式的后端 fallback现象Vue 打包后放进 SpringBoot 的static目录访问/books正常但刷新页面就 404。原因Vue Router 的 history 模式依赖前端路由刷新时浏览器直接请求/booksSpringBoot 找不到这个路径。解决写一个ErrorController或者配置WebMvcConfigurer把所有未匹配的请求转发到index.html。Controller public class FallbackController { RequestMapping(value /{path:[^\\.]*}) public String redirect() { return forward:/index.html; } }{path:[^\\.]*}匹配不带点号的路径避免拦截静态资源。这样刷新/books时转发到index.htmlVue Router 接管路由。5.4 跨域配置漏了 OPTIONS 请求现象前端发 POST 请求浏览器报 CORS 错误但后端日志里看不到请求。原因跨域时浏览器先发 OPTIONS 预检请求如果后端没处理 OPTIONS预检失败真正的 POST 不会发出。解决在 SpringBoot 的跨域配置里允许 OPTIONS 方法或者用CorsFilter统一处理。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); } }allowedMethods里必须显式加上OPTIONSallowCredentials(true)允许携带 CookiemaxAge(3600)让预检结果缓存一小时减少 OPTIONS 请求次数。5.5 MyBatis 驼峰映射失效字段名对不上现象数据库字段available_count实体类属性availableCount查询结果里availableCount是 null。原因MyBatis 默认不开启驼峰映射available_count和availableCount对不上。解决在application.yml里加mybatis.configuration.map-underscore-to-camel-case: true。如果用了 MyBatis-Plus这个配置默认开启不用额外加。5.6 打包后静态资源 404Vite 的 base 路径现象Vue 打包后index.html里的 JS 和 CSS 路径是/assets/xxx.js但 SpringBoot 的静态资源在static目录下路径变成/assets/xxx.js找不到。原因Vite 默认base是/打包后资源引用绝对路径。解决在vite.config.js里设置base: ./让资源引用相对路径。这样index.html和assets在同一级目录时能正确加载。6. 进阶技巧用定时任务自动标记超期和生成罚款单借阅系统的超期状态如果只靠还书时计算那学生不还书就永远不知道超期了。更合理的做法是每天凌晨跑一个定时任务扫描所有status 0且due_date now的记录批量更新为status 2并生成罚款单。SpringBoot 的Scheduled注解就能搞定。Component public class OverdueTask { Autowired private BorrowRecordMapper borrowRecordMapper; // 每天凌晨 1 点执行 Scheduled(cron 0 0 1 * * ?) public void markOverdue() { ListBorrowRecord overdueList borrowRecordMapper.selectOverdue(); for (BorrowRecord record : overdueList) { long days ChronoUnit.DAYS.between(record.getDueDate(), LocalDateTime.now()); record.setStatus(2); record.setFine(BigDecimal.valueOf(days * 0.5)); borrowRecordMapper.updateById(record); } System.out.println(超期标记完成共处理 overdueList.size() 条); } }cron 0 0 1 * * ?表示每天 1 点执行selectOverdue的 SQL 是SELECT * FROM borrow_record WHERE status 0 AND due_date NOW()。批量更新时要注意如果记录很多分批处理避免长事务。另外定时任务默认单线程如果执行时间超过间隔会重叠执行可以在配置里加spring.task.scheduling.pool.size2开多线程。验证定时任务是否生效不用等到凌晨。把 cron 改成0 */1 * * * ?每分钟执行观察控制台输出和数据库status字段变化确认逻辑正确后再改回凌晨。这个技巧我每次写定时任务都会用比等一晚上靠谱得多。还有一个容易忽略的点罚款金额的精度。BigDecimal.valueOf(days * 0.5)里days是 long0.5是 double相乘后转 BigDecimal 可能引入精度误差。更稳妥的写法是BigDecimal.valueOf(days).multiply(new BigDecimal(0.5))全程用 BigDecimal 运算。这个细节在金额计算里是血泪教训一旦对不上账排查起来非常麻烦。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/7 5:46:51 · 阅读 1.2k SpringBoot+Vue校园图书借阅系统：库存扣减、超期计算与前后端联调实战
简介本资源为基于SpringBoot与Vue的校园图书借阅与管理系统完整项目源码面向计算机专业学生、Java全栈开发者及需要课程设计或毕业设计参考的技术人员帮助解决图书借阅管理场景下的前后端分离开发与权限控制问题。压缩包共1087个文件约1.8MB以559个js脚本、160个md说明文档、117个json配置、30个java后端源码、25个yml配置文件及17个vue组件为主另含少量sql、html、css与dockerfile等覆盖依赖库、项目配置与业务代码。系统包含用户、图书管理、借阅、预约、统计分析与权限控制六大模块采用JWT认证、Spring Data JPA、Vuex与Vue Router实现遵循RESTful API设计并基于MySQL存储数据。目前已有259人学习适合需要完整项目结构、接口设计与前后端协作思路的读者参考借鉴。1. 校园图书借阅系统为什么总在“借书”这一步翻车做过校园项目的都知道图书借阅管理系统的演示视频里借书、还书、查库存三步走得行云流水可一旦放到真实场景——几百个学生同时抢一本热门教材、管理员在后台手动改库存、超期罚款按天滚动计算——系统就开始出问题。这不是技术选型的问题而是业务边界没划清楚。基于 SpringBoot 和 Vue 的校园图书借阅与管理系统核心要解决的就是三件事图书库存的并发扣减、借阅记录的准确追踪、以及前后端分离下的权限控制。它适合正在做课程设计的学生、需要快速交付内部工具的后端开发者以及想拿一个完整项目练手 SpringBoot 和 Vue 全栈配合的人。这篇文章不讲空泛的架构图只讲怎么把借阅流程跑通、库存怎么防超卖、前后端怎么联调以及我踩过的那些坑。2. 技术选型与项目骨架为什么是 SpringBoot Vue 而不是别的2.1 后端选 SpringBoot 的四个现实理由校园图书借阅系统的业务复杂度不高但要求快速出活、方便调试、部署简单。SpringBoot 在这三点上几乎没有对手。第一内嵌 Tomcat打成 jar 包直接java -jar就能跑不需要额外装 Web 服务器宝塔面板里用 Docker 部署也就是一条命令的事。第二starter 依赖把 MyBatis、MySQL 驱动、JSON 处理全部打包好pom.xml里加几个依赖就能开工不用像传统 SSM 那样写一堆 XML 配置。第三SpringBoot 的自动配置机制让数据源、事务管理器、MVC 视图解析器全部默认就绪你只需要关注业务代码。第四社区资料足够多遇到springboot版本太高导致的兼容性问题搜一下就能找到降级方案。我一般会选 SpringBoot 2.7.x 这个版本原因是它同时兼容 JDK 8 和 JDK 17而很多学校的实验环境还停留在 JDK 8。如果你用 JDK 17SpringBoot 3.x 也可以但要注意javax.servlet已经换成jakarta.servlet老代码直接迁移会报错。数据库用 MySQL 8.0连接串里记得加serverTimezoneAsia/Shanghai否则借阅时间会差 8 小时这个坑后面还会细说。2.2 前端选 Vue 的考虑与版本选择Vue 在这个项目里的角色是提供管理后台和学生端界面。选 Vue 而不是 React 或 Angular主要因为上手快、模板语法直观、和 Element Plus 这类 UI 库配合默契。校园项目的前端页面无非是表格、表单、弹窗、分页Element Plus 的el-table、el-form、el-dialog能覆盖 90% 的需求。版本上Vue 3 Vite Pinia 是当前的主流组合。Vite 的冷启动速度比 Webpack 快一个数量级改样式几乎秒级热更新。如果你还在用 Vue 2 Webpack开发体验会差很多但 Vue 2 的生态更成熟遇到vue和edge冲突这类浏览器兼容问题时资料更多。我的建议是新项目直接上 Vue 3用script setup语法代码量能少三分之一。2.3 项目骨架搭建从零到能跑的最小步骤先建后端。用 Spring Initializr 或者 IDEA 的 Spring Boot 插件生成项目勾选 Spring Web、MyBatis Framework、MySQL Driver、Lombok。生成后的目录结构是标准的src/main/java下放启动类和控制器src/main/resources下放application.yml和 mapper XML。# application.yml 最小配置 server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/library?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.campus.library.entity这段配置里serverTimezoneAsia/Shanghai必须加否则 Java 的LocalDateTime写入 MySQL 时会按 UTC 时间存读出来就少了 8 小时。mapper-locations告诉 MyBatis 去哪里找 XML 映射文件type-aliases-package让实体类不用写全限定名。再建前端。用npm create vitelatest library-frontend -- --template vue生成 Vue 3 项目然后安装依赖npm install element-plus axios vue-router pinia npm install -D unplugin-auto-import unplugin-vue-componentsunplugin-auto-import和unplugin-vue-components用来按需引入 Element Plus避免打包时把整个 UI 库塞进去。配置在vite.config.js里// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }), ], server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })server.proxy是开发阶段的关键配置。前端跑在 5173 端口后端跑在 8080浏览器直接请求 8080 会跨域。通过代理把/api开头的请求转发到后端changeOrigin让后端以为是同源请求rewrite去掉/api前缀这样后端接口不用额外加/api路径。提示前端打包后放进 SpringBoot 的static目录是一种常见部署方式但要注意 Vue Router 的 history 模式需要后端配置 fallback否则刷新页面会 404。3. 数据库设计与借阅核心逻辑库存扣减和超期计算怎么做3.1 四张核心表与字段设计校园图书借阅系统的数据库不需要太复杂四张表就能撑起来book图书、user用户、borrow_record借阅记录、category分类。关键字段设计如下表名字段类型说明bookidBIGINT主键自增bookisbnVARCHAR(20)唯一索引防止重复录入booktitleVARCHAR(200)书名booktotal_countINT总库存bookavailable_countINT可借库存borrow_recordidBIGINT主键borrow_recorduser_idBIGINT借阅人borrow_recordbook_idBIGINT图书borrow_recordborrow_dateDATETIME借出时间borrow_recorddue_dateDATETIME应还时间borrow_recordreturn_dateDATETIME实际归还时间borrow_recordstatusTINYINT0借出 1已还 2超期available_count是库存扣减的核心字段。每次借书available_count - 1还书 1。total_count和available_count分开存是为了在图书丢失或损坏时能单独调整可借数量而不影响总库存记录。3.2 借书接口的库存扣减乐观锁还是悲观锁库存扣减最怕超卖。两个学生同时借同一本书如果代码写成先查再改就会出现都查到available_count 1然后都扣减最后库存变成 -1。解决方式有两种悲观锁和乐观锁。悲观锁用SELECT ... FOR UPDATE在事务里锁住行其他事务排队等待。写法简单但并发高时响应变慢。乐观锁用版本号或条件更新SQL 写成UPDATE book SET available_count available_count - 1 WHERE id ? AND available_count 0根据返回的影响行数判断是否成功。这种方式没有锁等待适合校园场景的并发量。// BookMapper.java Update(UPDATE book SET available_count available_count - 1 WHERE id #{bookId} AND available_count 0) int decreaseStock(Param(bookId) Long bookId); // BorrowService.java Transactional public Result borrowBook(Long userId, Long bookId) { // 先检查用户是否已借同一本书且未还 int borrowing borrowRecordMapper.countByUserAndBook(userId, bookId); if (borrowing 0) { return Result.fail(您已借阅此书请先归还); } // 扣减库存影响行数为 0 说明库存不足 int affected bookMapper.decreaseStock(bookId); if (affected 0) { return Result.fail(库存不足借阅失败); } // 写入借阅记录 BorrowRecord record new BorrowRecord(); record.setUserId(userId); record.setBookId(bookId); record.setBorrowDate(LocalDateTime.now()); record.setDueDate(LocalDateTime.now().plusDays(30)); record.setStatus(0); borrowRecordMapper.insert(record); return Result.success(借阅成功); }decreaseStock的 SQL 里available_count 0是防超卖的关键条件。Transactional保证扣库存和写记录在同一个事务里任何一步失败都回滚。countByUserAndBook用来防止同一用户重复借同一本书这个检查放在扣库存之前避免无效扣减。3.3 还书与超期罚款的计算逻辑还书时要做三件事更新借阅记录的状态和归还时间、恢复库存、计算是否超期。超期天数用ChronoUnit.DAYS.between(dueDate, returnDate)计算如果大于 0 就按每天 0.5 元生成罚款记录。Transactional public Result returnBook(Long recordId) { BorrowRecord record borrowRecordMapper.selectById(recordId); if (record null || record.getStatus() 1) { return Result.fail(借阅记录不存在或已归还); } LocalDateTime now LocalDateTime.now(); record.setReturnDate(now); record.setStatus(1); // 计算超期天数 long overdueDays ChronoUnit.DAYS.between(record.getDueDate(), now); if (overdueDays 0) { record.setStatus(2); BigDecimal fine BigDecimal.valueOf(overdueDays * 0.5); record.setFine(fine); } borrowRecordMapper.updateById(record); bookMapper.increaseStock(record.getBookId()); return Result.success(归还成功); }ChronoUnit.DAYS.between返回的是完整天数比如应还时间是 1 号实际 3 号还返回 2。罚款金额用BigDecimal而不是double避免浮点精度问题。increaseStock就是简单的available_count 1但要注意加上限判断防止还书次数异常导致库存超过total_count。注意如果系统允许续借due_date要能修改同时要记录续借次数一般限制最多续借一次。4. 前后端联调与权限控制登录、路由守卫和接口封装4.1 登录认证JWT 还是 Session前后端分离项目里Session 依赖 Cookie跨域时配置麻烦所以 JWT 是更常见的选择。登录成功后后端生成 token前端存到 localStorage每次请求通过 Axios 拦截器放到Authorization头里。后端写一个拦截器或过滤器校验 token 的有效性解析出用户 ID 和角色。// JwtUtil.java 核心方法 public static String generateToken(Long userId, String role) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() 86400000)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); }setExpiration设置 24 小时过期claim(role, role)把角色写进 token前端可以根据角色动态渲染菜单。SECRET要放在配置文件里不要硬编码在代码中。4.2 前端路由守卫与动态菜单Vue Router 的beforeEach守卫用来判断用户是否登录、是否有权限访问目标页面。如果 token 不存在就跳转到登录页如果角色不匹配就跳转到 403 页面。// router/index.js router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role to.meta.role ! localStorage.getItem(role)) { next(/403) } else { next() } })to.meta.requiresAuth在路由配置里标记哪些页面需要登录to.meta.role标记哪些页面只允许管理员访问。这样学生登录后看不到管理后台的入口管理员能看到全部菜单。4.3 Axios 封装与统一错误处理前端所有请求走一个 Axios 实例请求拦截器加 token响应拦截器统一处理错误码。后端返回格式统一为{ code, message, data }code为 200 表示成功401 表示未登录403 表示无权限。// utils/request.js import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) if (res.code 401) router.push(/login) return Promise.reject(new Error(res.message)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } )请求拦截器自动加Bearer前缀响应拦截器在code ! 200时弹出错误提示401 时跳转登录页。这样业务代码里只需要写const data await request.get(/books)不用每次都判断错误码。提示vue打包放进springboot中时Axios 的baseURL要改成/因为打包后前端和后端同源不需要代理前缀。5. 部署与避坑那些让我熬夜排查的六个问题5.1 时间差 8 小时时区配置的连锁反应现象借阅记录里的borrow_date比实际时间少 8 小时超期计算因此出错。原因MySQL 连接串没加serverTimezone或者加了但值不对。Java 的LocalDateTime.now()取的是系统时区时间如果 JVM 时区是 UTC写入 MySQL 就会按 UTC 存。解决连接串加serverTimezoneAsia/Shanghai同时在启动类里加PostConstruct设置TimeZone.setDefault(TimeZone.getTimeZone(Asia/Shanghai))。两个地方都配才能保证从 Java 到 MySQL 全链路时区一致。5.2 库存扣成负数并发下的超卖现象压测时available_count出现 -1。原因扣减 SQL 没加available_count 0条件或者加了但事务隔离级别是 READ COMMITTED两个事务同时读到 1 然后都扣。解决用条件更新WHERE available_count 0根据影响行数判断。如果影响行数为 0直接返回库存不足不要继续写借阅记录。另外把事务隔离级别设为 REPEATABLE READMySQL 默认配合条件更新就能防住。5.3 前端刷新 404history 模式的后端 fallback现象Vue 打包后放进 SpringBoot 的static目录访问/books正常但刷新页面就 404。原因Vue Router 的 history 模式依赖前端路由刷新时浏览器直接请求/booksSpringBoot 找不到这个路径。解决写一个ErrorController或者配置WebMvcConfigurer把所有未匹配的请求转发到index.html。Controller public class FallbackController { RequestMapping(value /{path:[^\\.]*}) public String redirect() { return forward:/index.html; } }{path:[^\\.]*}匹配不带点号的路径避免拦截静态资源。这样刷新/books时转发到index.htmlVue Router 接管路由。5.4 跨域配置漏了 OPTIONS 请求现象前端发 POST 请求浏览器报 CORS 错误但后端日志里看不到请求。原因跨域时浏览器先发 OPTIONS 预检请求如果后端没处理 OPTIONS预检失败真正的 POST 不会发出。解决在 SpringBoot 的跨域配置里允许 OPTIONS 方法或者用CorsFilter统一处理。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); } }allowedMethods里必须显式加上OPTIONSallowCredentials(true)允许携带 CookiemaxAge(3600)让预检结果缓存一小时减少 OPTIONS 请求次数。5.5 MyBatis 驼峰映射失效字段名对不上现象数据库字段available_count实体类属性availableCount查询结果里availableCount是 null。原因MyBatis 默认不开启驼峰映射available_count和availableCount对不上。解决在application.yml里加mybatis.configuration.map-underscore-to-camel-case: true。如果用了 MyBatis-Plus这个配置默认开启不用额外加。5.6 打包后静态资源 404Vite 的 base 路径现象Vue 打包后index.html里的 JS 和 CSS 路径是/assets/xxx.js但 SpringBoot 的静态资源在static目录下路径变成/assets/xxx.js找不到。原因Vite 默认base是/打包后资源引用绝对路径。解决在vite.config.js里设置base: ./让资源引用相对路径。这样index.html和assets在同一级目录时能正确加载。6. 进阶技巧用定时任务自动标记超期和生成罚款单借阅系统的超期状态如果只靠还书时计算那学生不还书就永远不知道超期了。更合理的做法是每天凌晨跑一个定时任务扫描所有status 0且due_date now的记录批量更新为status 2并生成罚款单。SpringBoot 的Scheduled注解就能搞定。Component public class OverdueTask { Autowired private BorrowRecordMapper borrowRecordMapper; // 每天凌晨 1 点执行 Scheduled(cron 0 0 1 * * ?) public void markOverdue() { ListBorrowRecord overdueList borrowRecordMapper.selectOverdue(); for (BorrowRecord record : overdueList) { long days ChronoUnit.DAYS.between(record.getDueDate(), LocalDateTime.now()); record.setStatus(2); record.setFine(BigDecimal.valueOf(days * 0.5)); borrowRecordMapper.updateById(record); } System.out.println(超期标记完成共处理 overdueList.size() 条); } }cron 0 0 1 * * ?表示每天 1 点执行selectOverdue的 SQL 是SELECT * FROM borrow_record WHERE status 0 AND due_date NOW()。批量更新时要注意如果记录很多分批处理避免长事务。另外定时任务默认单线程如果执行时间超过间隔会重叠执行可以在配置里加spring.task.scheduling.pool.size2开多线程。验证定时任务是否生效不用等到凌晨。把 cron 改成0 */1 * * * ?每分钟执行观察控制台输出和数据库status字段变化确认逻辑正确后再改回凌晨。这个技巧我每次写定时任务都会用比等一晚上靠谱得多。还有一个容易忽略的点罚款金额的精度。BigDecimal.valueOf(days * 0.5)里days是 long0.5是 double相乘后转 BigDecimal 可能引入精度误差。更稳妥的写法是BigDecimal.valueOf(days).multiply(new BigDecimal(0.5))全程用 BigDecimal 运算。这个细节在金额计算里是血泪教训一旦对不上账排查起来非常麻烦。希望帮到你。本文还有配套的精品资源点击获取