不靠谱的糖饼1. 项目概述：SSM+Vue全栈果蔬商城实战
去年接手的一个社区生鲜电商项目让我深刻体会到，传统Java后台与现代化前端框架的结合能爆发出怎样的能量。这个基于SSM（Spring+SpringMVC+MyBatis）和Vue.js的水果蔬菜商城，不仅实现了商品展示、购物车、订单支付等核心功能，更通过前后端分离架构解决了传统单体应用的维护难题。整套系统包含12个功能模块，从用户认证到库存预警都采用了当前电商领域的成熟解决方案。
关键数据：系统日均承载3000+访问量，订单响应时间控制在200ms内，采用Redis缓存后商品列表加载速度提升8倍
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈选型与架构设计
2.1 为什么选择SSM+Vue组合
在技术选型阶段，我们对比了多种方案：
- 传统JSP方案：开发效率低，前后端耦合严重
- SpringBoot+Thymeleaf：适合小型项目但扩展性不足
- 纯前端方案：缺乏成熟的业务逻辑处理能力
最终确定的SSM+Vue组合具有以下优势：
- Spring：成熟的IoC容器和事务管理，轻松应对高并发订单
- MyBatis：灵活SQL编写，特别适合复杂的促销规则计算
- Vue.js：响应式数据绑定让购物车状态实时更新零延迟
2.2 系统分层架构详解
mermaid复制graph TD
A[客户端] -->|HTTP| B(Vue前端)
B -->|RESTful API| C(SpringMVC控制器)
C --> D[Spring Service]
D --> E[MyBatis Mapper]
E --> F[MySQL数据库]
G[Redis缓存] --> D
H[支付宝/微信SDK] --> C
实际开发中我们做了这些关键调整：
- 采用JWT替代Session实现无状态认证
- 使用Hutool工具包处理日期和加密
- 自定义MyBatis插件实现敏感数据自动脱敏
3. 核心功能实现细节
3.1 商品模块的三层缓存设计
为解决生鲜商品高频访问问题，我们设计了立体缓存方案：
| 缓存层级 | 技术实现 | 缓存时间 | 适用场景 |
|---|---|---|---|
| 前端缓存 | Vuex+localStorage | 30分钟 | 商品详情页 |
| 应用缓存 | Redis | 2小时 | 商品分类列表 |
| 数据库缓存 | MySQL查询缓存 | 实时 | 库存数量 |
关键代码片段（Spring配置类）：
java复制@Bean
public CacheManager cacheManager(RedisConnectionFactory factory) {
RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
.entryTtl(Duration.ofHours(2))
.serializeValuesWith(SerializationPair.fromSerializer(new Jackson2JsonRedisSerializer<>(Object.class)));
return RedisCacheManager.builder(factory).cacheDefaults(config).build();
}
3.2 购物车并发控制方案
踩坑记录：在秒杀活动中曾出现超卖问题，最终通过三种机制保障数据一致性：
- 乐观锁：基于version字段的CAS更新
- 分布式锁：Redisson实现的商品粒度锁
- 预扣库存：Redis原子操作递减
sql复制UPDATE product_stock
SET quantity = quantity - 1, version = version + 1
WHERE product_id = #{pid} AND version = #{version}
4. 数据库设计与优化
4.1 关键表结构设计
商品表的垂直分表方案：
- 基础表（product_base）：50+字段拆分为
- 商品核心信息（名称、价格等）
- 商品扩展属性（产地、规格等）
- 商品详情（图文描述）
sql复制CREATE TABLE `product_sku` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`spu_id` bigint(20) NOT NULL COMMENT '商品ID',
`specs` json DEFAULT NULL COMMENT '规格JSON',
`price` decimal(10,2) NOT NULL COMMENT '现价',
`original_price` decimal(10,2) DEFAULT NULL COMMENT '原价',
`stock` int(11) NOT NULL DEFAULT '0' COMMENT '库存',
`warn_stock` int(11) DEFAULT '10' COMMENT '库存预警',
PRIMARY KEY (`id`),
KEY `idx_spu` (`spu_id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品SKU表';
4.2 查询性能优化实战
通过EXPLAIN分析发现商品列表查询存在全表扫描，最终采取以下措施：
- 添加组合索引：(category_id, status, create_time)
- 使用覆盖索引避免回表
- 大文本字段（如商品详情）单独存表
优化前后对比：
- 2000条数据查询从1200ms降至80ms
- 分页查询COUNT(*)改用近似统计
5. 前端工程化实践
5.1 Vue组件化开发技巧
商品卡片组件的props设计原则：
javascript复制props: {
// 基础信息
goods: {
type: Object,
required: true,
validator: value => {
return ['id','name','price'].every(key => key in value)
}
},
// 交互控制
showCart: {
type: Boolean,
default: true
}
}
5.2 移动端适配方案
采用vw+rem弹性布局：
- 设置html字体大小：
scss复制html {
font-size: calc(100vw / 7.5); // 设计稿750px基准
}
- 编写px转换mixin：
scss复制@mixin px2rem($property, $values) {
$rem-values: ();
@each $value in $values {
@if $value == 0 or unitless($value) {
$rem-values: append($rem-values, $value);
} @else {
$rem-values: append($rem-values, ($value / 75) * 1rem);
}
}
#{$property}: $rem-values;
}
6. 项目部署与监控
6.1 多环境配置管理
通过Maven Profile实现：
xml复制<profiles>
<profile>
<id>dev</id>
<properties>
<env>dev</env>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<profile>
<id>prod</id>
<properties>
<env>prod</env>
</properties>
</profile>
</profiles>
6.2 性能监控方案
基于Spring Boot Actuator+Prometheus：
- 暴露关键指标端点
- 配置Grafana监控看板
- 关键报警规则：
- 订单接口P99>500ms
- 数据库连接池使用率>80%
7. 开发中的典型问题解决
7.1 跨域问题的终极方案
不同于简单的@CrossOrigin注解，我们采用更安全的方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("https://domain.com")
.allowedMethods("GET", "POST")
.allowCredentials(true)
.maxAge(3600)
.exposedHeaders("Authorization");
}
}
7.2 微信支付回调处理
踩坑点：微信回调验证需要特殊处理
- 获取请求体原始数据：
java复制String notifyData = StreamUtils.copyToString(request.getInputStream(), StandardCharsets.UTF_8);
- 签名验证后需先返回success
- 异步处理订单状态更新
8. 项目扩展方向
在实际运营过程中，我们发现这些待优化点：
- 推荐算法升级：基于用户行为的协同过滤
- 库存同步优化：引入RabbitMQ实现最终一致性
- 灰度发布方案：根据用户标签分流
特别提醒：数据库迁移脚本一定要包含回滚方案，我们在v1.3版本就曾因字段类型变更导致生产环境事故。现在团队强制要求每个DDL变更都必须配套回滚SQL，这个习惯至少避免了三次重大故障。