SpringBoot+Vue电商项目实战：从架构设计到性能优化

红护

1. 项目概述

这个零食商城项目是我去年带学生完成的毕业设计，采用SpringBoot+Vue的前后端分离架构，实现了从商品管理到用户下单的完整电商流程。相比市面上常见的课程设计，我们在这个项目中加入了Redis缓存、Sa-Token权限控制和ECharts数据可视化等企业级应用特性，使得这个毕设既有教学价值又具备一定的商业实用性。

系统分为管理端和用户端两个部分。管理端采用经典的CRUD架构，包含商品管理、订单处理等12个功能模块；用户端则实现了注册登录、商品浏览、购物车、订单管理等标准电商功能。特别值得一提的是，我们通过Redis缓存热门商品数据，使得首页加载速度提升了3倍左右，这个优化方案我会在后面详细讲解。

2. 技术架构设计

2.1 后端技术栈选型

选择SpringBoot 2.7作为后端框架主要基于三个考虑：

自动配置特性大幅减少了XML配置，比如内嵌Tomcat服务器、自动配置DataSource等
Starter依赖机制让整合MyBatis-Plus、Redis等组件变得极其简单
Actuator端点提供了完善的系统监控能力

数据库选用MySQL 8.0而非5.7版本，主要是看中了它的：

窗口函数（用于销售排行统计）
JSON字段类型（存储商品规格参数）
更好的索引优化器

这里有个实际开发中的经验：在application.yml中建议配置以下MySQL连接参数：

yaml复制spring:
  datasource:
    hikari:
      connection-timeout: 30000
      maximum-pool-size: 20
      idle-timeout: 600000
      max-lifetime: 1800000

2.2 前端架构方案

Vue 3的组合式API相比Options API更适合电商这类复杂前端应用。我们主要采用以下技术组合：

Vue Router处理路由跳转
Pinia替代Vuex进行状态管理
Axios封装了带拦截器的HTTP客户端
Element Plus提供UI组件

特别提醒：在大型电商项目中，一定要做好组件拆分。我们的实践是将商品卡片、分类导航等高频组件单独封装，通过props控制行为，例如：

vue复制<template>
  <ProductCard 
    :product="item"
    :show-price="true"
    @add-to-cart="handleAddCart"
  />
</template>

3. 核心功能实现

3.1 商品模块设计

商品表采用纵向分表设计：

基础表（product_base）：存储标题、价格等核心字段
详情表（product_detail）：用TEXT类型存储富文本详情
SKU表（product_sku）：管理库存和规格组合

这种设计带来两个好处：

高频查询（如商品列表）只需访问轻量的基础表
详情内容不影响主表查询性能

商品搜索我们实现了两种方案：

简单搜索：基于MySQL的LIKE查询
高级搜索：使用Elasticsearch构建的全文检索（需额外部署）

3.2 购物车实现方案

购物车采用混合存储策略：

未登录用户：数据存于localStorage
已登录用户：数据同步到服务端Redis

关键Redis数据结构：

java复制// 用户购物车 hash结构
// key: cart:{userId}
// field: skuId
// value: 商品数量
redisTemplate.opsForHash().put("cart:"+userId, skuId, quantity);

注意事项：Redis存储购物车时需要设置过期时间（通常7-30天），避免长期占用内存

3.3 订单业务流程

订单状态机设计：

待支付（15分钟超时自动取消）
已支付待发货
已发货
已完成
已取消

支付流程我们采用策略模式封装，便于接入不同支付渠道：

java复制public interface PaymentStrategy {
    PayResult pay(Order order);
    boolean refund(Order order);
}

// 支付宝实现
@Service
public class AlipayStrategy implements PaymentStrategy {...}

// 微信支付实现
@Service 
public class WechatPayStrategy implements PaymentStrategy {...}

4. 性能优化实践

4.1 缓存应用场景

我们针对三类数据实施缓存：

商品详情：Redis缓存5分钟
首页数据：Redis缓存1小时 + 本地缓存
分类树：Redis缓存24小时

缓存更新策略采用经典的Cache-Aside模式：

java复制public Product getProduct(Long id) {
    // 1. 先查缓存
    Product product = redis.get("product:"+id);
    if(product == null) {
        // 2. 查数据库
        product = productMapper.selectById(id);
        // 3. 写缓存
        redis.setex("product:"+id, 300, product);
    }
    return product;
}

4.2 数据库优化

针对订单表做了以下优化：

按年分表（order_2023, order_2024）
建立组合索引（user_id + create_time）
归档历史数据

查询优化示例：

sql复制-- 不好的写法
SELECT * FROM orders WHERE status = 1 ORDER BY create_time DESC;

-- 优化后
SELECT id,order_no,amount FROM orders 
WHERE status = 1 AND create_time > '2023-01-01'
ORDER BY create_time DESC LIMIT 20;

5. 安全防护措施

5.1 认证授权方案

采用Sa-Token实现以下安全机制：

登录认证：JWT令牌
接口权限：注解式鉴权
防重放攻击：时间戳+签名

典型配置示例：

java复制@SaCheckLogin
@SaCheckPermission("order:query")
@GetMapping("/orders")
public List<Order> listOrders() {
    // ...
}

5.2 常见攻击防护

XSS防护：前端使用DOMPurify过滤，后端统一转义
CSRF防护：SameSite Cookie + 状态校验
SQL注入：MyBatis使用#{}参数绑定
暴力破解：登录接口限流（1分钟5次尝试）

6. 部署实施方案

6.1 后端部署

采用Docker Compose编排服务：

yaml复制version: '3'
services:
  app:
    image: java:8-jre
    ports:
      - "8080:8080"
    volumes:
      - ./app.jar:/app.jar
    command: java -jar /app.jar
    
  redis:
    image: redis:6
    ports:
      - "6379:6379"
    volumes:
      - ./redis-data:/data

6.2 前端部署

Nginx配置要点：

nginx复制server {
    listen 80;
    server_name mall.example.com;
    
    location / {
        root /var/www/mall;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
    }
}