Spring Boot+Vue.js构建甜品电商系统实战

1. 项目概述这个基于Spring Boot和Vue.js的自助甜品商城系统是我最近完成的一个电商类项目实战。作为一个全栈开发者我选择这个甜品主题是因为发现目前市场上专门针对甜品垂直领域的电商平台并不多见而甜品消费又有着明显的季节性特征和个性化需求。系统采用现在主流的B/S架构前端使用Vue.js构建响应式界面后端基于Spring Boot框架数据库选用MySQL 8.0。整个开发周期约3个月从需求分析到最终上线测试期间遇到了不少值得分享的技术挑战和解决方案。2. 技术选型与架构设计2.1 后端技术栈选择Spring Boot作为后端框架主要基于以下几个考虑快速启动内置Tomcat服务器无需复杂配置即可运行自动配置根据项目依赖自动配置Spring应用丰富的starter整合了Spring Data JPA、Spring Security等常用组件// 典型的Spring Boot启动类配置 SpringBootApplication MapperScan(com.dessert.mapper) public class DessertApplication { public static void main(String[] args) { SpringApplication.run(DessertApplication.class, args); } }数据库访问层使用MyBatis-Plus而非原生MyBatis主要看中它提供的通用CRUD操作强大的条件构造器分页插件代码生成器2.2 前端技术栈Vue 3.x作为前端框架的优势组件化开发提高代码复用率响应式数据绑定简化DOM操作Vue Router实现SPA体验Vuex集中式状态管理// 典型的Vue组件结构 export default { data() { return { desserts: [], loading: true } }, async created() { const res await getDessertList() this.desserts res.data this.loading false } }2.3 系统架构图客户端层(Browser/App) ↓ 表现层(Vue.js Element UI) ↓ API网关(Spring Cloud Gateway) ↓ 业务层(Spring Boot) ↓ 数据访问层(MyBatis-Plus) ↓ 数据存储层(MySQL Redis)3. 核心功能实现3.1 用户认证模块采用JWT(JSON Web Token)实现无状态认证关键设计点Token有效期设置为2小时使用HS512算法签名前端通过axios拦截器自动携带Token// JWT生成核心代码 public String generateToken(Long userId, String username, String role) { Date now new Date(); Date expiryDate new Date(now.getTime() 7200000); // 2小时有效期 return Jwts.builder() .setSubject(userId.toString()) .claim(username, username) .claim(role, role) .setIssuedAt(now) .setExpiration(expiryDate) .signWith(SignatureAlgorithm.HS512, secret) .compact(); }3.2 商品展示模块实现要点多维度分类按口味、季节、价格等支持模糊搜索分页查询优化// MyBatis-Plus分页查询示例 public PageDessert getDessertPage(Integer pageNum, Integer pageSize, String keyword) { PageDessert page new Page(pageNum, pageSize); LambdaQueryWrapperDessert wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(keyword), Dessert::getName, keyword); return dessertMapper.selectPage(page, wrapper); }3.3 购物车与订单模块购物车设计考虑未登录用户使用浏览器本地存储已登录用户同步到服务端采用Redis缓存热门商品库存订单状态机设计待支付 → 已支付 → 制作中 → 配送中 → 已完成 ↓ 已取消4. 关键问题与解决方案4.1 高并发下的库存扣减采用Redis 数据库事务的方案预减Redis库存创建订单异步同步数据库Transactional public boolean reduceStock(Long dessertId, Integer quantity) { // 1. Redis预减库存 long stock redisTemplate.opsForValue().decrement(dessert:stock: dessertId, quantity); if (stock 0) { redisTemplate.opsForValue().increment(dessert:stock: dessertId, quantity); return false; } // 2. 数据库实际扣减 int affected dessertMapper.reduceStock(dessertId, quantity); if (affected 0) { redisTemplate.opsForValue().increment(dessert:stock: dessertId, quantity); throw new BusinessException(库存不足); } return true; }4.2 支付模块集成对接支付宝沙箱环境的关键配置# 支付宝配置 alipay.app-id2021000122600000 alipay.gatewayhttps://openapi.alipaydev.com/gateway.do alipay.merchant-private-key你的私钥 alipay.alipay-public-key支付宝公钥 alipay.notify-url/api/pay/callback4.3 性能优化实践Nginx配置静态资源缓存location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; add_header Cache-Control public; }启用MyBatis-Plus二级缓存Configuration MapperScan(com.dessert.mapper) EnableCaching public class MyBatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return interceptor; } }5. 系统测试与部署5.1 测试策略采用分层测试策略单元测试JUnit Mockito接口测试Postman Swagger压力测试JMeter5.2 典型测试用例用户登录测试数据测试场景输入数据预期结果实际结果正确登录正确用户名密码登录成功通过错误密码正确用户名错误密码提示密码错误通过空用户名用户名为空提示输入用户名通过5.3 部署方案生产环境采用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.0 ports: - 6379:6379 backend: build: ./backend ports: - 8080:8080 depends_on: - mysql - redis frontend: build: ./frontend ports: - 80:806. 项目总结与改进方向这个项目让我对电商系统的核心流程有了更深入的理解。在开发过程中有几个特别值得注意的经验点库存一致性最初没有考虑分布式事务导致出现过超卖情况后来引入Redis消息队列才彻底解决。支付回调支付宝的异步通知需要做好幂等处理避免重复通知导致业务异常。前端性能图片懒加载和组件按需加载对首屏性能提升明显。后续改进方向引入Elasticsearch实现更强大的商品搜索增加用户行为分析实现精准推荐开发微信小程序端扩大用户覆盖面整个项目从技术选型到最终上线每个环节都让我收获颇丰。特别是面对高并发场景时的解决方案让我对分布式系统有了更直观的认识。