SpringBoot+Vue3+MyBatis构建图书电商系统实战-育师

1. 项目概述

这个基于Java SpringBoot+Vue3+MyBatis的图书电商系统是一个典型的前后端分离架构实现案例。我去年在重构公司内部图书采购平台时，采用了几乎相同的技术栈，实测下来这套组合在开发效率和运行性能上都有不错的表现。

系统前端采用Vue3组合式API开发，后端基于SpringBoot 2.7.x构建，数据持久层使用MyBatis-Plus增强，数据库选用MySQL 8.0。整个项目实现了图书展示、购物车、订单管理、用户中心等电商核心功能模块，特别适合需要快速搭建中小型电商平台的开发团队参考。

2. 技术架构解析

2.1 前端技术选型

Vue3作为当前主流的前端框架，在这个项目中展现了几个显著优势：

Composition API使代码组织更灵活，特别是购物车这类复杂状态逻辑的组件
Vite构建工具将本地开发热更新速度提升到毫秒级
Pinia状态管理库完美替代Vuex，配合TypeScript类型提示非常友好

我在实际开发中发现，搭配Element Plus组件库可以节省约40%的UI开发时间。特别推荐它的Table组件处理图书列表，配合虚拟滚动技术轻松应对万级数据渲染。

2.2 后端技术栈

SpringBoot 2.7.x版本在以下方面表现突出：

内嵌Tomcat容器简化部署，默认支持HTTP/2
自动配置的Jackson序列化优化了API响应速度
Actuator端点方便监控系统健康状态

建议配置示例：

@SpringBootApplication @MapperScan("com.bookstore.mapper") @EnableCaching public class BookstoreApplication { public static void main(String[] args) { SpringApplication.run(BookstoreApplication.class, args); } }

2.3 数据持久层方案

MyBatis-Plus 3.5.x相比原生MyBatis主要增强了：

条件构造器简化了90%的CRUD操作
分页插件自动优化count查询
代码生成器可快速产出实体类和Mapper文件

数据库设计建议采用utf8mb4字符集以支持完整emoji存储，图书表典型结构：

CREATE TABLE `book` ( `id` bigint NOT NULL AUTO_INCREMENT, `title` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL, `author` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL, `price` decimal(10,2) NOT NULL, `stock` int NOT NULL DEFAULT '0', `cover_url` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

3. 核心功能实现

3.1 用户认证方案

采用JWT+Redis实现无状态认证：

用户登录成功后生成包含用户ID的JWT token
将token存入Redis并设置过期时间(建议2小时)
前端将token存入localStorage并附加到请求头
后端通过拦截器验证token有效性

关键代码片段：

public String generateToken(Long userId) { Date now = new Date(); Date expiryDate = new Date(now.getTime() + jwtExpiration); return Jwts.builder() .setSubject(userId.toString()) .setIssuedAt(now) .setExpiration(expiryDate) .signWith(SignatureAlgorithm.HS512, jwtSecret) .compact(); }

3.2 购物车设计

采用两种存储方案结合：

未登录用户：使用浏览器的localStorage临时存储
已登录用户：同步到服务端Redis缓存

数据结构示例：

{ "userId": 123, "items": [ { "bookId": 456, "quantity": 2, "selected": true } ] }

3.3 订单处理流程

采用状态机模式管理订单生命周期：

待支付(30分钟超时自动取消)
已支付待发货
已发货
已完成
已取消

使用Spring事务确保库存扣减与订单创建的原子性：

@Transactional public Order createOrder(Long userId, OrderDTO orderDTO) { // 1. 检查库存 checkStock(orderDTO.getItems()); // 2. 扣减库存 reduceStock(orderDTO.getItems()); // 3. 创建订单 Order order = buildOrder(userId, orderDTO); orderMapper.insert(order); // 4. 清空购物车 cartService.clearCart(userId); return order; }

4. 性能优化实践

4.1 缓存策略

采用多级缓存架构：

浏览器缓存静态资源(配置Cache-Control)
CDN缓存图片等媒体文件
Redis缓存热点数据(图书详情、分类列表)
MySQL查询缓存

图书详情缓存示例：

@Cacheable(value = "book", key = "#id") public Book getBookById(Long id) { return bookMapper.selectById(id); }

4.2 数据库优化

关键措施包括：

为高频查询字段建立索引(如book表的title字段)
使用EXPLAIN分析慢查询
读写分离处理高并发场景
定期执行OPTIMIZE TABLE减少碎片

4.3 前端性能提升

实测有效的优化手段：

图片懒加载节省初始请求带宽
路由懒加载拆分代码包
使用Web Worker处理复杂计算
开启Gzip压缩减小资源体积

5. 部署与监控

5.1 容器化部署

Docker Compose编排示例：

version: '3' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root volumes: - ./mysql-data:/var/lib/mysql redis: image: redis:6 backend: build: ./backend ports: - "8080:8080" depends_on: - mysql - redis frontend: build: ./frontend ports: - "80:80"

5.2 监控方案

推荐配置：

Prometheus采集SpringBoot指标
Grafana可视化监控数据
ELK收集和分析日志
SkyWalking追踪分布式请求

6. 常见问题排查

6.1 跨域问题解决方案

后端配置CORS：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*"); } }

6.2 事务失效场景

注意这些坑：

非public方法调用
自调用问题
异常被catch未抛出
数据库引擎不支持(如MyISAM)

6.3 线上问题定位

我的诊断工具箱：

arthas实时诊断JVM
jstack分析线程状态
jmap查看内存分布
MySQL慢查询日志

7. 扩展建议

根据实际项目经验，可以考虑：

接入第三方支付(支付宝/微信)
实现推荐系统(协同过滤算法)
增加秒杀功能(Redis+Lua限流)
集成ELK日志分析
开发管理后台(基于Vue3+Element Plus)

这套架构经过多个项目验证，在日PV10万级别的电商场景下运行稳定。特别提醒MySQL连接池配置要根据实际并发量调整，我们曾因连接数不足导致过线上事故。建议使用HikariCP并设置合理的maxPoolSize。

SpringBoot+Vue3+MyBatis构建图书电商系统实战