1. 项目概述
这个基于SpringBoot+Vue的商场超市会员系统，是我去年为本地一家连锁超市集团开发的数字化解决方案。系统最核心的创新点在于将传统的会员卡功能与互联网玩法深度结合，除了基础的折扣积分功能外，还加入了抽奖、兑换等互动营销模块。实际运营数据显示，上线三个月后会员复购率提升了27%，这让我意识到实体零售的数字化转型确实大有可为。
2. 系统架构设计
2.1 技术栈选型
后端采用SpringBoot 2.7 + MyBatis Plus的组合，主要基于以下考虑：
- SpringBoot的自动配置特性快速搭建微服务
- MyBatis Plus的代码生成器节省了80%的CRUD代码量
- 使用Redis缓存会员积分变动记录，解决高并发下的数据一致性问题
前端选用Vue 3 + Element Plus，特别使用了Composition API写法：
javascript复制// 抽奖组件核心逻辑
const useLottery = () => {
const prizes = ref([])
const getPrizes = async () => {
const res = await axios.get('/api/lottery/prizes')
prizes.value = res.data
}
const draw = () => {
// 抽奖动画逻辑...
}
return { prizes, getPrizes, draw }
}
2.2 数据库设计要点
会员核心表采用纵向分表设计：
- member_base（基础信息）
- member_assets（积分余额）
- member_behavior（消费记录）
积分流水表添加了事务日志：
sql复制CREATE TABLE `point_transaction` (
`id` bigint NOT NULL AUTO_INCREMENT,
`member_id` bigint NOT NULL COMMENT '冗余字段',
`tx_id` varchar(32) NOT NULL COMMENT '事务ID',
`change_value` int NOT NULL,
`balance` int NOT NULL,
`biz_type` tinyint NOT NULL,
`created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_tx_id` (`tx_id`),
KEY `idx_member` (`member_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现
3.1 动态折扣引擎
开发中遇到最复杂的是折扣规则引擎：
- 使用策略模式实现不同折扣类型
- 规则配置采用JSON格式存储
- 通过AOP实现折扣计算逻辑
java复制// 折扣策略接口
public interface DiscountStrategy {
BigDecimal calculate(Member member, Order order);
}
// 满减策略实现
@Service
public class FullReductionStrategy implements DiscountStrategy {
@Override
public BigDecimal calculate(Member member, Order order) {
// 实现逻辑...
}
}
3.2 积分兑换防超卖
积分兑换商品时采用Redis分布式锁：
java复制public boolean exchangeGoods(Long memberId, Long goodsId) {
String lockKey = "exchange:" + goodsId;
try {
// 尝试获取锁
Boolean locked = redisTemplate.opsForValue()
.setIfAbsent(lockKey, "1", 30, TimeUnit.SECONDS);
if (Boolean.TRUE.equals(locked)) {
// 扣减库存逻辑
return doExchange(memberId, goodsId);
}
return false;
} finally {
redisTemplate.delete(lockKey);
}
}
4. 抽奖模块设计
4.1 概率算法实现
采用别名算法解决奖品概率分布问题：
- 初始化时构建概率表
- 通过两次随机确定最终奖品
- 中奖记录异步落库
java复制public class AliasMethod {
private final int[] alias;
private final double[] probability;
public AliasMethod(List<Prize> prizes) {
// 初始化算法...
}
public Prize draw() {
int column = ThreadLocalRandom.current().nextInt(alias.length);
return ThreadLocalRandom.current().nextDouble() < probability[column] ?
prizes.get(column) : prizes.get(alias[column]);
}
}
4.2 前端动画优化
抽奖转盘使用CSS3实现硬件加速：
css复制.lottery-wheel {
transition: transform 3s cubic-bezier(0.17, 0.67, 0.21, 0.99);
will-change: transform;
}
.pointer {
z-index: 10;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
5. 性能优化实践
5.1 缓存策略
采用多级缓存架构：
- 本地Caffeine缓存热点数据
- Redis集群缓存会员资产
- @Cacheable注解实现透明缓存
yaml复制# application.yml配置
caffeine:
member:
spec: maximumSize=10000,expireAfterWrite=5m
redis:
cache:
ttl: 1h
5.2 接口优化
会员主页接口通过GraphQL实现：
graphql复制type Query {
memberHome(memberId: ID!): MemberHome @cacheControl(maxAge: 60)
}
type MemberHome {
basicInfo: MemberBasic
points: Int
coupons: [Coupon]
recentOrders: [Order]
}
6. 安全防护措施
6.1 积分防篡改
采用双向加密校验：
- 每次变动生成HMAC签名
- 前端提交携带signature
- 后端验证签名有效性
java复制public class PointSecurity {
private static final String SECRET = "your-secret-key";
public static String generateSignature(String txId, Long memberId, int points) {
String data = txId + memberId + points;
return HmacUtils.hmacSha256Hex(SECRET, data);
}
}
6.2 防刷策略
抽奖接口采用滑动窗口限流：
java复制@RateLimiter(value = 5, key = "#memberId")
@PostMapping("/lottery/draw")
public Result draw(@RequestParam Long memberId) {
// 抽奖逻辑
}
7. 部署实践
7.1 CI/CD流程
使用Jenkins实现自动化部署：
groovy复制pipeline {
agent any
stages {
stage('Build') {
steps {
sh 'mvn clean package -DskipTests'
}
}
stage('Docker Build') {
steps {
script {
docker.build("member-system:${env.BUILD_ID}")
}
}
}
}
}
7.2 监控方案
采用Prometheus + Grafana监控：
- SpringBoot Actuator暴露指标
- 自定义会员活跃度指标
- 配置阈值告警
8. 踩坑实录
-
积分并发问题：初期直接update set points=points+100导致积分错乱
- 解决方案：改用CAS乐观锁
sql复制UPDATE member_assets SET points = points + #{delta} WHERE member_id = #{memberId} AND points = #{oldPoints} -
抽奖概率失真：Redis的RANDOMKEY在集群模式下不均匀
- 改用ShardedJedis保证分片均匀
-
Vue动画卡顿：频繁操作DOM导致
- 使用虚拟列表优化长奖品列表渲染
这个项目让我深刻体会到，零售系统的核心不在于技术多先进，而在于对业务场景的深度理解。比如我们最初设计的复杂积分规则，实际运营中发现超市收银员根本记不住，后来简化为三级体系反而效果更好。技术人容易陷入实现细节，但真正创造价值的是解决实际业务痛点的能力。