1. 项目概述
这个咖啡共赏平台是一个融合了社交与电商功能的垂直领域应用，采用SpringBoot+Vue的前后端分离架构。平台核心定位是解决咖啡爱好者"发现好豆子-交流心得-便捷购买"的全流程需求，相比传统电商多了UGC内容沉淀和社群互动模块。
我在开发过程中发现，咖啡品类有三个特殊需求：一是用户对产地、烘焙度等专业参数敏感；二是冲泡方法分享是重要社交内容；三是复购周期固定但口味偏好差异大。这些特点直接影响了技术方案的设计。
2. 技术架构设计
2.1 后端SpringBoot方案
采用多模块Maven项目结构：
coffee-core基础实体和工具类coffee-mall商城业务逻辑coffee-community社区互动模块coffee-admin管理后台
数据库选型考虑：
CREATE TABLE coffee_bean ( id BIGINT PRIMARY KEY, name VARCHAR(64) NOT NULL, origin ENUM('Ethiopia','Colombia','Brazil') NOT NULL, roast_level TINYINT CHECK (roast_level BETWEEN 1 AND 5), flavor_notes JSON COMMENT '风味描述JSON数组' );使用JSON字段存储风味轮数据，方便前端可视化展示。
2.2 前端Vue实现
采用Vue3+Pinia+Element Plus组合：
- 动态路由按功能模块懒加载
- 使用WebSocket实现冲泡直播功能
- 自定义ECharts组件展示咖啡风味雷达图
关键性能优化点：
- 商品列表虚拟滚动
- 冲泡教程视频分段加载
- 社区图片懒加载+WebP转换
3. 核心功能实现
3.1 风味匹配推荐算法
基于用户历史订单和评分数据：
public List<CoffeeBean> recommend(Long userId) { // 获取用户偏好特征向量 double[] userVector = getUserTasteVector(userId); // 计算余弦相似度 return allBeans.stream() .map(bean -> new Similarity(bean, cosineSimilarity(userVector, bean.getTasteVector()))) .sorted(Comparator.reverseOrder()) .limit(5) .map(Similarity::getBean) .collect(Collectors.toList()); }3.2 社区内容审核流程
采用多级过滤机制：
- 前端敏感词即时检测
- 阿里云内容安全API过滤
- 人工审核队列分级处理
审核状态机设计：
stateDiagram [*] --> PENDING PENDING --> REJECTED: 命中规则 PENDING --> APPROVED: 自动通过 PENDING --> MANUAL_REVIEW: 不确定 MANUAL_REVIEW --> APPROVED: 人工通过 MANUAL_REVIEW --> REJECTED: 人工拒绝4. 特色功能实现
4.1 冲泡参数计算器
根据咖啡粉量自动计算：
- 理想注水量（1:15~1:18比例）
- 萃取时间建议
- 水温推荐区间
前端实现示例：
<template> <div> <el-input v-model="coffeeWeight" placeholder="咖啡粉克数" /> <div v-if="coffeeWeight"> 推荐注水: {{ waterRange }}ml<br> 萃取时间: {{ brewTime }}秒 </div> </div> </template> <script setup> const coffeeWeight = ref(0) const waterRange = computed(() => { return `${coffeeWeight.value*15}~${coffeeWeight.value*18}` }) </script>4.2 豆单共享功能
用户可以：
- 创建个性化豆单（如"2023夏季精选"）
- 设置豆单可见范围（公开/粉丝/私密）
- 一键复制他人豆单到自己的仓库
后端采用组合模式实现：
public interface CoffeeCollection { String getName(); List<CoffeeBean> getBeans(); } public class UserCollection implements CoffeeCollection { private List<CoffeeBean> beans; private PrivacyLevel privacy; } public class CompositeCollection implements CoffeeCollection { private List<CoffeeCollection> children; }5. 部署与运维
5.1 容器化部署方案
Docker Compose编排：
version: '3' services: backend: build: ./coffee-backend ports: ["8080:8080"] depends_on: - redis - mysql frontend: build: ./coffee-frontend ports: ["80:80"] mysql: image: mysql:8.0 volumes: ["./mysql-data:/var/lib/mysql"]5.2 性能监控配置
SpringBoot Actuator集成：
management.endpoints.web.exposure.include=health,metrics,prometheus management.metrics.export.prometheus.enabled=trueGrafana监控看板包含：
- 商品详情页PV/UV
- 社区互动响应时间
- 订单创建成功率
6. 开发经验总结
风味数据存储方案迭代：
- 初期用字符串逗号分隔 → 遇到查询困难
- 改为关联表 → 多表join性能差
- 最终采用JSON字段 → 平衡查询与扩展性
社区图片处理教训：
- 未压缩原图直接存储 → 存储成本飙升
- 添加WebP转换后节省60%空间
电商模块支付对接：
- 支付宝沙箱环境测试时注意：
@Bean public AlipayClient alipayClient() { return new DefaultAlipayClient( "https://openapi.alipaydev.com/gateway.do", // 沙箱地址 appId, privateKey, "json", "UTF-8", alipayPublicKey, "RSA2"); }
项目完整代码已整理在GitHub仓库，包含详细的部署文档和数据库初始化脚本。在实际运营中，我们发现下午3-5点是用户活跃高峰，这个时段的服务器资源需要特别保障。
