简介一份基于SpringBoot、Vue和MySql的网上图书管理系统完整项目面向计算机专业学生、准备毕业设计或做课程设计的开发者也适合需要项目实战练习的初级学习者。整套代码由导师指导完成并获得高分评价后端与前端代码齐全附带数据库脚本和部署说明能够帮助读者从零搭建一个可运行的图书管理应用。压缩包共152个文件约10.82MB其中75个Java文件实现后端业务逻辑18个Vue文件与14个TypeScript文件等构成前端界面SQL脚本负责初始化数据XML、YML等提供项目配置整体目录清晰便于按模块查阅。目前已有446人学习下载适合想快速理解前后端分离开发流程、需要完整项目模板的人。借助这套项目可以掌握环境配置、数据库设计、接口调用和页面交互等关键环节也可直接用于答辩展示或继续二次开发。1. 为什么这个图书管理系统值得你拆一遍做毕设或课程设计时“图书管理系统”是最容易被低估的题目很多人以为就是几个CRUD页面拼在一起结果真动手才发现借阅状态流转、库存一致性、统计图表、前后端跨域这些问题哪一个都能卡住半天。这套基于SpringBootVueMySql的网上图书管理系统不是那种只有增删改查的空壳它把图书管理常见业务闭环都走通了图书分类、库存管理、用户借还、逾期状态、图表统计而且自带了完整的SQL脚本和部署说明适合正在做Java Web方向大作业的学生也适合想快速上手一个前后端分离项目的开发者。更实际的是它的代码结构比较规整Service层、Mapper层、Controller层分得清楚Vue端页面和路由也按模块组织拿来做二次开发比从零搭框架省事得多。2. SpringBoot后端的数据建模与接口设计2.1 图书管理系统的表结构怎么拆才不返工先看数据库设计。很多人在这一步就偷懒把图书信息和借阅记录塞在同一张表里后面统计和扩展全被卡死。这套系统的表结构走的是常规但合理的拆分方案图书表、用户表、借阅记录表、分类表四张核心表各自独立借阅记录通过外键关联图书和用户。以图书表为例比较关键的字段不只是书名和作者还有库存总量和当前可借数量这两个字段要分开设计。原因在于图书被借走时扣减的是可借数量而总量保持不变这样后续做“馆藏统计”时直接查总量字段即可不需要再去借阅记录里反向推算。分类表与图书表是一对多关系每个分类下挂多本图书。借阅记录表则要同时记录借出时间、应还时间和实际归还时间这样逾期判断才能直接通过SQL条件完成。表名核心字段作用categoryid, name图书分类支撑分类统计bookid, isbn, name, author, category_id, total, stock图书基本信息与库存userid, username, password, role用户认证与权限区分borrow_recordid, user_id, book_id, borrow_time, due_time, return_time, status借还全流程记录注意库存字段命名避免使用count这类MySQL保留字否则写SQL时每次都要加反引号非常容易踩坑。另外借阅记录表的status字段建议用TINYINT存数字状态0表示借出、1表示已还、2表示逾期不要直接存中文字符串查询效率和数据一致性都更好。2.2 SpringBoot分层结构与配置文件的坑后端代码分层的惯例是 Controller 接收请求、Service 处理业务逻辑、Mapper 操作数据库。这套系统在这个基础上把查询逻辑集中在 Service 层Controller 保持得很薄这是正确的做法。新手常见的问题是所有逻辑堆在 Controller 里导致一个方法上百行后期根本没法维护。application.yml里最值得注意的是数据库连接配置。MySQL 8.x 版本的驱动类名和时区设置与 5.x 不同如果拿到源码后直接用自己的本地 MySQL 连接很可能报时区错误spring: datasource: url: jdbc:mysql://localhost:3306/book_manager?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这里的serverTimezoneAsia/Shanghai就是 MySQL 8.x 常见的坑点不加上会直接抛The server time zone value异常。characterEncodingutf8保证中文数据不乱码。useSSLfalse是因为本地开发环境没有配置 SSL 证书保持 false 可以避免连接警告。如果你的 MySQL 版本是 5.7driver-class-name 要改成com.mysql.jdbc.Driver其他配置保持不变。2.3 图书分页查询接口的写法图书列表页面必然要分页这套系统的分页查询逻辑可以作为标准范式来参考。它使用 MyBatis 作为持久层框架分页参数通过实体类传递Service public class BookServiceImpl implements BookService { Autowired private BookMapper bookMapper; Override public PageResultBook pageQuery(BookQuery query) { // 计算偏移量前端传currentPage从1开始 int offset (query.getCurrentPage() - 1) * query.getPageSize(); ListBook books bookMapper.selectPage(query, offset); Long total bookMapper.countByQuery(query); return PageResult.of(books, total, query.getCurrentPage()); } }这段代码的关键在于分页参数没有直接写在 SQL 里而是通过BookQuery对象统一封装这样当前端要增加按分类筛选、按书名模糊搜索时只需要在 Query 对象里加字段、在 Mapper XML 里加对应的if判断不需要改动 Service 和 Controller扩展性比硬编码参数好很多。offset的计算方式是(页码 - 1) * 每页条数前端如果从 0 开始传页码这里要相应去掉减 1 的操作。对应的 Mapper XML 里使用where标签动态拼接条件是非常实用的写法select idselectPage resultTypecom.example.entity.Book SELECT * FROM book where if testquery.name ! null and query.name ! AND name LIKE CONCAT(%, #{query.name}, %) /if if testquery.categoryId ! null AND category_id #{query.categoryId} /if /where LIMIT #{offset}, #{query.pageSize} /selectwhere标签会自动去掉第一个AND不需要担心拼接错误。LIKE CONCAT(%, #{query.name}, %)的写法也是刻意不用LIKE %${name}%前者是预编译传参防止 SQL 注入后者是字符串拼接存在注入风险。拿到这套源码后可以全局搜一下如果看到$符号拼接的地方最好改成#占位符的形式。3. 借阅流程与统计图表的Service层实现3.1 借书还书的事务边界怎么定BorrowServiceImpl 是这套系统的核心业务类它处理的不只是简单的插入记录还涉及库存扣减和状态流转。借书的完整流程是校验用户是否存在、校验图书库存是否充足、插入借阅记录、扣减图书库存。这四个步骤必须在一个事务里否则可能出现记录插入了但库存没扣成功的情况。Service public class BorrowServiceImpl implements BorrowService { Autowired private BorrowRecordMapper borrowRecordMapper; Autowired private BookMapper bookMapper; Override Transactional(rollbackFor Exception.class) public boolean borrowBook(BorrowRequest request) { Book book bookMapper.selectById(request.getBookId()); if (book null) { throw new BizException(图书不存在); } // 可借数量不足时直接拒绝 if (book.getStock() 0) { throw new BizException(库存不足); } // 先扣库存再插入借阅记录 int updated bookMapper.decreaseStock(request.getBookId()); if (updated 0) { throw new BizException(库存扣减失败); } BorrowRecord record new BorrowRecord(); record.setUserId(request.getUserId()); record.setBookId(request.getBookId()); // 默认借期30天 record.setDueTime(LocalDateTime.now().plusDays(30)); record.setStatus(0); return borrowRecordMapper.insert(record) 0; } }这里有两个值得学习的细节。第一用Transactional(rollbackFor Exception.class)而不是只写Transactional是因为 Spring 默认只在遇到 RuntimeException 时回滚如果用BizException这种自定义异常且继承自 Exception不加rollbackFor的话事务不会回滚这是一个非常隐蔽的坑。第二decreaseStock的 SQL 要写UPDATE book SET stock stock - 1 WHERE id #{id} AND stock 0用数据库层面的条件判断来保证库存不会被扣成负数比在 Java 代码里先查询再判断更安全。归还流程则是反向操作更新借阅记录的返回时间和状态同时把库存加回来同样要用事务保证两个操作的原子性。3.2 ChartServiceImpl 里的统计查询怎么优化这个系统的统计图表功能对应 ChartServiceImpl它主要提供两类数据图书分类分布和借阅趋势。分类分布用于前端饼图借阅趋势用于折线图。实现思路是先用聚合查询拿到原始数据再由 Java 层组装成前端需要的结构Service public class ChartServiceImpl implements ChartService { Autowired private BorrowRecordMapper borrowRecordMapper; Override public ListMapString, Object getBorrowTrend(int days) { LocalDate startDate LocalDate.now().minusDays(days); // 按天统计借阅数量 ListMapString, Object rows borrowRecordMapper.countByDay(startDate); // 组装连续日期序列保证前端折线图没有断点 MapString, Long countMap rows.stream().collect( Collectors.toMap( row - row.get(borrowDay).toString(), row - (Long) row.get(totalCount) ) ); ListMapString, Object result new ArrayList(); for (int i days; i 0; i--) { String day LocalDate.now().minusDays(i).toString(); MapString, Object point new HashMap(); point.put(date, day); point.put(count, countMap.getOrDefault(day, 0L)); result.add(point); } return result; } }这段代码的巧妙之处在于SQL 里按天分组的GROUP BY DATE(borrow_time)只会返回有借阅记录的日期如果某天没有借书查询结果里就不会有这天的数据。直接把这个结果返回给前端折线图会出现日期不连续的问题。因此在 Java 层补了一个循环从起始日期到今天逐天生成日期序列查询结果里没有的日期补 0保证折线图曲线是完整的。days参数通常传 7 或 30前端可以在页面上切换近一周和近一个月的趋势。对应的 SQL 也需要看一下原因是统计口径要清晰SELECT DATE(borrow_time) AS borrowDay, COUNT(*) AS totalCount FROM borrow_record WHERE borrow_time #{startDate} GROUP BY DATE(borrow_time) ORDER BY borrowDayDATE(borrow_time)函数把 datetime 类型截断到天粒度borrow_time #{startDate}是半开区间查询startDate在 Java 层已经通过LocalDate.now().minusDays(days)转成了当天零点的时间戳。如果你的 MySQL 版本支持DATE_FORMAT(borrow_time, %Y-%m-%d)效果相同但DATE()函数的执行效率略高一些。当数据量涨到十万级以上时可以给borrow_time加索引这个查询的响应速度会有明显提升。4. Vue3前端页面的路由、接口封装与状态管理4.1 前端目录结构与axios封装方式前端部分的代码组织清晰src/api目录下按业务模块拆分了接口文件src/router里配置了页面路由。拿到源码后第一步要看的不是页面长什么样而是api/request.js这个封装文件因为所有接口请求的公共逻辑都在这里。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器自动携带token 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) { alert(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res.data }, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } ) export default requestbaseURL: /api配合 Vite 的开发代理解决跨域问题默认后端端口是 8080前端开发服务器端口是 5173两者的端口本来就不同直接在浏览器里请求必然跨域。前端加/api前缀开发环境里由 Vite 把请求转发到后端生产环境里由 Nginx 做同样的事。响应拦截器里判断res.code ! 200这是约定后端所有成功响应的业务码都是 200如果登录过期则统一跳转登录页不需要每个页面重复写错误处理逻辑。4.2 图书管理页面与路由参数的联动Vue 页面的重点在图书管理视图和借阅记录视图的交互。图书管理页面通过路由参数传递查询条件这样刷新页面后筛选条件不会丢失// router/index.js 中的路由配置 { path: /books, name: BookList, component: () import(../views/BookList.vue) } // 页面中监听路由变化触发查询 const route useRoute() const pageQuery reactive({ currentPage: 1, pageSize: 10, name: route.query.name || , categoryId: route.query.categoryId || null }) watch( () route.query, (newQuery) { pageQuery.name newQuery.name || pageQuery.categoryId newQuery.categoryId || null fetchBookList() } )这段代码解决的问题是用户在搜索框输入书名后点击查询前端把参数拼到 URL 上同时更新响应式数据触发查询。当用户点击浏览器的后退按钮时route.query变化被watch监听到列表自动刷新整个交互不需要额外的事件总线或全局状态管理。categoryId没有用 0 作为默认值而是用null原因是在后端的if判断里写了query.categoryId ! null如果传 0 会导致前端永远查不到未分类的图书。4.3 ESLint和样式文件的作用.eslintrc.cjs是前端代码规范检查配置这个文件很多人忽略但如果你是用更高版本的 Node.js 运行旧项目npm install时会出现 eslint 版本不兼容的报错。base.css和main.css分别存放全局重置样式和项目通用样式main.css里有几个常用 class 可以直接复用比如.page-container统一页面边距、.search-bar统一搜索表单布局写新页面时先检查这些已有的公共类可以减少大量重复样式代码。/* main.css 中的公共样式片段 */ .page-container { padding: 20px; background: #fff; border-radius: 4px; } .search-bar { display: flex; gap: 12px; margin-bottom: 16px; }这些样式类的命名方式是 BEM 的简化版不嵌套太深维护成本低。如果你想把前端改成 Element Plus 的布局风格可以直接替换main.css里的自定义组件样式不影响业务逻辑代码。eslintrc.cjs里如果用了plugin:vue/vue3-recommended规则集Vue 单文件组件的代码顺序会被强制检查可以用npm run lint -- --fix自动修复大部分格式问题。5. 从源码到可运行数据库初始化与部署排错5.1 本地部署的完整命令顺序拿到源码包后典型的部署路径是在本地启动 MySQL、后端 SpringBoot 和前端 Vite 开发服务器三个进程。先确保本机已经装好 JDK 8、Maven 3.6、Node.js 16然后用命令行按顺序执行# 1. 初始化数据库 mysql -u root -p book_manager.sql # 2. 启动后端在项目backend目录下 mvn spring-boot:run # 3. 启动前端在项目frontend目录下 npm install npm run devmysql -u root -p book_manager.sql这条命令会把 SQL 脚本里的建库、建表、插入初始数据一次性执行完。注意执行前要确认脚本里没有DROP DATABASE IF EXISTS这种危险语句如果有确认不会误删自己的其他数据库再执行。后端启动后默认监听 8080 端口前端启动后在浏览器访问http://localhost:5173Vite 开发服务器会自动把/api请求转发到 8080。如果npm install在 Windows 上报权限错误用管理员身份打开终端再执行一次或者先执行npm cache clean --force清理缓存。如果mvn spring-boot:run下载依赖时卡住检查 Maven 的settings.xml是否配置了阿里云镜像没配的话在mirrors节点里加一段mirror否则从中央仓库拉取 SpringBoot 依赖会非常慢。5.2 数据库连接失败的五种常见原因部署过程里 80% 的问题出在数据库连接上下面按出现频率列出最常见的五种情况症状原因解决方法Access denied for user密码或用户名不对检查 application.yml 的 username/passwordUnknown database数据库名不存在执行建库语句CREATE DATABASE book_managerPublic Key Retrieval is not allowedMySQL 8.0 认证插件问题连接串加allowPublicKeyRetrievaltrueThe server time zone value时区未指定连接串加serverTimezoneAsia/ShanghaiPort 3306 is already in use本地 MySQL 已被占用改用netstat -ano找到占用进程后处理Public Key Retrieval is not allowed是 MySQL 8.0 特有的问题旧版本的驱动不会报这个错升级到 8.x 后连接串里如果没有这个参数首次连接时会被拒绝。如果你的 MySQL 是别人帮着装的密码可能不是root/123456最快的排查方式是先用命令行工具试连一次mysql -u root -p能连上说明是配置文件的问题连不上说明 MySQL 服务本身没启动或密码不对。5.3 给图表统计加一个定时汇总的优化方案这套系统的借阅趋势图表是实时查borrow_record表按天聚合的数据量几千条时没有任何压力但如果用在真实场景每年的借阅记录轻松超过百万条每次打开首页都跑一次GROUP BY DATE(borrow_time)全表聚合会让接口响应变得很慢。常见做法是加一张日汇总表定时任务每天凌晨计算前一天的数据图表接口只需要查这张汇总表Component public class BorrowStatTask { Autowired private BorrowRecordMapper borrowRecordMapper; // 每天凌晨1点执行昨天的数据汇总 Scheduled(cron 0 0 1 * * ?) public void dailyStat() { String yesterday LocalDate.now().minusDays(1).toString(); Long count borrowRecordMapper.countByDate(yesterday); borrowRecordMapper.insertDailyStat(yesterday, count); } }Scheduled(cron 0 0 1 * * ?)是 Spring 定时任务的 Cron 表达式从左到右依次是秒、分、时、日、月、周。0 0 1 * * ?表示每天凌晨 1 点整执行?是周字段的占位符表示不指定具体星期几。启动类上需要加EnableScheduling注解才会扫描这些定时任务。对应地图表的 Service 层也由实时查borrow_record改成查borrow_day_stat汇总表ChartServiceImpl 的整体结构不变只是 Mapper 换了一张表。优化后图表接口的响应时间从几百毫秒降到几十毫秒而且borrow_day_stat表本身很小上百年的记录也只有几万行。如果需要看小时级粒度把汇总粒度从day调成hour即可COUNT(*)的查询条件从 yesterday改成BETWEEN startTime AND endTime这套数据结构能够平滑扩展。本文还有配套的精品资源点击获取 SpringBoot+Vue图书管理系统实战：从数据建模到部署优化全解析
简介一份基于SpringBoot、Vue和MySql的网上图书管理系统完整项目面向计算机专业学生、准备毕业设计或做课程设计的开发者也适合需要项目实战练习的初级学习者。整套代码由导师指导完成并获得高分评价后端与前端代码齐全附带数据库脚本和部署说明能够帮助读者从零搭建一个可运行的图书管理应用。压缩包共152个文件约10.82MB其中75个Java文件实现后端业务逻辑18个Vue文件与14个TypeScript文件等构成前端界面SQL脚本负责初始化数据XML、YML等提供项目配置整体目录清晰便于按模块查阅。目前已有446人学习下载适合想快速理解前后端分离开发流程、需要完整项目模板的人。借助这套项目可以掌握环境配置、数据库设计、接口调用和页面交互等关键环节也可直接用于答辩展示或继续二次开发。1. 为什么这个图书管理系统值得你拆一遍做毕设或课程设计时“图书管理系统”是最容易被低估的题目很多人以为就是几个CRUD页面拼在一起结果真动手才发现借阅状态流转、库存一致性、统计图表、前后端跨域这些问题哪一个都能卡住半天。这套基于SpringBootVueMySql的网上图书管理系统不是那种只有增删改查的空壳它把图书管理常见业务闭环都走通了图书分类、库存管理、用户借还、逾期状态、图表统计而且自带了完整的SQL脚本和部署说明适合正在做Java Web方向大作业的学生也适合想快速上手一个前后端分离项目的开发者。更实际的是它的代码结构比较规整Service层、Mapper层、Controller层分得清楚Vue端页面和路由也按模块组织拿来做二次开发比从零搭框架省事得多。2. SpringBoot后端的数据建模与接口设计2.1 图书管理系统的表结构怎么拆才不返工先看数据库设计。很多人在这一步就偷懒把图书信息和借阅记录塞在同一张表里后面统计和扩展全被卡死。这套系统的表结构走的是常规但合理的拆分方案图书表、用户表、借阅记录表、分类表四张核心表各自独立借阅记录通过外键关联图书和用户。以图书表为例比较关键的字段不只是书名和作者还有库存总量和当前可借数量这两个字段要分开设计。原因在于图书被借走时扣减的是可借数量而总量保持不变这样后续做“馆藏统计”时直接查总量字段即可不需要再去借阅记录里反向推算。分类表与图书表是一对多关系每个分类下挂多本图书。借阅记录表则要同时记录借出时间、应还时间和实际归还时间这样逾期判断才能直接通过SQL条件完成。表名核心字段作用categoryid, name图书分类支撑分类统计bookid, isbn, name, author, category_id, total, stock图书基本信息与库存userid, username, password, role用户认证与权限区分borrow_recordid, user_id, book_id, borrow_time, due_time, return_time, status借还全流程记录注意库存字段命名避免使用count这类MySQL保留字否则写SQL时每次都要加反引号非常容易踩坑。另外借阅记录表的status字段建议用TINYINT存数字状态0表示借出、1表示已还、2表示逾期不要直接存中文字符串查询效率和数据一致性都更好。2.2 SpringBoot分层结构与配置文件的坑后端代码分层的惯例是 Controller 接收请求、Service 处理业务逻辑、Mapper 操作数据库。这套系统在这个基础上把查询逻辑集中在 Service 层Controller 保持得很薄这是正确的做法。新手常见的问题是所有逻辑堆在 Controller 里导致一个方法上百行后期根本没法维护。application.yml里最值得注意的是数据库连接配置。MySQL 8.x 版本的驱动类名和时区设置与 5.x 不同如果拿到源码后直接用自己的本地 MySQL 连接很可能报时区错误spring: datasource: url: jdbc:mysql://localhost:3306/book_manager?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这里的serverTimezoneAsia/Shanghai就是 MySQL 8.x 常见的坑点不加上会直接抛The server time zone value异常。characterEncodingutf8保证中文数据不乱码。useSSLfalse是因为本地开发环境没有配置 SSL 证书保持 false 可以避免连接警告。如果你的 MySQL 版本是 5.7driver-class-name 要改成com.mysql.jdbc.Driver其他配置保持不变。2.3 图书分页查询接口的写法图书列表页面必然要分页这套系统的分页查询逻辑可以作为标准范式来参考。它使用 MyBatis 作为持久层框架分页参数通过实体类传递Service public class BookServiceImpl implements BookService { Autowired private BookMapper bookMapper; Override public PageResultBook pageQuery(BookQuery query) { // 计算偏移量前端传currentPage从1开始 int offset (query.getCurrentPage() - 1) * query.getPageSize(); ListBook books bookMapper.selectPage(query, offset); Long total bookMapper.countByQuery(query); return PageResult.of(books, total, query.getCurrentPage()); } }这段代码的关键在于分页参数没有直接写在 SQL 里而是通过BookQuery对象统一封装这样当前端要增加按分类筛选、按书名模糊搜索时只需要在 Query 对象里加字段、在 Mapper XML 里加对应的if判断不需要改动 Service 和 Controller扩展性比硬编码参数好很多。offset的计算方式是(页码 - 1) * 每页条数前端如果从 0 开始传页码这里要相应去掉减 1 的操作。对应的 Mapper XML 里使用where标签动态拼接条件是非常实用的写法select idselectPage resultTypecom.example.entity.Book SELECT * FROM book where if testquery.name ! null and query.name ! AND name LIKE CONCAT(%, #{query.name}, %) /if if testquery.categoryId ! null AND category_id #{query.categoryId} /if /where LIMIT #{offset}, #{query.pageSize} /selectwhere标签会自动去掉第一个AND不需要担心拼接错误。LIKE CONCAT(%, #{query.name}, %)的写法也是刻意不用LIKE %${name}%前者是预编译传参防止 SQL 注入后者是字符串拼接存在注入风险。拿到这套源码后可以全局搜一下如果看到$符号拼接的地方最好改成#占位符的形式。3. 借阅流程与统计图表的Service层实现3.1 借书还书的事务边界怎么定BorrowServiceImpl 是这套系统的核心业务类它处理的不只是简单的插入记录还涉及库存扣减和状态流转。借书的完整流程是校验用户是否存在、校验图书库存是否充足、插入借阅记录、扣减图书库存。这四个步骤必须在一个事务里否则可能出现记录插入了但库存没扣成功的情况。Service public class BorrowServiceImpl implements BorrowService { Autowired private BorrowRecordMapper borrowRecordMapper; Autowired private BookMapper bookMapper; Override Transactional(rollbackFor Exception.class) public boolean borrowBook(BorrowRequest request) { Book book bookMapper.selectById(request.getBookId()); if (book null) { throw new BizException(图书不存在); } // 可借数量不足时直接拒绝 if (book.getStock() 0) { throw new BizException(库存不足); } // 先扣库存再插入借阅记录 int updated bookMapper.decreaseStock(request.getBookId()); if (updated 0) { throw new BizException(库存扣减失败); } BorrowRecord record new BorrowRecord(); record.setUserId(request.getUserId()); record.setBookId(request.getBookId()); // 默认借期30天 record.setDueTime(LocalDateTime.now().plusDays(30)); record.setStatus(0); return borrowRecordMapper.insert(record) 0; } }这里有两个值得学习的细节。第一用Transactional(rollbackFor Exception.class)而不是只写Transactional是因为 Spring 默认只在遇到 RuntimeException 时回滚如果用BizException这种自定义异常且继承自 Exception不加rollbackFor的话事务不会回滚这是一个非常隐蔽的坑。第二decreaseStock的 SQL 要写UPDATE book SET stock stock - 1 WHERE id #{id} AND stock 0用数据库层面的条件判断来保证库存不会被扣成负数比在 Java 代码里先查询再判断更安全。归还流程则是反向操作更新借阅记录的返回时间和状态同时把库存加回来同样要用事务保证两个操作的原子性。3.2 ChartServiceImpl 里的统计查询怎么优化这个系统的统计图表功能对应 ChartServiceImpl它主要提供两类数据图书分类分布和借阅趋势。分类分布用于前端饼图借阅趋势用于折线图。实现思路是先用聚合查询拿到原始数据再由 Java 层组装成前端需要的结构Service public class ChartServiceImpl implements ChartService { Autowired private BorrowRecordMapper borrowRecordMapper; Override public ListMapString, Object getBorrowTrend(int days) { LocalDate startDate LocalDate.now().minusDays(days); // 按天统计借阅数量 ListMapString, Object rows borrowRecordMapper.countByDay(startDate); // 组装连续日期序列保证前端折线图没有断点 MapString, Long countMap rows.stream().collect( Collectors.toMap( row - row.get(borrowDay).toString(), row - (Long) row.get(totalCount) ) ); ListMapString, Object result new ArrayList(); for (int i days; i 0; i--) { String day LocalDate.now().minusDays(i).toString(); MapString, Object point new HashMap(); point.put(date, day); point.put(count, countMap.getOrDefault(day, 0L)); result.add(point); } return result; } }这段代码的巧妙之处在于SQL 里按天分组的GROUP BY DATE(borrow_time)只会返回有借阅记录的日期如果某天没有借书查询结果里就不会有这天的数据。直接把这个结果返回给前端折线图会出现日期不连续的问题。因此在 Java 层补了一个循环从起始日期到今天逐天生成日期序列查询结果里没有的日期补 0保证折线图曲线是完整的。days参数通常传 7 或 30前端可以在页面上切换近一周和近一个月的趋势。对应的 SQL 也需要看一下原因是统计口径要清晰SELECT DATE(borrow_time) AS borrowDay, COUNT(*) AS totalCount FROM borrow_record WHERE borrow_time #{startDate} GROUP BY DATE(borrow_time) ORDER BY borrowDayDATE(borrow_time)函数把 datetime 类型截断到天粒度borrow_time #{startDate}是半开区间查询startDate在 Java 层已经通过LocalDate.now().minusDays(days)转成了当天零点的时间戳。如果你的 MySQL 版本支持DATE_FORMAT(borrow_time, %Y-%m-%d)效果相同但DATE()函数的执行效率略高一些。当数据量涨到十万级以上时可以给borrow_time加索引这个查询的响应速度会有明显提升。4. Vue3前端页面的路由、接口封装与状态管理4.1 前端目录结构与axios封装方式前端部分的代码组织清晰src/api目录下按业务模块拆分了接口文件src/router里配置了页面路由。拿到源码后第一步要看的不是页面长什么样而是api/request.js这个封装文件因为所有接口请求的公共逻辑都在这里。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器自动携带token 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) { alert(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res.data }, error { if (error.response error.response.status 401) { router.push(/login) } return Promise.reject(error) } ) export default requestbaseURL: /api配合 Vite 的开发代理解决跨域问题默认后端端口是 8080前端开发服务器端口是 5173两者的端口本来就不同直接在浏览器里请求必然跨域。前端加/api前缀开发环境里由 Vite 把请求转发到后端生产环境里由 Nginx 做同样的事。响应拦截器里判断res.code ! 200这是约定后端所有成功响应的业务码都是 200如果登录过期则统一跳转登录页不需要每个页面重复写错误处理逻辑。4.2 图书管理页面与路由参数的联动Vue 页面的重点在图书管理视图和借阅记录视图的交互。图书管理页面通过路由参数传递查询条件这样刷新页面后筛选条件不会丢失// router/index.js 中的路由配置 { path: /books, name: BookList, component: () import(../views/BookList.vue) } // 页面中监听路由变化触发查询 const route useRoute() const pageQuery reactive({ currentPage: 1, pageSize: 10, name: route.query.name || , categoryId: route.query.categoryId || null }) watch( () route.query, (newQuery) { pageQuery.name newQuery.name || pageQuery.categoryId newQuery.categoryId || null fetchBookList() } )这段代码解决的问题是用户在搜索框输入书名后点击查询前端把参数拼到 URL 上同时更新响应式数据触发查询。当用户点击浏览器的后退按钮时route.query变化被watch监听到列表自动刷新整个交互不需要额外的事件总线或全局状态管理。categoryId没有用 0 作为默认值而是用null原因是在后端的if判断里写了query.categoryId ! null如果传 0 会导致前端永远查不到未分类的图书。4.3 ESLint和样式文件的作用.eslintrc.cjs是前端代码规范检查配置这个文件很多人忽略但如果你是用更高版本的 Node.js 运行旧项目npm install时会出现 eslint 版本不兼容的报错。base.css和main.css分别存放全局重置样式和项目通用样式main.css里有几个常用 class 可以直接复用比如.page-container统一页面边距、.search-bar统一搜索表单布局写新页面时先检查这些已有的公共类可以减少大量重复样式代码。/* main.css 中的公共样式片段 */ .page-container { padding: 20px; background: #fff; border-radius: 4px; } .search-bar { display: flex; gap: 12px; margin-bottom: 16px; }这些样式类的命名方式是 BEM 的简化版不嵌套太深维护成本低。如果你想把前端改成 Element Plus 的布局风格可以直接替换main.css里的自定义组件样式不影响业务逻辑代码。eslintrc.cjs里如果用了plugin:vue/vue3-recommended规则集Vue 单文件组件的代码顺序会被强制检查可以用npm run lint -- --fix自动修复大部分格式问题。5. 从源码到可运行数据库初始化与部署排错5.1 本地部署的完整命令顺序拿到源码包后典型的部署路径是在本地启动 MySQL、后端 SpringBoot 和前端 Vite 开发服务器三个进程。先确保本机已经装好 JDK 8、Maven 3.6、Node.js 16然后用命令行按顺序执行# 1. 初始化数据库 mysql -u root -p book_manager.sql # 2. 启动后端在项目backend目录下 mvn spring-boot:run # 3. 启动前端在项目frontend目录下 npm install npm run devmysql -u root -p book_manager.sql这条命令会把 SQL 脚本里的建库、建表、插入初始数据一次性执行完。注意执行前要确认脚本里没有DROP DATABASE IF EXISTS这种危险语句如果有确认不会误删自己的其他数据库再执行。后端启动后默认监听 8080 端口前端启动后在浏览器访问http://localhost:5173Vite 开发服务器会自动把/api请求转发到 8080。如果npm install在 Windows 上报权限错误用管理员身份打开终端再执行一次或者先执行npm cache clean --force清理缓存。如果mvn spring-boot:run下载依赖时卡住检查 Maven 的settings.xml是否配置了阿里云镜像没配的话在mirrors节点里加一段mirror否则从中央仓库拉取 SpringBoot 依赖会非常慢。5.2 数据库连接失败的五种常见原因部署过程里 80% 的问题出在数据库连接上下面按出现频率列出最常见的五种情况症状原因解决方法Access denied for user密码或用户名不对检查 application.yml 的 username/passwordUnknown database数据库名不存在执行建库语句CREATE DATABASE book_managerPublic Key Retrieval is not allowedMySQL 8.0 认证插件问题连接串加allowPublicKeyRetrievaltrueThe server time zone value时区未指定连接串加serverTimezoneAsia/ShanghaiPort 3306 is already in use本地 MySQL 已被占用改用netstat -ano找到占用进程后处理Public Key Retrieval is not allowed是 MySQL 8.0 特有的问题旧版本的驱动不会报这个错升级到 8.x 后连接串里如果没有这个参数首次连接时会被拒绝。如果你的 MySQL 是别人帮着装的密码可能不是root/123456最快的排查方式是先用命令行工具试连一次mysql -u root -p能连上说明是配置文件的问题连不上说明 MySQL 服务本身没启动或密码不对。5.3 给图表统计加一个定时汇总的优化方案这套系统的借阅趋势图表是实时查borrow_record表按天聚合的数据量几千条时没有任何压力但如果用在真实场景每年的借阅记录轻松超过百万条每次打开首页都跑一次GROUP BY DATE(borrow_time)全表聚合会让接口响应变得很慢。常见做法是加一张日汇总表定时任务每天凌晨计算前一天的数据图表接口只需要查这张汇总表Component public class BorrowStatTask { Autowired private BorrowRecordMapper borrowRecordMapper; // 每天凌晨1点执行昨天的数据汇总 Scheduled(cron 0 0 1 * * ?) public void dailyStat() { String yesterday LocalDate.now().minusDays(1).toString(); Long count borrowRecordMapper.countByDate(yesterday); borrowRecordMapper.insertDailyStat(yesterday, count); } }Scheduled(cron 0 0 1 * * ?)是 Spring 定时任务的 Cron 表达式从左到右依次是秒、分、时、日、月、周。0 0 1 * * ?表示每天凌晨 1 点整执行?是周字段的占位符表示不指定具体星期几。启动类上需要加EnableScheduling注解才会扫描这些定时任务。对应地图表的 Service 层也由实时查borrow_record改成查borrow_day_stat汇总表ChartServiceImpl 的整体结构不变只是 Mapper 换了一张表。优化后图表接口的响应时间从几百毫秒降到几十毫秒而且borrow_day_stat表本身很小上百年的记录也只有几万行。如果需要看小时级粒度把汇总粒度从day调成hour即可COUNT(*)的查询条件从 yesterday改成BETWEEN startTime AND endTime这套数据结构能够平滑扩展。本文还有配套的精品资源点击获取