我一月份刚帮一个学弟把这套“共享书角”图书借还管理系统从零搭起来交了毕设今天干脆把整个项目的核心设计和落地过程完整梳理一遍。这个项目是典型的SpringBoot Vue前后端分离架构数据库用的MySQL业务上覆盖图书录入、借阅、归还、预约、逾期统计、用户管理这些图书馆管理系统的基础功能。适合正在做毕业设计、课程设计或者想自己上手练一套Java全栈项目的同学直接参考。先说说这个项目的定位。市面上图书管理类的课设项目不少但大多数停留在“CRUD展示层”也就是把数据增删改查做出来就完了。这套“共享书角”在设计上有一个明显差异业务链路是完整的。从用户注册登录、书目检索、提交借阅申请、管理员审核、实际借出、到期归还、逾期计费到图书状态自动流转整个过程不是简单的表操作而是有状态机逻辑在里面的。这一点放到答辩或者项目描述里含金量会高很多。2. 整体设计与功能拆解2.1 业务角色与权限边界“共享书角”这个场景的本质是一个小型图书流转中心所以系统里的角色划分不需要像大型图书馆那样复杂但三个核心角色必须边界清晰普通用户、图书管理员、系统管理员。普通用户能做什么注册登录、浏览图书列表、按书名/作者/ISBN检索、查看图书详情和库存状态、提交借阅申请、查看自己的借阅记录、在线续借、预约已被借出的书、还书操作、查看个人逾期费用。图书管理员负责的是图书全生命周期管理包括图书信息录入、分类维护、库存盘点、借阅审核同意或拒绝借阅申请、办理还书、登记图书损坏或遗失、生成借阅统计报表。系统管理员侧重在用户治理维度比如用户禁用/启用、重置密码、角色分配、操作日志审计。实际开发中管理员和系统管理员也可以合并成一个角色但分开做在答辩时更有话讲。2.2 功能架构与技术选型逻辑后端选择SpringBoot是当前Java单体应用最合理的选择。SpringBoot 2.7.x版本在稳定性、社区资料、第三方库兼容性上都非常成熟配合MyBatis-Plus做数据访问层能减少大量手写SQL的重复劳动。JDK推荐1.8不要一上来就追JDK 17或21很多高校机房和老项目依赖在JDK 8下最稳。前端选择Vue 2 Element UI而不是Vue 3 Element Plus这里有一个很实际的考量毕业生做毕设一般预留的开发时间是2到4周Vue 2的生态资料量最大遇到问题几乎都能搜到现成答案。Element UI的组件风格也非常适合管理后台类系统表格、表单、对话框、分页这些高频组件直接拿来用不需要自己造轮子。数据库用MySQL 5.7或8.0都可以如果本地之前装过5.7就继续用5.7没必要为了“版本新”而升级。表结构上我后面会详细讲核心是book表、user表、borrow_record表三张主干表外加category分类表、reservation预约表、notice公告表。2.3 为什么选择前后端分离而不是单体JSP很多课设还在用SpringBoot Thymeleaf渲染页面或者直接用JSP开发量确实更小。但前后端分离是现在企业开发的绝对主流而且这个项目的题目里本身就带了“Vue”所以前端必须独立出来。前后端分离的收益是逻辑边界清晰后端只暴露JSON接口前端只负责页面交互两边可以并行开发。前端启动在8080端口后端启动在8081端口避免和前端冲突通过代理转发解决跨域问题。Vue项目里使用axios请求后端接口在vue.config.js里配置devServer代理这样浏览器访问前端域名时同源策略不会拦截彻底避免开发环境的跨域烦恼。3. 工程结构设计与核心依赖管理3.1 后端项目目录结构后端采用标准的Maven多级包结构我在实际搭建时按业务模块分包而不是按技术类型分包这样后续扩展时更好维护。book-corner-server/ ├── src/main/java/com/campus/bookcorner/ │ ├── config/ # 全局配置类 │ │ ├── CorsConfig.java # 跨域配置 │ │ ├── WebMvcConfig.java # 拦截器注册 │ │ └── MybatisPlusConfig.java # 分页插件 │ ├── controller/ # 控制层 │ │ ├── UserController.java │ │ ├── BookController.java │ │ ├── BorrowController.java │ │ ├── CategoryController.java │ │ ├── ReservationController.java │ │ └── AdminController.java │ ├── service/ # 业务逻辑层 │ │ ├── impl/ │ │ ├── UserService.java │ │ ├── BookService.java │ │ └── BorrowService.java │ ├── mapper/ # MyBatis-Plus数据访问层 │ ├── entity/ # 数据库实体类 │ ├── dto/ # 前端交互数据对象 │ ├── common/ # 通用返回结果封装 │ │ ├── Result.java │ │ └── ResultCode.java │ ├── exception/ # 全局异常处理 │ │ └── GlobalExceptionHandler.java │ └── util/ # 工具类 │ ├── JwtUtil.java │ └── PasswordUtil.java └── src/main/resources/ ├── application.yml └── mapper/ # XML文件目录这个结构里有一个容易被新手忽略的点为什么已经有注解SQL了还要保留XML目录因为MyBatis-Plus虽然能完成大部分单表CRUD但一旦涉及到多表联查比如查借阅记录时需要关联图书名称和封面XML里的自定义SQL会比注解拼接更清晰、更易调优。3.2 前端项目目录结构前端用Vue CLI 4或5创建项目在页面结构上差别不大我习惯用Vue CLI 5Webpack版本更新一些编译速度也更快。book-corner-web/ ├── public/ ├── src/ │ ├── api/ # 接口请求统一封装 │ │ ├── request.js # axios实例创建与拦截器 │ │ ├── user.js │ │ └── book.js │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ │ ├── Pagination.vue │ │ └── UploadImage.vue │ ├── router/ # 路由配置 │ │ └── index.js │ ├── store/ # Vuex状态管理 │ │ └── modules/ │ └── views/ # 页面视图 │ ├── login/ │ ├── layout/ │ ├── book/ │ ├── borrow/ │ ├── user/ │ └── dashboard/3.3 Maven核心依赖清单pom.xml里不需要堆砌大量依赖够用即可。我实际项目的核心依赖如下dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.30/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.18/version /dependency /dependencies这里用了Hutool工具包里面封装了加密、日期处理、验证码、文件操作等实用方法能省下不少代码量。JWT用于登录后的身份令牌比cookiesession更适合前后端分离的架构因为后端不需要维护会话状态接口天然无状态对后续扩展移动端小程序也友好。4. 数据库表设计共享书角业务模型详解数据库设计是一套管理系统的地基后面所有功能都建立在这些表的关联关系上。我在设计时遵循三个原则单表字段不要过多不超过20个、关联查询不要超过三张表、状态字段用整数不用字符串。4.1 核心表结构用户表sys_userCREATE TABLE sys_user ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, username varchar(50) NOT NULL COMMENT 登录账号, password varchar(100) NOT NULL COMMENT 密码BCrypt加密, nickname varchar(50) DEFAULT NULL COMMENT 昵称, avatar varchar(255) DEFAULT NULL COMMENT 头像地址, phone varchar(20) DEFAULT NULL COMMENT 手机号, role tinyint(1) NOT NULL DEFAULT 0 COMMENT 角色 0-普通用户 1-管理员 2-超级管理员, status tinyint(1) NOT NULL DEFAULT 0 COMMENT 状态 0-正常 1-禁用, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT用户表;密码字段长度设计为100是给BCrypt加密后60位密文留足余量防止改了算法后字段不够用。用户名唯一索引是必须的这是登录功能的基本前提。图书表bookCREATE TABLE book ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, isbn varchar(20) DEFAULT NULL COMMENT ISBN号, book_name varchar(200) NOT NULL COMMENT 书名, author varchar(100) DEFAULT NULL COMMENT 作者, publisher varchar(100) DEFAULT NULL COMMENT 出版社, category_id bigint(20) DEFAULT NULL COMMENT 分类ID, cover varchar(255) DEFAULT NULL COMMENT 封面图, description text COMMENT 内容简介, total_stock int(11) NOT NULL DEFAULT 1 COMMENT 总库存, available_stock int(11) NOT NULL DEFAULT 1 COMMENT 可借库存, borrow_count int(11) NOT NULL DEFAULT 0 COMMENT 借阅次数, status tinyint(1) NOT NULL DEFAULT 0 COMMENT 状态 0-上架 1-下架, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 录入时间, PRIMARY KEY (id), KEY idx_category (category_id), KEY idx_book_name (book_name) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT图书表;available_stock这个字段是借阅功能的核心每次借出减1每次归还加1。这个字段放在book表里而不是实时统计borrow_record表是典型的“空间换时间”设计避免高并发场景下频繁count查询。当然这也意味着借还操作必须放在事务里执行后面我会专门讲这个坑。借阅记录表borrow_recordCREATE TABLE borrow_record ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, user_id bigint(20) NOT NULL COMMENT 用户ID, book_id bigint(20) NOT NULL COMMENT 图书ID, borrow_code varchar(50) NOT NULL COMMENT 借阅单号, borrow_status tinyint(1) NOT NULL DEFAULT 0 COMMENT 0-待审核 1-借阅中 2-已归还 3-已拒绝 4-已逾期, borrow_time datetime DEFAULT NULL COMMENT 借出时间, due_time datetime DEFAULT NULL COMMENT 应还时间, return_time datetime DEFAULT NULL COMMENT 实际归还时间, renew_count int(11) NOT NULL DEFAULT 0 COMMENT 续借次数, remark varchar(255) DEFAULT NULL COMMENT 备注, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 申请时间, PRIMARY KEY (id), UNIQUE KEY uk_borrow_code (borrow_code), KEY idx_user_id (user_id), KEY idx_book_id (book_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT借阅记录表;borrow_status这个字段是整个借阅流转的状态机0到4五个状态对应了完整借阅生命周期。面试时如果被问到“如何设计一个订单状态机”这个字段的流转逻辑就是现成答案。预约表reservationCREATE TABLE reservation ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键, user_id bigint(20) NOT NULL COMMENT 用户ID, book_id bigint(20) NOT NULL COMMENT 图书ID, reserve_status tinyint(1) NOT NULL DEFAULT 0 COMMENT 0-等待中 1-已通知 2-已取消 3-已完成, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 预约时间, notice_time datetime DEFAULT NULL COMMENT 通知时间, PRIMARY KEY (id), KEY idx_user_book (user_id, book_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT预约表;预约表解决的是热门书被借走后的排队问题。当一本书的available_stock从0变成1时系统需要检查是否有预约记录如果有优先通知最早预约的用户。4.2 表关系与字段设计的几个关键考虑用户和借阅记录是1对N关系图书和借阅记录也是1对N关系。这里故意没有建“用户-图书”的多对多映射表因为借阅记录本身就是关联实体额外建关联表反而是冗余设计。借阅单号borrow_code我采用的是“B”年月日四位随机数的方式例如B202406150001这样在用户反馈问题时能通过单号快速定位比直接用自增ID更专业。这个单号在Java里用Hutool的DateUtil和RandomUtil生成不会出现并发冲突。所有时间字段统一用datetime类型不要用timestamp。原因是timestamp有2038年问题而且datetime可读性更好、支持的范围更广。虽然MySQL 8.0对timestamp做了优化但踩过一次坑之后我就习惯性用datetime了。5. 前后端接口设计与核心业务实现5.1 统一返回结果封装前端需要和处理后端返回的数据结构如果每个接口返回格式都不一样前端代码会写得非常痛苦。我在common包下定义了一个统一的Result类所有接口都返回这个格式。Data public class ResultT { private Integer code; // 200成功 400业务失败 401未登录 403无权限 500系统错误 private String message; // 提示信息 private T data; // 实际数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(400); result.setMessage(message); return result; } public static T ResultT error(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }code字段的语义必须全局统一前端axios响应拦截器会根据code做统一处理。举个例子当后端返回401时前端要自动清除本地存储的token并跳转到登录页这个逻辑只需要写一次而不是每个页面判断一次。5.2 JWT登录认证与拦截器实现前后端分离项目里最常用的认证方案就是JWT。用户登录成功后后端生成一个包含用户ID、用户名、角色信息的token字符串返回给前端前端每次请求都在请求头里带上这个token。后端通过拦截器拦截需要认证的接口解析token获取用户信息。JwtUtil核心代码片段如下public class JwtUtil { private static final String SECRET your-secret-key-please-change-in-production; private static final long EXPIRE_TIME 7 * 24 * 60 * 60 * 1000; // 7天有效期 public static String generateToken(Long userId, String username, Integer role) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET) .parseClaimsJws(token) .getBody(); } }这个实现里有几个细节要注意。SECRET密钥在生产环境一定不能硬编码在代码里要放到配置文件中通过环境变量读取。我这里写成固定值只是为了方便演示。token有效期我设置为7天这个时长对课设项目足够友好用户不会频繁被踢出登录。企业项目一般会做成2小时有效期refresh_token刷新机制但对课设来说没有必要增加这个复杂度。拦截器里解析完token后把userId存到ThreadLocal或request attribute中后面的Controller就能直接获取当前操作人是谁。Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equals(request.getMethod())) { return true; // 放行预检请求 } String token request.getHeader(Authorization); if (StringUtils.isEmpty(token) || !token.startsWith(Bearer )) { throw new BusinessException(401, 未登录或登录已过期); } try { Claims claims JwtUtil.parseToken(token.substring(7)); request.setAttribute(userId, claims.get(userId)); request.setAttribute(role, claims.get(role)); } catch (Exception e) { throw new BusinessException(401, token无效或已过期); } return true; } }注意这里有一个很经典的坑跨域请求时浏览器会先发送一个OPTIONS预检请求这个请求不会携带自定义请求头如果拦截器不先放行OPTIONS请求前端会一直报跨域错误而且这个错误非常有迷惑性新手经常排查很久都找不到原因。5.3 图书借阅与还书的核心事务处理借阅和还书是本系统业务逻辑最重的两个操作都涉及多张表同时更新必须加事务控制。借书操作的服务层代码如下Transactional(rollbackFor Exception.class) public Result? applyBorrow(BorrowRequestDTO dto, Long userId) { // 1. 校验用户状态 User user userMapper.selectById(userId); if (user null || user.getStatus() 1) { return Result.error(用户不存在或已被禁用); } // 2. 校验图书存在且上架 Book book bookMapper.selectById(dto.getBookId()); if (book null || book.getStatus() 1) { return Result.error(图书不存在或已下架); } // 3. 校验库存 if (book.getAvailableStock() 0) { return Result.error(该图书暂无可借库存可先预约); } // 4. 查重用户是否已借同一本书且未归还 QueryWrapperBorrowRecord wrapper new QueryWrapper(); wrapper.eq(user_id, userId) .eq(book_id, dto.getBookId()) .in(borrow_status, 0, 1); // 待审核或借阅中 Long count borrowRecordMapper.selectCount(wrapper); if (count 0) { return Result.error(您已申请借阅或正在借阅这本书); } // 5. 生成借阅记录状态为待审核 BorrowRecord record new BorrowRecord(); record.setUserId(userId); record.setBookId(book.getId()); record.setBorrowCode(B DateUtil.format(new Date(), yyyyMMdd) RandomUtil.randomNumbers(4)); record.setBorrowStatus(0); borrowRecordMapper.insert(record); return Result.success(借阅申请提交成功请等待管理员审核); }这里的设计逻辑是“申请-审核”分离而不是用户提交申请后库存直接减掉。背后的考量是系统更偏向真实的图书角管理场景管理员需要确认申请者身份真实性后再出库。这种设计也让你在答辩时多了一个可以讲的点——“为什么借阅需要审核环节”。管理员审核通过时才会真正扣减库存Transactional(rollbackFor Exception.class) public Result? approveBorrow(Long recordId) { BorrowRecord record borrowRecordMapper.selectById(recordId); if (record null || record.getBorrowStatus() ! 0) { return Result.error(记录不存在或状态已变更); } Book book bookMapper.selectById(record.getBookId()); if (book.getAvailableStock() 0) { // 库存不足自动拒绝 record.setBorrowStatus(3); record.setRemark(库存不足自动拒绝); borrowRecordMapper.updateById(record); return Result.error(库存不足已自动拒绝该申请); } // 扣减库存 book.setAvailableStock(book.getAvailableStock() - 1); book.setBorrowCount(book.getBorrowCount() 1); bookMapper.updateById(book); // 更新借阅记录状态 record.setBorrowStatus(1); record.setBorrowTime(new Date()); int borrowDays 30; // 默认借期30天可在配置中调整 record.setDueTime(DateUtil.offsetDay(new Date(), borrowDays)); borrowRecordMapper.updateById(record); return Result.success(借阅审核通过); }还书操作是镜像逻辑更新借阅记录状态为已归还、设置实际归还时间、图书available_stock加1。同时还需要计算是否逾期如果当前时间晚于due_time就要计算逾期天数并生成逾期记录。这里一定要记住一个原则所有涉及多表更新的方法都加上Transactional注解且rollbackFor必须设置为Exception.class不能只用默认的RuntimeException。否则遇到受检异常时事务不会回滚库存扣了但记录没更新数据就不一致了。5.4 前端登录与路由守卫前端Vue项目里的登录页面逻辑相对简单调用后端登录接口拿到token后存入localStorage然后跳转到首页。核心代码如下// store/modules/user.js import { login, getUserInfo } from /api/user const state { token: localStorage.getItem(token) || , userInfo: {} } const mutations { SET_TOKEN(state, token) { state.token token localStorage.setItem(token, token) }, SET_USER_INFO(state, info) { state.userInfo info } } const actions { async login({ commit }, loginForm) { const res await login(loginForm) commit(SET_TOKEN, res.data.token) return res }, async fetchUserInfo({ commit }) { const res await getUserInfo() commit(SET_USER_INFO, res.data) } }路由守卫是在访问页面之前检查登录状态的关键router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (token to.path /login) { next(/) } else { next() } })这个守卫只做了最基础的登录校验如果要按角色控制页面权限还需要在路由meta里配置角色信息然后在守卫里判断当前用户的角色是否在允许列表中。这种基于路由meta的权限控制方案简单实用不需要引入额外的权限框架。6. 环境搭建与项目部署全过程6.1 本地开发环境准备这块是新手最容易卡住的地方我按照实际操作顺序列一下。MySQL安装后记得把root密码设置为简单易记的如root然后新建数据库。CREATE DATABASE IF NOT EXISTS book_corner DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;后端application.yml里的关键配置server: port: 8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/book_corner?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: root jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开发时打印SQL日志 global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0allowPublicKeyRetrievaltrue这个参数是MySQL 8.0连接时的必备项不加会报Public Key Retrieval is not allowed错误很多同学卡在这里。serverTimezoneAsia/Shanghai解决时间差8小时的问题。前端项目启动前需要先安装依赖npm install如果npm install速度太慢可以临时切换淘宝镜像源npm config set registry https://registry.npmmirror.com前端vue.config.js配置开发代理module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }这样前端请求/api/book/list会被代理转发到后端http://localhost:8081/book/list同时解决跨域问题。注意axios的baseURL要设置为/api。6.2 项目部署的两种方案部署方式上最简单的是前后端分别手动部署适合写进毕设文档。后端用Maven打包成jar包后运行mvn clean package -DskipTests java -jar target/book-corner-server-0.0.1.jar前端执行npm run build后dist目录下就是静态文件可以放到Nginx里托管。Nginx还需要配置反向代理指向后端接口server { listen 80; server_name your-domain.com; root /usr/share/nginx/html/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8081/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }这里的try_files配置是SPA应用部署的经典配置目的就是把所有前端路由都回退到index.html由Vue Router接管页面跳转。漏掉这一行会导致刷新页面时出现404。另一种方案是用宝塔面板的Docker一键部署这个就不展开了课设阶段能跑通手动部署已经很加分。7. 常见问题与解决方案速查这套系统从零开发到测试我整理了一堆高频问题按出现频次排序方便你排查。7.1 跨域请求报错现象前端请求后端接口时控制台出现“Access-Control-Allow-Origin”相关报错。原因前后端分离项目前端运行在8080端口后端运行在8081端口。浏览器同源策略默认阻止跨端口请求必须处理后端允许跨域或前端代理。解决办法开发阶段最省事的方式是在vue.config.js里配置devServer.proxy让前端通过/api代理转发请求到后端这本质是“同源代理”不涉及浏览器跨域机制。如果非要在后端开跨域就需要CorsConfig配置允许指定来源、请求头和方法。个人经验开发用代理上线用Nginx反代两个阶段都不需要在后端Application代码里加CrossOrigin注解这种方案最干净。7.2 时间字段差8小时现象前端展示的时间比实际时间晚8个小时。原因MySQL连接串里的serverTimezone和Java的Jackson时间格式化没有同步设置导致时区处理默认使用了UTC。解决办法确保连接串里写了serverTimezoneAsia/Shanghai同时application.yml里Jackson的time-zone设置为Asia/Shanghai。前端如果还出现偏差检查浏览器所在操作系统时区是否为北京时间。7.3 数据库连接Access denied现象后端启动报错“Access denied for user rootlocalhost (using password: YES)”。原因数据库用户密码和application.yml里的配置不一致或者MySQL 8.0默认的root认证插件是caching_sha2_password而低版本的数据库驱动不支持这种认证方式。解决办法先确认密码一致再确认mysql-connector-java版本在8.0以上。如果本地安装的确实是MySQL 8.0驱动版本建议用8.0.30这种较新版本不要用5.x的旧驱动。7.4 Vue项目npm install报错现象npm install过程中报各种ERESOLVE或node-sass安装失败。原因多半是node-sass这个老牌库在较新的Node版本下编译失败。Vue 2项目如果用sass预处理器建议改用dart-sass。解决办法安装时指定node-sass替代为sassnpm uninstall node-sass npm install sass1.32.13 --save-dev如果还有EACCES权限报错用管理员身份运行命令行或者把node_modules目录删掉重新install。7.5 图书库存变成负数现象同时有多人提交借阅申请时图书的可借库存出现负数。原因审核借阅时先读库存判断库存大于0才扣减但后续线程并发读取的都是旧值导致超卖。解决办法扣减库存的SQL改成原子操作而不是“先查再改”UPDATE book SET available_stock available_stock - 1 WHERE id #{bookId} AND available_stock 0返回受影响行数为1说明扣减成功否则说明库存不足。这个思路和电商秒杀系统的库存扣减是同一个设计模式。7.6 Vue打包后页面白屏现象npm run build后把dist文件放到服务器上访问页面是白屏控制台报错资源加载404。原因Vue默认的静态资源引用路径是绝对路径/部署到子目录或直接访问时找不到资源。解决办法在vue.config.js里设置publicPath为相对路径module.exports { publicPath: ./ }这是部署阶段最坑的一个配置开发模式看不到问题打包部署才暴露。7.7 前端返回的日期格式是数组现象后端返回的时间字段在浏览器控制台中显示为“2023-06-15T10:30:00.00000:00”或一串数字而不是直接显示“2023-06-15 10:30:00”。原因Jackson默认的日期序列化格式和期望不一致。解决办法在实体类的日期字段上加JsonFormat注解JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8) private LocalDateTime borrowTime;8. 这套项目还可以怎么扩展项目能跑通只是及格线想拿高分或者在工作中积累亮点这几个方向值得深入。第一是引入Redis做缓存。目前图书列表和热门图书排行每次请求都查数据库数据量小的时候无所谓但一旦数据量大就会显现性能问题。用Redis缓存热门图书列表设置5分钟过期时间能显著降低数据库压力。这个优化在简历上可以写为“引入Redis缓存层提升接口响应性能”。第二是增加消息通知机制。当预约的书被归还后系统可以自动发邮件或短信通知预约用户。这个功能目前很多课设都没做但它的业务闭环价值很高。技术实现也不难遇到高并发的场景比如这本书有100个人预约但只还回来1本用消息队列或者Redis的发布订阅模式处理又是一个加分项。第三是前端增加ECharts数据大屏。在主页面放几个可视化图表比如一个月内借阅趋势折线图、图书分类占比饼图、热门图书排行榜柱状图视觉效果会比普通表格列表好很多。ECharts在Vue里的集成非常成熟这个功能的开发成本不高但展示效果很好。第四是部署方式升级为Docker Compose。把后端、前端、MySQL、Redis分别打成容器用一条命令启动整套系统。这个方向能体现你对现代化部署方式的掌握也是现在企业里最常见的部署模式。最后说一句大实话做课设或者毕设最重要的不是代码量有多大而是逻辑是否完整、思路是否清楚、踩过的坑怎么解决。把这套“共享书角”系统从头到尾自己写一遍你对SpringBoot、Vue、MySQL的整体认知会上一个台阶。代码跑通之后再遇到报错不要急着复制粘贴先看日志、定位问题、思考原因这个排查过程积累出来的经验才是真正属于自己的东西。毕竟以后工作中遇到的系统可比这个复杂多了。