1. 项目概述从零搭建蛋糕订购小程序的全栈实践去年帮学弟调试毕业设计时发现市面上很多蛋糕店的小程序都存在交互卡顿、订单状态不同步的问题。这促使我决定用SpringBootuni-app技术栈完整实现一套高可用的解决方案。这套系统不仅包含标准的外卖小程序功能模块还针对烘焙行业特性增加了预约自取时间选择、蛋糕尺寸可视化对比等特色功能。技术选型上后端采用SpringBoot 2.7 MyBatis Plus组合前端使用uni-app跨端框架。实测表明这套架构在开发效率与性能表现上达到了较好平衡——在Redmi Note 11上冷启动仅需1.3秒订单提交到商家端推送的延迟控制在300ms以内。数据库设计采用读写分离策略高峰期实测可承载每秒150的并发订单量。2. 核心架构设计解析2.1 技术栈选型依据后端选择SpringBoot主要基于三点考量一是自动装配机制能快速集成支付、消息推送等第三方SDK二是内嵌Tomcat简化部署流程三是与MyBatis Plus配合可实现单表零SQL开发。特别针对蛋糕商品的多规格场景我们扩展了MyBatis Plus的TypeHandler实现SKU属性的JSON自动转换。前端选用uni-app的决策点在于一套代码可同时发布到微信、支付宝小程序和H5。通过条件编译处理平台差异比如微信端用wx.login()实现静默授权而H5端采用手机号验证码登录。样式方面采用Flex布局配合rpx单位完美适配从iPhone13到华为MatePad Pro等各种设备。2.2 数据库关键表设计用户表(user)采用分库分表策略按用户ID哈希分散到3个物理库。核心字段包括CREATE TABLE user ( id bigint NOT NULL AUTO_INCREMENT COMMENT 雪花算法ID, openid varchar(64) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 微信标识, phone varchar(20) COLLATE utf8mb4_bin DEFAULT NULL COMMENT 加密存储, vip_level tinyint DEFAULT 0 COMMENT 会员等级, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_bin商品表(product)设计重点解决了蛋糕类目的特殊需求多规格属性使用JSON字段存储尺寸、糖度等选项展示权重支持拖拽排序的热销榜单时效控制预售商品自动上下架3. 核心功能模块实现3.1 购物车高性能实现方案传统小程序购物车采用前端本地存储我们改进为本地缓存服务端实时同步的双写模式。关键代码逻辑// uni-app端购物车操作 export const updateCart (skuId, count) { // 优先更新本地Vuex store.commit(cart/UPDATE_ITEM, {skuId, count}) // 防抖同步到服务端 debounce(() { uni.request({ url: /api/cart, method: PUT, data: {skuId, count}, success: (res) { // 冲突处理以服务端数据为准 if(res.data.code 409) { store.commit(cart/SYNC_REMOTE, res.data.data) } } }) }, 500) }后端采用Redis Hash存储购物车数据键设计为cart:{userId}字段为skuId值为JSON序列化的商品信息。特别处理了并发修改场景通过版本号机制实现乐观锁控制。3.2 分布式定时任务调度针对蛋糕预约需求我们基于XXL-JOB实现了分布式调度系统主要处理凌晨自动取消未支付订单制作完成前2小时提醒顾客每周销量统计报表生成关键配置示例XxlJob(orderCancelJob) public ReturnTString cancelExpiredOrder() { // 查询30分钟未支付订单 ListOrder orders orderMapper.selectExpiredOrders(); orders.forEach(order - { // 释放库存 skuMapper.releaseStock(order.getSkuId(), order.getCount()); // 更新订单状态 orderMapper.updateStatus(order.getId(), OrderStatus.CANCELED); }); return ReturnT.SUCCESS; }4. 特色功能开发实录4.1 蛋糕尺寸可视化对比通过Canvas绘制三维蛋糕模型用户可直观对比6寸/8寸的实际大小。技术关键在于使用uni-app的canvas组件基于设备DPI计算实际物理尺寸添加手势缩放交互核心算法function calculateRealSize(inch) { // 1英寸2.54厘米 const cm inch * 2.54 // 根据设备PPI转换为像素 const px cm * (uni.getSystemInfoSync().pixelRatio / 2.54) return Math.floor(px) }4.2 双Token无感刷新方案针对小程序session_key过期问题设计AccessTokenRefreshToken机制AccessToken有效期2小时用于常规API请求RefreshToken有效期7天存储于服务端Redis接口返回401时自动触发刷新流程安全防护措施每次刷新使旧Token立即失效设备指纹绑定防止Token盗用敏感操作需重新授权5. 性能优化实战技巧5.1 首屏加载加速三板斧图片优化使用CDN加速WebP格式动态适配懒加载非可视区图片接口聚合GetMapping(/home/init) public Result initData(RequestHeader(token) String token) { // 并行查询 CompletableFutureUser userFuture CompletableFuture.supplyAsync(() - userService.getByToken(token)); CompletableFutureListProduct hotFuture CompletableFuture.supplyAsync(() - productService.getHotSales()); CompletableFutureListCoupon couponFuture CompletableFuture.supplyAsync(() - couponService.getAvailable(token)); return Result.success(new HomeInitVO( userFuture.join(), hotFuture.join(), couponFuture.join() )); }分包加载将非核心页面拆分为子包按需加载5.2 高并发下单解决方案库存扣减采用Redis原子操作Long remain redisTemplate.opsForValue() .decrement(stock: skuId, count); if (remain 0) { // 回滚操作 redisTemplate.opsForValue() .increment(stock: skuId, count); throw new BusinessException(库存不足); }订单号生成使用雪花算法Redis自增序列String orderNo snowflake.nextId() String.format(%04d, redisTemplate.opsForValue() .increment(order:seq));异步日志记录通过RabbitMQ消息队列削峰6. 踩坑实录与解决方案6.1 微信支付证书加载异常问题现象Linux服务器报PKCS12 key store not found根因分析微信支付证书需放在resources目录下但SpringBoot打包后会改变路径解决方案Bean public WXPayConfig wxPayConfig() { return new WXPayConfig() { public InputStream getCertStream() { // 从classpath加载 return getClass().getResourceAsStream(/cert/apiclient_cert.p12); } }; }6.2 uni-app iOS平台样式异常典型问题部分安卓正常的Flex布局在iOS错乱调试技巧使用border调试法快速定位问题元素检查是否误用了Android特有属性如lineHeight: 1.2慎用CSS缩写iOS对flex: 1的解析存在差异最终方案统一使用更明确的写法/* 不推荐 */ .item { flex: 1; } /* 推荐 */ .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }7. 项目部署与监控7.1 容器化部署方案Dockerfile最佳实践FROM openjdk:11-jre WORKDIR /app COPY target/*.jar app.jar # 时区设置 RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime # 内存限制 ENV JAVA_OPTS-Xms512m -Xmx512m -XX:UseG1GC ENTRYPOINT [sh, -c, java ${JAVA_OPTS} -jar app.jar]启动参数建议docker run -d -p 8080:8080 \ -e SPRING_PROFILES_ACTIVEprod \ -v /path/to/logs:/app/logs \ --name cake-app cake-image7.2 监控告警配置Prometheus关键指标- job_name: springboot metrics_path: /actuator/prometheus scrape_interval: 15s static_configs: - targets: [host.docker.internal:8080]Grafana监控看板应包含JVM内存/线程状态接口QPS/耗时百分位Redis缓存命中率订单状态分布饼图8. 毕业设计扩展建议如需提升论文深度建议从以下方向扩展加入推荐算法基于用户历史订单实现协同过滤推荐实现智能客服集成NLP问答模块增加AR预览通过摄像头展示虚拟蛋糕效果数据可视化使用ECharts展示销售热力图代码结构组织技巧├── cake-common # 通用模块 ├── cake-dao # 数据访问层 ├── cake-service # 业务逻辑 ├── cake-api # 接口层 └── cake-admin # 管理后台
