一、需求分析
动态价格展示是小象买菜系统的核心功能之一，主要需求包括：
- 实时显示商品价格及变化
- 支持不同用户等级的价格差异
- 显示价格历史变化趋势
- 促销活动价格突出显示
- 价格更新响应时间短（<1秒）
二、技术架构设计
1. 前端实现方案
推荐技术栈：
- Vue.js/React + TypeScript
- WebSocket/SSE实现实时价格推送
- ECharts/AntV用于价格趋势图表展示
关键实现：
```javascript
// Vue.js示例 - 价格组件
¥{{ currentPrice.toFixed(2) }}
促销
<script>
export default {
data() {
return {
currentPrice: 0,
isPromotion: false,
priceHistory: [],
showHistory: false
}
},
mounted() {
// 建立WebSocket连接
this.priceSocket = new WebSocket(wss://your-api/price-updates);
this.priceSocket.onmessage = (event) => {
const data = JSON.parse(event.data);
this.updatePrice(data);
};
},
methods: {
updatePrice(data) {
// 更新当前价格和历史记录
this.currentPrice = data.price;
this.isPromotion = data.isPromotion;
this.priceHistory.push({
time: new Date(),
price: data.price
});
// 保持历史记录数量
if (this.priceHistory.length > 30) {
this.priceHistory.shift();
}
}
}
}
```
2. 后端实现方案
推荐技术栈：
- Spring Boot/Node.js
- Redis缓存价格数据
- RabbitMQ/Kafka消息队列
- MySQL/PostgreSQL持久化存储
关键实现：
```java
// Spring Boot示例 - 价格服务
@Service
public class PriceService {
@Autowired
private RedisTemplate
redisTemplate;
@Autowired
private RabbitTemplate rabbitTemplate;
// 更新价格
public void updatePrice(String productId, BigDecimal newPrice, boolean isPromotion) {
PriceData priceData = new PriceData(productId, newPrice, isPromotion, LocalDateTime.now());
// 1. 更新Redis缓存
redisTemplate.opsForValue().set("price:" + productId, priceData);
// 2. 发送价格更新消息
PriceUpdateMessage message = new PriceUpdateMessage(productId, newPrice, isPromotion);
rabbitTemplate.convertAndSend("price.updates", message);
// 3. 持久化到数据库（可选异步）
// priceRepository.save(priceData);
}
// 获取当前价格
public PriceData getCurrentPrice(String productId) {
return redisTemplate.opsForValue().get("price:" + productId);
}
}
// WebSocket价格推送控制器
@Controller
public class PriceWebSocketController {
@Autowired
private SimpMessagingTemplate messagingTemplate;
@MessageMapping("/price-updates")
public void handlePriceUpdate(PriceUpdateMessage message) {
// 广播价格更新
messagingTemplate.convertAndSend("/topic/prices/" + message.getProductId(), message);
}
}
```
三、数据库设计
价格表设计
```sql
CREATE TABLE product_prices (
id BIGSERIAL PRIMARY KEY,
product_id VARCHAR(50) NOT NULL,
price DECIMAL(10,2) NOT NULL,
is_promotion BOOLEAN DEFAULT FALSE,
promotion_start TIMESTAMP,
promotion_end TIMESTAMP,
user_level_prices JSONB, -- 存储不同用户等级的价格 { "vip": 9.9, "regular": 12.9 }
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE (product_id)
);
CREATE TABLE price_history (
id BIGSERIAL PRIMARY KEY,
product_id VARCHAR(50) NOT NULL,
price DECIMAL(10,2) NOT NULL,
is_promotion BOOLEAN DEFAULT FALSE,
changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (product_id) REFERENCES product_prices(product_id)
);
```
四、关键实现细节
1. 价格更新策略：
- 管理员通过后台修改价格 → 触发价格更新事件
- 定时任务检查供应商价格变动 → 自动更新
- 促销活动开始/结束时自动调整价格
2. 缓存策略：
- 使用Redis存储当前价格，TTL设置为5分钟
- 价格变动时立即更新缓存
- 缓存穿透保护：空值缓存1分钟
3. 用户等级价格：
```javascript
// 前端处理用户等级价格
function getDisplayPrice(product, userLevel) {
if (product.userLevelPrices && product.userLevelPrices[userLevel] !== undefined) {
return product.userLevelPrices[userLevel];
}
return product.price;
}
```
4. 价格变动通知：
- WebSocket实时推送
- 价格变动超过阈值（如5%）时显示提示
- 价格历史记录保留最近30次变动
五、性能优化措施
1. 减少数据库查询：
- 首页商品价格批量查询
- 使用Redis的MGET命令获取多个商品价格
2. 消息队列优化：
- 价格更新消息合并（1秒内同一商品的多次更新合并为一条）
- 消费者端批量处理
3. CDN加速：
- 静态价格展示页面预生成并CDN缓存
六、测试方案
1. 单元测试：
- 价格计算逻辑
- 用户等级价格选择
- 促销价格应用
2. 集成测试：
- 价格更新流程
- WebSocket消息推送
- 缓存一致性验证
3. 性能测试：
- 模拟1000+商品同时价格变动
- 10000+用户同时查看价格
七、部署与监控
1. 监控指标：
- 价格更新延迟
- WebSocket连接数
- 缓存命中率
2. 告警规则：
- 价格更新延迟>500ms
- 缓存命中率<90%
- 价格历史记录写入失败
通过以上方案实现的小象买菜系统动态价格展示功能，能够满足实时性、准确性和可扩展性的需求，为用户提供良好的购物体验。 
广告
