叶宇霖1. 项目概述：SpringBoot+Vue全栈甜品屋商城系统
这个基于SpringBoot和Vue的全栈项目，专为中小型甜品店、奶茶店设计，整合了蛋糕预订、饮品销售、会员管理等核心功能。我在实际开发中发现，传统甜品店的手工记账方式存在订单易丢失、库存难统计等问题，而这个系统通过前后端分离架构，实现了商品展示、在线支付、订单追踪的完整闭环。
系统采用SpringBoot 2.7作为后端框架，配合MyBatis-Plus实现数据持久化，前端使用Vue 3组合式API开发。特别针对甜品行业特性，开发了"蛋糕定制器"可视化组件，顾客可以直接在前端选择奶油类型、水果装饰等配料，实时查看成品效果图。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计解析
2.1 后端技术选型考量
选择SpringBoot主要基于三点考虑：
- 快速启动特性：甜品店往往没有专职IT人员，需要即装即用的系统
- 内嵌Tomcat：避免单独配置Web服务器的复杂度
- 丰富的Starter：比如：
- spring-boot-starter-data-redis 用于购物车缓存
- spring-boot-starter-mail 用于订单通知
- spring-boot-starter-thymeleaf 用于后台管理页渲染
数据库采用MySQL 8.0，主要考虑到：
- JSON字段支持：存储蛋糕定制参数
- 窗口函数：方便生成销售排行榜
- 事务隔离级别：确保库存扣减的准确性
2.2 前端技术方案设计
Vue 3的组合式API更适合商城类项目开发，主要体现在：
- 逻辑复用：将购物车操作封装成useCart组合式函数
- TypeScript支持：定义严格的商品接口类型
- 按需引入：仅加载用到的Element Plus组件
特别开发的"蛋糕定制器"组件技术要点：
vue复制<template>
<div class="cake-builder">
<canvas ref="canvas" width="400" height="400"></canvas>
<div class="controls">
<el-select v-model="creamType" @change="renderCake">
<el-option label="奶油" value="cream"></el-option>
<el-option label="巧克力" value="chocolate"></el-option>
</el-select>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
const creamType = ref('cream')
const renderCake = () => {
const ctx = canvas.value.getContext('2d')
// 绘制蛋糕基础层
// 根据选择渲染不同奶油效果
}
</script>
3. 核心功能实现细节
3.1 商品管理系统
甜品店商品有特殊属性需要处理：
java复制// 商品实体类扩展字段
@Data
public class Product {
private Long id;
private String name;
private BigDecimal price;
@TableField(typeHandler = JsonTypeHandler.class)
private CakeConfig cakeConfig; // 蛋糕特有配置
@TableField(exist = false)
private List<Product> comboItems; // 套餐包含的饮品
}
// 蛋糕配置类
public class CakeConfig {
private Integer layers; // 层数
private List<String> availableToppings; // 可选配料
private Boolean canWriteWords; // 是否支持写字
}
后台管理采用RBAC权限控制：
code复制/admin
├── products 商品管理
├── orders 订单管理
├── members 会员管理
└── analyze 销售分析
3.2 订单业务流程
关键流程时序图：
- 用户提交订单 → 生成待支付订单
- 支付成功 → 扣减库存 → 通知后厨
- 制作完成 → 发送取餐通知
- 用户确认收货 → 完成订单
库存扣减的并发控制方案：
java复制@Transactional
public boolean reduceStock(Long productId, Integer quantity) {
// 使用乐观锁防止超卖
int updated = productMapper.updateStock(productId, quantity);
return updated > 0;
}
4. 特色功能开发实录
4.1 智能推荐系统
基于用户历史订单实现推荐：
- 购买蛋糕的顾客 → 推荐搭配饮品
- 常购奶茶用户 → 推送新品试饮券
- 生日前一周 → 推送蛋糕优惠
实现代码片段：
java复制public List<Product> recommendProducts(Long userId) {
List<Order> orders = orderMapper.selectByUser(userId);
if (orders.stream().anyMatch(o -> o.getItems().hasCake())) {
return productMapper.selectRecommendations("drinks");
}
// 其他推荐逻辑...
}
4.2 微信小程序集成
除Web端外，还开发了小程序版本：
- 使用uni-app跨平台框架
- 调用微信支付API
- 集成腾讯地图显示门店位置
小程序与后台数据同步方案：
- 通过RESTful API交互
- WebSocket实时推送订单状态
- 定时同步商品信息
5. 部署与运维实践
5.1 生产环境配置
推荐服务器配置：
- 2核4G云服务器（适合日订单1000以下）
- MySQL配置建议：
ini复制innodb_buffer_pool_size = 1G innodb_log_file_size = 256M - Redis缓存热点数据：
yaml复制spring: redis: host: 127.0.0.1 password: ${REDIS_PASSWORD} timeout: 3000
5.2 性能优化技巧
实测有效的优化手段：
- 商品图片使用WebP格式（体积减少40%）
- 启用HTTP/2提升加载速度
- 使用@Cacheable注解缓存分类数据
- 分库分表策略（订单表按月拆分）
Nginx配置示例：
nginx复制server {
listen 80;
server_name shop.example.com;
location / {
root /var/www/shop-front;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
}
}
6. 常见问题解决方案
6.1 支付对接问题
微信支付常见错误处理：
| 错误码 | 原因 | 解决方案 |
|---|---|---|
| INVALID_REQUEST | 参数格式错误 | 检查sign签名 |
| NOTENOUGH | 余额不足 | 提示用户换支付方式 |
| SYSTEMERROR | 系统超时 | 自动查询支付结果 |
6.2 打印小票配置
使用ESC/POS指令打印订单：
java复制public void printOrder(Order order) throws IOException {
Socket socket = new Socket("192.168.1.100", 9100);
OutputStream os = socket.getOutputStream();
// 设置居中打印
os.write(new byte[]{0x1B, 0x61, 0x01});
os.write("=== 甜品屋订单 ===".getBytes());
os.write("\n\n".getBytes());
// 打印订单明细
for (OrderItem item : order.getItems()) {
os.write(item.formatForPrint().getBytes());
}
socket.close();
}
7. 项目扩展方向
在实际运营中可以考虑：
- 对接外卖平台API
- 增加会员积分系统
- 开发自助点餐终端
- 接入智能音箱语音订购
库存预警功能实现示例：
sql复制CREATE EVENT check_low_stock
ON SCHEDULE EVERY 1 HOUR
DO
BEGIN
INSERT INTO notifications(product_id, message)
SELECT id, CONCAT(name, '库存不足')
FROM products WHERE stock < warning_stock;
END
这个项目从技术选型到功能设计都充分考虑了甜品行业的特殊性，比如需要处理商品定制属性、易腐品库存管理等特点。我在开发过程中最大的体会是：业务理解比技术实现更重要，只有深入了解甜品店的实际运营流程，才能设计出真正好用的系统。