1. 项目概述：SpringBoot+Vue3全栈服装商城系统
去年带队开发某品牌服装电商系统时，我们采用SpringBoot+Vue3技术栈构建了一套高可用的销售管理系统。这个系统日均处理订单量超过2万笔，高峰期能稳定支撑500+并发用户操作。不同于简单的CRUD管理系统，我们实现了商品SPU/SKU动态管理、智能库存预警、多维度销售分析等深度功能模块。
系统采用前后端分离架构，后端基于SpringBoot 2.7.x提供RESTful API，前端使用Vue3组合式API开发管理后台和用户端。特别在权限控制方面，采用Spring Security+JWT实现RBAC模型，管理员、店长、客服等角色拥有差异化的操作权限。数据库选用MySQL 8.0配合Redis缓存，商品搜索则通过Elasticsearch实现毫秒级响应。
2. 技术架构深度解析
2.1 后端技术栈设计
选择SpringBoot 2.7.x而非最新3.x版本，主要考虑企业现有JDK版本兼容性。通过spring-boot-starter-data-redis集成Redis实现三类缓存：
- 商品基础信息缓存（TTL 2小时）
- 用户权限数据缓存（TTL 30分钟）
- 秒杀活动库存缓存（内存标记+Redis原子递减）
数据库分库设计：
sql复制CREATE DATABASE mall_product; -- 商品库
CREATE DATABASE mall_order; -- 订单库
CREATE DATABASE mall_user; -- 用户库
通过ShardingSphere实现分库路由，订单表按用户ID哈希分片。MyBatis-Plus配置多数据源时需注意：
yaml复制spring:
shardingsphere:
datasource:
names: ds-product,ds-order,ds-user
ds-product:
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
jdbc-url: jdbc:mysql://localhost:3306/mall_product
2.2 前端工程化实践
Vue3项目采用pnpm workspace实现monorepo管理：
code复制├── packages
│ ├── admin # 管理后台
│ ├── web # 用户端
│ └── shared # 公共组件
Element Plus按需引入配置示例：
javascript复制// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
Components({
resolvers: ElementPlusResolver({
importStyle: 'sass' // 使用Sass变量覆盖主题
})
})
]
})
3. 核心模块实现细节
3.1 商品SPU/SKU管理系统
服装类商品需要处理颜色、尺码等多维度规格，我们设计了三层结构：
- SPU（标准产品单元）：代表商品品类，如"男士纯棉T恤"
- SKU（库存保有单位）：具体规格组合，如"黑色-L码"
- 规格属性：动态字段如材质、袖长等
前端规格组合算法关键代码：
typescript复制const generateSKUs = (specs: Spec[]) => {
return specs.reduce((acc, cur) =>
acc.flatMap(x =>
cur.values.map(v => ({...x, [cur.name]: v}))
), [{}])
}
库存变更时采用乐观锁防止超卖：
java复制@Update("UPDATE product_sku SET stock = stock - #{qty}
WHERE id = #{skuId} AND stock >= #{qty}")
int deductStock(@Param("skuId") Long skuId, @Param("qty") Integer qty);
3.2 订单状态机设计
订单生命周期管理使用状态模式：
mermaid复制stateDiagram
[*] --> PENDING_PAYMENT
PENDING_PAYMENT --> PAID: 支付成功
PENDING_PAYMENT --> CANCELLED: 用户取消
PAID --> SHIPPED: 发货
SHIPPED --> COMPLETED: 确认收货
SHIPPED --> RETURNING: 发起退货
RETURNING --> RETURNED: 退货完成
状态变更时通过Spring事件机制触发后续动作：
java复制public class OrderPaidEvent extends ApplicationEvent {
private final Order order;
public OrderPaidEvent(Object source, Order order) {
super(source);
this.order = order;
}
// getter...
}
@Component
public class OrderEventListener {
@Async
@EventListener
public void handleOrderPaid(OrderPaidEvent event) {
// 发送邮件通知、生成发货单等
}
}
4. 高级功能实现
4.1 智能推荐系统
混合推荐策略执行流程：
- 冷启动阶段：基于商品热度TOP100推荐
- 行为积累后：ItemCF协同过滤（余弦相似度计算）
- 深度用户：NCF神经网络模型预测
ItemCF核心计算逻辑：
python复制def item_similarity(train):
# 计算共现矩阵
cooccur = defaultdict(lambda: defaultdict(int))
for user, items in train.items():
for i in items:
for j in items:
if i != j:
cooccur[i][j] += 1
# 计算相似度
sim = defaultdict(dict)
for i, related_items in cooccur.items():
for j, cij in related_items.items():
sim[i][j] = cij / math.sqrt(len(train[i]) * len(train[j]))
return sim
4.2 实时库存预警
采用观察者模式实现多级预警：
- Redis原子计数器监控实时库存
- 达到阈值触发Spring应用事件
- 事件处理器执行：
- 数据库记录预警日志
- WebSocket推送至管理端
- 邮件通知采购负责人
库存检查切面示例：
java复制@Aspect
@Component
@RequiredArgsConstructor
public class InventoryCheckAspect {
private final ApplicationEventPublisher eventPublisher;
@AfterReturning(
pointcut = "execution(* com..ProductService.updateInventory(..))",
returning = "result"
)
public void afterInventoryUpdate(JoinPoint jp, Object result) {
InventoryUpdateDTO dto = (InventoryUpdateDTO) result;
if (dto.remaining() < dto.threshold()) {
eventPublisher.publishEvent(
new LowStockEvent(this, dto.skuId(), dto.remaining())
);
}
}
}
5. 部署与性能优化
5.1 Docker Compose部署方案
生产环境服务编排文件关键配置：
yaml复制version: '3.8'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- redis
- mysql
environment:
SPRING_PROFILES_ACTIVE: prod
mysql:
image: mysql:8.0
volumes:
- mysql_data:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASS}
Nginx配置Gzip压缩与静态缓存：
nginx复制server {
gzip on;
gzip_types text/plain application/json application/javascript;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
expires 30d;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header X-Real-IP $remote_addr;
}
}
5.2 性能调优实战
通过JMeter压测发现的典型问题及解决方案：
-
商品列表页响应慢：
- 问题：N+1查询导致数据库压力大
- 解决：MyBatis二级缓存+Redis缓存商品JSON
-
订单提交超时：
- 问题：同步调用支付接口阻塞线程
- 解决：引入RabbitMQ异步处理支付流程
-
搜索接口高延迟：
- 问题：ES分片数不足
- 优化：调整分片数为节点数的1.5倍
json复制PUT /products { "settings": { "number_of_shards": 6, "number_of_replicas": 1 } }
6. 踩坑与经验总结
6.1 分布式事务难题
在用户积分抵扣和订单创建场景中，最初采用本地事务导致数据不一致。最终方案：
- 引入Seata AT模式
- 关键配置：
properties复制spring.cloud.alibaba.seata.tx-service-group=my_tx_group
seata.service.vgroup-mapping.my_tx_group=default
- 业务方法添加@GlobalTransactional注解
6.2 缓存一致性方案
商品信息更新后的缓存处理策略：
- 双删策略：
java复制public void updateProduct(Product product) {
// 1. 先删缓存
redis.delete("product:" + product.getId());
// 2. 更新数据库
productMapper.updateById(product);
// 3. 再删缓存（延迟队列）
delayQueue.add(new CacheDeleteTask("product:" + product.getId()));
}
- 结合Canal监听binlog进行最终一致性补偿
6.3 前端性能优化
管理后台首屏加载优化措施：
- 路由懒加载：
javascript复制const UserManage = () => import('@/views/system/user')
- 组件异步加载：
vue复制<template>
<Suspense>
<template #default>
<AdvancedChart />
</template>
<template #fallback>
<el-skeleton />
</template>
</Suspense>
</template>
- ECharts按需引入：
typescript复制import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
echarts.use([BarChart]);
这个项目让我深刻体会到，全栈开发不仅需要掌握前后端技术，更要具备系统思维。比如在解决库存超卖问题时，需要从用户交互、接口设计、数据库锁等多个层面综合考虑。建议开发类似系统时，前期多花时间设计好状态机和分布式事务方案，后期能避免许多棘手问题。