1. 项目概述与背景
去年参与开发了一款化妆品测评分享电商平台，采用SpringBoot+Vue技术栈实现全渠道覆盖（Web+小程序）。这个项目最有趣的地方在于将传统电商功能与社交化测评结合，用户在购买化妆品前能看到真实用户的使用反馈。作为技术负责人，我完整经历了从架构设计到上线的全过程，现在把关键实现方案和踩坑经验整理出来。
化妆品行业有个特点：用户决策高度依赖他人评价。我们调研发现87%的消费者会查看至少5条测评才下单。因此系统设计时特别强化了UGC内容生产和展示，同时要保证电商核心流程的稳定性。整套系统采用微服务架构，日均承载10万+UV，峰值QPS达到1200左右。
2. 技术栈选型解析
2.1 后端技术决策
选择Spring Boot 2.7 + JDK17的组合主要考虑：
- 完善的生态体系（Spring Security, Data JPA等）
- 容器化部署友好（内嵌Tomcat+Actuator监控）
- 与阿里云中间件无缝集成
数据库方案对比测试后选择：
- 主库：MySQL 8.0（事务型业务）
- 从库：PostgreSQL 14（复杂查询）
- 缓存：Redis 6.2（热点数据+分布式锁）
关键教训：MySQL配置了8小时连接超时导致凌晨大量报错，最终通过HikariCP的testWhileIdle配置解决
2.2 前端技术方案
Vue3组合式API带来明显优势：
- 逻辑复用更清晰（抽离useCart等hook）
- TypeScript支持完善
- Vite构建速度比Webpack快3倍
小程序跨平台方案选型矩阵：
| 方案 | 打包体积 | 性能损耗 | 开发效率 |
|---|---|---|---|
| Uni-app | +15% | 12% | ⭐⭐⭐⭐ |
| Taro3 | +8% | 9% | ⭐⭐⭐ |
| 原生开发 | 基准 | 基准 | ⭐⭐ |
最终选择Uni-app因其完善的插件市场（特别是支付和分享插件）
3. 核心模块实现细节
3.1 用户认证体系
采用JWT+双Token方案：
- AccessToken（有效期2小时）
- RefreshToken（有效期7天）
关键安全措施：
- 指纹绑定（防止Token盗用）
- 异地登录检测（触发二次验证）
- 密码加密：PBKDF2WithHmacSHA256（10万次迭代）
java复制// Spring Security配置示例
@Bean
SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.csrf(csrf -> csrf.disable())
.sessionManagement(session -> session.sessionCreationPolicy(STATELESS))
.authorizeHttpRequests(auth -> auth
.requestMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
)
.addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class);
return http.build();
}
3.2 商品搜索优化
Elasticsearch7集群配置：
- 3节点（8核16G）
- IK分词器+拼音插件
- Nested类型处理商品规格
搜索排序公式（BM25+业务权重）：
code复制score = 0.6*文本相关度 + 0.2*销量 + 0.15*好评率 + 0.05*上新权重
3.3 测评内容管理
富文本编辑器选型对比：
| 编辑器 | XSS防护 | 图片处理 | 移动端适配 |
|---|---|---|---|
| Quill | 中等 | 需扩展 | 良好 |
| Tiptap | 强 | 完善 | 优秀 |
| UEditor | 弱 | 内置 | 差 |
最终采用Tiptap Pro方案，配合以下防护措施：
- 服务端DOMPurify过滤
- 图片COS存储+鉴权访问
- 敏感词AC自动机过滤（5万词库）
4. 性能优化实战
4.1 缓存策略设计
多级缓存架构：
- 本地缓存（Caffeine）：商品基础信息
- 分布式缓存（Redis）：库存/秒杀数据
- CDN缓存：静态资源+图片
缓存击穿解决方案：
java复制public Product getProduct(Long id) {
String key = "product:" + id;
Product product = redisTemplate.opsForValue().get(key);
if (product == null) {
Lock lock = redissonClient.getLock("lock:" + key);
try {
if (lock.tryLock(3, 10, SECONDS)) {
product = productRepository.findById(id).orElseThrow();
redisTemplate.opsForValue().set(key, product, 30, MINUTES);
}
} finally {
lock.unlock();
}
}
return product;
}
4.2 数据库优化
慢查询治理步骤：
- 开启slow_log（阈值500ms）
- 使用pt-query-digest分析
- 针对性优化（案例）
优化案例：商品分页查询
sql复制-- 原始SQL（执行1.2s）
SELECT * FROM products WHERE category_id=5 ORDER BY sales DESC LIMIT 10000,20;
-- 优化后（0.15s）
SELECT * FROM products p
JOIN (SELECT id FROM products WHERE category_id=5 ORDER BY sales DESC LIMIT 10000,20) t
ON p.id = t.id;
5. 部署与监控体系
5.1 容器化部署方案
Docker Compose核心配置：
yaml复制services:
app:
image: registry.cn-hangzhou.aliyuncs.com/yourrepo/shop:${TAG}
deploy:
resources:
limits:
cpus: '2'
memory: 2G
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:8080/actuator/health"]
interval: 30s
timeout: 5s
retries: 3
Jenkins流水线关键阶段：
- 代码扫描（SonarQube）
- 单元测试（覆盖率>70%）
- 构建Docker镜像
- 金丝雀发布
5.2 监控告警配置
Prometheus监控指标：
- 应用层：JVM内存、GC次数、接口QPS
- 中间件：Redis命中率、ES查询延迟
- 业务层：支付成功率、搜索响应时间
Grafana看板包含：
- 业务大盘（UV/PV/转化率）
- 系统健康度（CPU/Memory）
- 异常报警（5xx错误突增）
6. 典型问题排查实录
6.1 微信支付签名失败
现象：iOS端支付成功率比Android低23%
排查过程：
- 抓包对比参数差异
- 发现iOS端URLEncode处理不一致
- 验证签名算法实现
解决方案：
java复制// 修正后的签名方法
public String generateSign(Map<String,String> params){
return DigestUtils.md5Hex(
params.entrySet().stream()
.sorted(Map.Entry.comparingByKey())
.map(e -> e.getKey() + "=" + e.getValue())
.collect(Collectors.joining("&"))
+ "&key=" + apiKey
).toUpperCase();
}
6.2 内存泄漏定位
现象：Pod每隔3天重启一次
排查工具：
- jmap -histo pid
- Arthas memory命令
- Eclipse MAT分析
最终定位到：
java复制// 错误的缓存用法
public class ProductService {
private static final Map<Long, Product> cache = new HashMap<>();
public Product getProduct(Long id) {
return cache.computeIfAbsent(id, this::loadFromDB);
}
}
修正方案：改用Caffeine并设置最大条目限制
7. 扩展性设计思考
7.1 插件化架构
定义核心接口：
java复制public interface PaymentPlugin {
String getName();
PaymentResult pay(PaymentRequest request);
PaymentResult query(String orderNo);
}
// 微信支付实现
@Component
public class WechatPayment implements PaymentPlugin {
@Override
public String getName() {
return "wechat";
}
//...
}
通过SPI机制自动发现插件：
java复制ServiceLoader<PaymentPlugin> plugins = ServiceLoader.load(PaymentPlugin.class);
7.2 数据分析扩展
用户行为埋点方案：
- 前端SDK收集点击/浏览事件
- Kafka实时管道处理
- Flink实时计算关键指标
典型分析场景：
- 测评内容对转化率的影响
- 用户路径漏斗分析
- 商品关联推荐模型
这个项目让我深刻体会到，电商系统既要保证交易链路的绝对可靠，又要在用户体验上持续创新。特别是在化妆品这个垂直领域，用户对内容的信任度直接影响购买决策。后续我们计划引入AR虚拟试妆功能，技术上正在评估WebGL方案的性能表现。