SpringBoot+Vue图书商城系统开发实践

1. 项目概述这个图书商城管理系统是我去年为一个高校图书馆开发的线上借阅平台采用前后端分离架构后端基于SpringBootMyBatisMySQL技术栈前端使用Vue.js框架。系统上线后日均访问量稳定在3000成功替代了原有的手工登记模式。提示项目源码已托管在Gitee私有仓库关键部分会在文中展示代码片段完整结构可参考文末的架构图系统主要包含六大核心模块用户中心读者注册/登录/权限管理图书管理CRUD分类检索借阅管理预约/借出/归还/续借订单支付微信/支付宝集成数据统计ECharts可视化系统管理日志/参数/备份2. 技术选型解析2.1 后端技术栈组合选择SpringBoot 2.7.4作为基础框架主要考虑自动配置简化了SSM整合的XML配置工作量内嵌Tomcat方便打包成可执行JARStarter机制快速集成MyBatis/Redis等组件数据库选用MySQL 8.0而非5.7版本因为窗口函数简化了排行榜统计SQLJSON字段类型便于存储图书的扩展属性性能提升30%以上实测QPS对比持久层采用MyBatis-Plus 3.5.2其优势在于// 示例图书分页查询实现 public PageBook getBooksByPage(int pageNum, int pageSize) { return bookMapper.selectPage(new Page(pageNum, pageSize), Wrappers.BooklambdaQuery() .orderByDesc(Book::getBorrowCount)); }2.2 前端技术方案Vue 3组合式API相比选项式API的优势逻辑关注点更集中相关代码聚合更好的TypeScript支持更灵活的逻辑复用composables具体技术组合dependencies: { vue: ^3.2.47, element-plus: ^2.3.3, # UI组件库 axios: ^1.3.4, # HTTP客户端 vue-router: ^4.1.6, # 路由管理 pinia: ^2.0.33 # 状态管理 }3. 核心模块实现3.1 图书检索功能采用Elasticsearch提升查询性能关键实现步骤创建索引映射PUT /books { mappings: { properties: { title: { type: text, analyzer: ik_max_word }, author: { type: keyword }, publishDate: { type: date } } } }实现搜索建议RestController RequestMapping(/search) public class SearchController { Autowired private ElasticsearchRestTemplate esTemplate; GetMapping(/suggest) public ListString suggest(RequestParam String keyword) { NativeSearchQuery query new NativeSearchQueryBuilder() .withQuery(QueryBuilders.matchQuery(title, keyword)) .build(); return esTemplate.search(query, Book.class) .getSearchHits() .stream() .map(hit - hit.getContent().getTitle()) .collect(Collectors.toList()); } }3.2 借阅业务流程状态机设计使用Spring StateMachinestateDiagram [*] -- AVAILABLE AVAILABLE -- RESERVED: 预约 RESERVED -- BORROWED: 借出 BORROWED -- RETURNED: 归还 RETURNED -- AVAILABLE: 上架 BORROWED -- OVERDUE: 超期关键并发控制代码Transactional public BorrowResult borrowBook(Long bookId, Long userId) { // 乐观锁检查库存 Book book bookMapper.selectById(bookId); if (book.getStock() 0) { throw new BusinessException(库存不足); } // 扣减库存 int updated bookMapper.updateStock(bookId, book.getVersion()); if (updated 0) { throw new ConcurrentUpdateException(操作冲突请重试); } // 创建借阅记录 BorrowRecord record new BorrowRecord(bookId, userId); borrowMapper.insert(record); return BorrowResult.success(record.getId()); }4. 部署与优化4.1 多环境配置使用Spring Profiles区分环境# application-dev.yml spring: datasource: url: jdbc:mysql://localhost:3306/bookstore_dev username: devuser password: dev123 # application-prod.yml spring: datasource: url: jdbc:mysql://prod-db:3306/bookstore username: ${DB_USER} password: ${DB_PASSWORD} redis: host: redis-master4.2 性能优化实践缓存策略使用Redis缓存热点图书信息TTL 30分钟本地Caffeine缓存分类目录最大500条SQL优化案例-- 优化前N1查询问题 SELECT * FROM borrow_record WHERE user_id 1; -- 对每条记录执行 SELECT * FROM book WHERE id [book_id]; -- 优化后联合查询 SELECT b.* FROM borrow_record br JOIN book b ON br.book_id b.id WHERE br.user_id 1;5. 踩坑实录MyBatis一级缓存问题现象开启事务后重复查询返回相同结果解决方案在Mapper方法添加Options(flushCache true)Vue响应式丢失// 错误写法 state.books await fetchBooks(); // 正确写法保持响应式 state.books [...await fetchBooks()];跨域问题终极方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }6. 项目架构图图书商城系统架构 ┌───────────────────────────────────────────────────────────────┐ │ 客户端层 │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ Web前端 │ │ 移动端H5 │ │ 微信小程序 │ │ │ │ (Vue3) │ │ (Vant) │ │ (Uniapp) │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ └───────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────┐ │ API网关层 │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ Nginx (负载均衡 静态资源 HTTPS终止) │ │ │ └───────────────────────────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────┐ │ 应用服务层 │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ 用户服务 │ │ 图书服务 │ │ 订单服务 │ │ │ │ (SpringBoot)│ │ (SpringBoot)│ │ (SpringBoot) │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ └───────────────────────────────────────────────────────────────┘ │ ▼ ┌───────────────────────────────────────────────────────────────┐ │ 数据持久层 │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ MySQL │ │ Redis │ │ Elasticsearch │ │ │ │ (主从复制) │ │ (集群) │ │ (全文检索) │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ └───────────────────────────────────────────────────────────────┘7. 扩展建议安全增强添加Spring Security OAuth2资源服务器配置实现SQL注入过滤器关键操作增加审计日志监控方案# Prometheus监控配置示例 management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: tags: application: ${spring.application.name}后续可扩展方向接入第三方书评数据豆瓣API实现智能推荐协同过滤算法增加有声书在线播放功能这个项目从技术选型到最终上线历时3个月最大的收获是理解了如何根据业务特点选择合适的技术组合。比如在图书检索场景Elasticsearch的引入使查询性能提升了8倍而StateMachine则让借阅流程的状态管理更加清晰。