SpringBoot+Vue企业级购物系统架构与实战

1. 项目背景与核心价值去年参与某大型社区疫情保供系统开发时我深刻体会到一套可靠的企业级购物管理系统对民生保障的重要性。这个基于SpringBootVueMyBatis的解决方案正是我们在实战中迭代出的成熟架构。它不仅解决了封闭管理期间的物资配送难题更沉淀出一套可复用的企业级开发模式。这套系统最核心的价值在于通过分级权限管理实现街道-社区-楼栋三级管控采用高并发设计应对瞬时爆发的团购订单可视化数据看板辅助防疫决策标准化接口便于对接第三方配送系统2. 技术架构解析2.1 后端技术栈选型SpringBoot 2.7.x MyBatis-Plus 3.5.x的组合是我们经过多轮压测后的选择// 典型控制器示例 RestController RequestMapping(/api/order) public class OrderController { Autowired private OrderService orderService; PostMapping(/group) public Result createGroupOrder(Valid RequestBody GroupOrderDTO dto) { return orderService.createGroupOrder(dto); } }选型考量SpringBoot的自动配置特性大幅减少XML配置MyBatis-Plus的Lambda查询构建器提升开发效率内置的Actuator端点方便监控系统健康状态2.2 前端架构设计Vue3 Element Plus的组合带来以下优势Composition API使逻辑关注点更集中基于Proxy的响应式系统性能更优按需引入的组件库减小打包体积关键配置示例// vite.config.js export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [vue, vue-router] }) ], build: { chunkSizeWarningLimit: 1500 } })3. 核心功能实现3.1 团购订单模块采用状态机模式管理订单生命周期stateDiagram [*] -- PENDING PENDING -- PAID: 支付成功 PAID -- DELIVERING: 分配骑手 DELIVERING -- COMPLETED: 签收确认 COMPLETED -- [*]关键数据库表设计CREATE TABLE group_order ( id bigint NOT NULL AUTO_INCREMENT, community_id int NOT NULL COMMENT 所属小区, creator_id int NOT NULL COMMENT 团长ID, status tinyint NOT NULL DEFAULT 0 COMMENT 0-待支付 1-待配送 2-配送中 3-已完成, total_amount decimal(10,2) NOT NULL COMMENT 订单总金额, delivery_time datetime DEFAULT NULL COMMENT 预计送达时间, PRIMARY KEY (id), KEY idx_community (community_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3.2 物资库存管理实现分布式锁防止超卖public boolean reduceInventory(Long goodsId, int num) { String lockKey stock_lock: goodsId; try { // 尝试获取分布式锁 Boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, 30, TimeUnit.SECONDS); if (Boolean.TRUE.equals(locked)) { // 实际扣减库存逻辑 return inventoryMapper.reduceStock(goodsId, num) 0; } return false; } finally { redisTemplate.delete(lockKey); } }4. 性能优化实践4.1 缓存策略设计采用多级缓存架构本地Caffeine缓存热点数据Redis集群存储会话数据MySQL读写分离缓存穿透解决方案public GoodsDetail getGoodsDetail(Long id) { String cacheKey goods: id; // 1. 查询缓存 GoodsDetail detail redisTemplate.opsForValue().get(cacheKey); if (detail ! null) { return detail; } // 2. 查询数据库 detail goodsMapper.selectById(id); if (detail null) { // 空值缓存防止穿透 redisTemplate.opsForValue().set(cacheKey, , 5, TimeUnit.MINUTES); return null; } // 3. 写入缓存 redisTemplate.opsForValue().set(cacheKey, detail, 30, TimeUnit.MINUTES); return detail; }4.2 数据库优化索引优化原则为所有外键字段建立索引联合索引遵循最左前缀原则使用覆盖索引减少回表慢查询监控配置# application.yml mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true5. 安全防护措施5.1 接口安全设计采用JWT RBAC的鉴权方案Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .antMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())); } }5.2 数据脱敏处理使用Jackson自定义序列化public class MobileSerializer extends JsonSerializerString { Override public void serialize(String value, JsonGenerator gen, SerializerProvider provider) throws IOException { if (StringUtils.isNotBlank(value) value.length() 7) { gen.writeString(value.substring(0, 3) **** value.substring(7)); } else { gen.writeString(value); } } }6. 部署方案6.1 容器化部署Docker Compose编排示例version: 3 services: mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql redis: image: redis:6-alpine ports: - 6379:6379 backend: build: ./backend ports: - 8080:8080 depends_on: - mysql - redis6.2 高可用配置Nginx负载均衡配置upstream backend { server 172.18.0.1:8080 weight5; server 172.18.0.2:8080 weight3; server 172.18.0.3:8080 weight2; } server { listen 80; location / { proxy_pass http://backend; proxy_set_header Host $host; } }7. 踩坑实录MyBatis批量插入优化错误做法循环执行单条insert正确方案使用foreach标签批量插入insert idbatchInsert INSERT INTO order_item (order_id, goods_id) VALUES foreach collectionlist itemitem separator, (#{item.orderId}, #{item.goodsId}) /foreach /insertVue长列表渲染卡顿解决方案使用虚拟滚动el-table-v2 :columnscolumns :datadata :width800 :height400 :row-height50 fixed /分布式事务问题最终采用本地消息表定时任务补偿关键表结构CREATE TABLE transaction_log ( id varchar(64) NOT NULL, business_type varchar(32) NOT NULL, status tinyint NOT NULL DEFAULT 0, retry_count int NOT NULL DEFAULT 0, create_time datetime NOT NULL, PRIMARY KEY (id) ) ENGINEInnoDB;这套系统在3个万人社区实际运行期间峰值QPS达到1200平均响应时间控制在200ms以内。特别提醒开发类似系统时一定要提前与物流团队对接配送接口规范我们曾因字段格式不统一导致大量订单同步失败。