1. 项目背景与需求分析
撸猫店作为新兴的宠物经济业态,近年来在国内呈现爆发式增长。根据中国宠物行业白皮书数据显示,2022年宠物主题咖啡馆市场规模已达23.7亿元,年增长率超过65%。这种业态的快速扩张带来了传统手工管理模式的诸多痛点:
- 预约管理混乱:客户通过微信、电话等多渠道预约,容易造成时间冲突
- 会员体系缺失:难以追踪客户消费习惯和宠物偏好
- 库存管理低效:猫粮、玩具等耗材使用情况缺乏数字化记录
- 财务统计困难:现金、移动支付等多种结算方式难以统一核算
我们设计的系统正是为了解决这些实际问题,通过SpringBoot+Vue的技术组合实现以下核心功能:
- 预约时段管理(含特殊时段溢价功能)
- 会员积分与消费记录系统
- 猫只健康档案与行为记录
- 进销存管理与自动补货提醒
- 多维度经营报表生成
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与架构设计
2.1 前后端分离架构优势
采用SpringBoot+Vue的分离架构主要基于以下考虑:
- 开发效率:前端团队可并行开发,不受后端API进度限制
- 性能优化:静态资源由Nginx直接分发,减轻应用服务器压力
- 维护便利:前后端代码解耦,版本迭代互不影响
- 技术栈匹配:
- 后端需要处理复杂业务逻辑:SpringBoot的IoC和AOP特性非常适合
- 前端需要快速响应交互:Vue的响应式数据和组件化开发优势明显
2.2 技术栈明细
| 层级 | 技术选型 | 版本 | 选用理由 |
|---|---|---|---|
| 前端框架 | Vue2 + ElementUI | 2.6.x | 成熟稳定,组件丰富,适合管理系统开发 |
| 状态管理 | Vuex | 3.x | 集中式状态管理,解决多组件共享数据问题 |
| HTTP客户端 | Axios | 0.21.x | 拦截器机制完善,便于统一处理权限验证和异常 |
| 后端框架 | SpringBoot | 2.5.x | 自动配置、嵌入式Tomcat、丰富的Starter依赖 |
| ORM框架 | MyBatis-Plus | 3.4.x | 强大的CRUD操作封装,支持Lambda表达式查询 |
| 数据库 | MySQL | 8.0 | ACID事务支持,JSON字段类型适合存储动态属性 |
| 缓存 | Redis | 6.x | 高频访问数据缓存(如店铺营业时间、价目表等) |
| 消息队列 | RabbitMQ | 3.8.x | 异步处理预约通知、账单生成等耗时操作 |
| 文件存储 | 七牛云OSS | - | 猫只照片、健康证明等文件存储 |
| 部署 | Docker + Docker Compose | 20.x | 环境一致性保障,简化多服务部署 |
实际开发中我们遇到Vue2到Vue3的升级考量,最终选择Vue2主要基于:1) ElementUI对Vue3支持尚不完善 2) 团队现有技术储备 3) 项目工期压力
3. 核心功能模块实现
3.1 预约管理子系统
采用分时段的预约槽位设计,关键技术实现包括:
java复制// 后端时段检查逻辑示例
public boolean checkTimeSlotAvailable(LocalDateTime startTime, int duration) {
// 获取该时段所有已预约记录
List<Reservation> existing = reservationMapper.selectList(
new QueryWrapper<Reservation>()
.ge("end_time", startTime)
.le("start_time", startTime.plusMinutes(duration))
);
// 获取店铺最大承载量配置
Integer maxCapacity = configService.getInt("STORE_MAX_CAPACITY");
return existing.size() < maxCapacity;
}
前端实现要点:
- 使用FullCalendar组件展示可预约时段
- 不同时段通过色块区分(正常/高峰/休整期)
- 拖拽调整预约时长功能实现:
javascript复制handleEventDrop(info) {
const duration = (info.event.end - info.event.start) / (1000 * 60);
if (duration > this.maxDuration) {
this.$message.error(`单次预约最长为${this.maxDuration}分钟`);
info.revert();
return;
}
// 调用API更新后端数据
updateReservation(info.event.id, {
start: info.event.start,
end: info.event.end
}).then(...);
}
3.2 猫只健康监测模块
采用组合设计模式处理不同健康指标:
java复制public abstract class HealthIndicator {
public abstract HealthStatus evaluate(Cat cat);
}
// 具体指标实现
public class WeightIndicator extends HealthIndicator {
@Override
public HealthStatus evaluate(Cat cat) {
Double weight = cat.getLatestWeight();
Double standard = cat.getBreed().getStandardWeight();
if (weight < standard * 0.8) {
return HealthStatus.WARNING;
}
// 其他判断逻辑...
}
}
// 指标组合
public class CompositeHealthIndicator extends HealthIndicator {
private List<HealthIndicator> indicators = new ArrayList<>();
@Override
public HealthStatus evaluate(Cat cat) {
return indicators.stream()
.map(ind -> ind.evaluate(cat))
.max(Comparator.naturalOrder())
.orElse(HealthStatus.NORMAL);
}
}
4. 关键技术难点与解决方案
4.1 高并发预约冲突处理
初期采用乐观锁方案仍出现超卖问题,最终实现方案:
- 分布式锁:使用Redis实现预约时段的互斥访问
java复制public boolean tryLock(String lockKey, String requestId, long expireTime) {
return redisTemplate.opsForValue().setIfAbsent(
lockKey,
requestId,
expireTime,
TimeUnit.SECONDS
);
}
-
排队机制:超过5个并发请求进入RabbitMQ队列顺序处理
-
前端限流:按钮点击后禁用,直到接口返回结果
4.2 复杂报表查询优化
会员消费分析报表涉及多表关联和大数据量计算:
- 预聚合:每日凌晨跑批生成中间结果
sql复制CREATE TABLE stats_member_daily (
member_id BIGINT,
stat_date DATE,
total_amount DECIMAL(12,2),
cat_play_minutes INT,
PRIMARY KEY (member_id, stat_date)
) ENGINE=InnoDB;
-
列式存储:使用ClickHouse存储历史数据
-
前端分页:配合虚拟滚动技术实现万级数据流畅展示
5. 安全与稳定性设计
5.1 权限控制体系
采用RBAC模型扩展实现:
- 基础角色:店长、店员、兽医、客户
- 特殊权限:临时权限(如兼职人员)、功能权限(如折扣调整)
- 前端路由守卫实现:
javascript复制router.beforeEach((to, from, next) => {
const requiredRoles = to.meta.roles;
if (requiredRoles && !hasAnyRole(requiredRoles)) {
next('/403');
return;
}
next();
});
5.2 数据备份策略
- MySQL:每日全量备份 + binlog增量备份
- 文件存储:七牛云自动多副本 + 每月归档到OSS
- 恢复演练:每季度模拟数据丢失场景进行恢复测试
6. 部署与监控方案
6.1 Docker Compose编排
yaml复制version: '3'
services:
app:
image: registry.example.com/cat-shop:${TAG}
ports:
- "8080:8080"
depends_on:
- redis
- mysql
environment:
- SPRING_PROFILES_ACTIVE=prod
mysql:
image: mysql:8.0
volumes:
- mysql_data:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=${DB_ROOT_PASS}
redis:
image: redis:6-alpine
ports:
- "6379:6379"
6.2 监控指标
-
业务指标:
- 实时在线预约数
- 猫只活跃度评分
- 会员转化率
-
系统指标:
- API响应时间P99 < 500ms
- 数据库连接池使用率 < 80%
- JVM老年代GC频率 < 1次/小时
7. 项目演进路线
已完成版本:
- v1.0 基础预约与会员管理
- v1.2 健康监测与库存管理
规划功能:
- AI情绪识别:通过摄像头分析猫只状态
- 智能推荐:根据会员偏好推荐最佳互动时段
- IoT集成:自动调节猫舍温湿度
在开发过程中我们发现,ElementUI的表格组件在处理动态列显示时存在性能瓶颈,最终通过以下优化方案解决:
- 虚拟滚动替代原生渲染
- 列数据预编译为渲染函数
- 冻结高频更新的状态列
