1. 项目背景与核心价值全屋定制行业近年来呈现爆发式增长消费者对个性化家居解决方案的需求与日俱增。传统定制流程存在方案匹配度低、设计周期长、沟通成本高等痛点。这个毕业设计项目正是瞄准这一市场缺口通过智能推荐算法重构线上定制流程。我在实际家居行业数字化转型项目中发现优秀的全屋定制平台需要解决三个核心问题如何快速理解用户风格偏好如何实现设计方案与户型的高效匹配如何降低非专业用户的设计门槛本项目的创新点在于将协同过滤算法与内容特征分析相结合构建了适用于家居领域的混合推荐模型。2. 系统架构设计解析2.1 技术选型决策依据前端采用Vue3Element Plus组合主要考虑三点一是组件化开发适合频繁迭代的定制界面二是虚拟DOM性能优势能承载3D户型展示三是TypeScript支持能提升大型项目可维护性。实测中对比React方案Vue3的Composition API在复杂交互逻辑组织上更具优势。后端选择Spring BootMyBatis框架组合MySQL作为主数据库。这里有个关键决策点为什么不用JPA因为定制业务涉及大量非标准查询如空间关系计算MyBatis的灵活SQL编写更适应这种场景。我们特别添加了Redis缓存层将推荐结果缓存时间设置为15分钟通过AB测试得出的最优值。2.2 智能推荐模块设计推荐系统采用混合架构基于用户的协同过滤UserCF计算相似用户群基于内容的推荐CBF分析户型特征面积/朝向/结构实时行为加权最近浏览记录权重设为0.6收藏记录0.3算法融合公式经过多次调优最终评分 0.4*UserCF 0.3*CBF 0.3*实时行为这个权重分配使得系统既保持个性化又避免过度收敛。3. 核心功能实现细节3.1 三维户型解析器开发解决的关键技术难题是如何自动解析上传的CAD图纸。我们开发了基于Python的解析器主要处理流程def parse_cad(file): # 使用ezdxf库读取DXF文件 dwg ezdxf.readfile(file) # 提取墙体数据 walls [entity for entity in dwg.entities if entity.dxftype() LINE] # 空间关系计算 room_graph build_adjacency_matrix(walls) return RoomModel(room_graph)遇到的坑最初直接用OpenCV处理CAD转的位图精度损失严重。后来改用专业DXF解析库才解决。3.2 风格匹配算法优化用户风格测试问卷设计很有讲究我们采用非对称五级量表看到这个沙发图片时你的心动程度以下哪种描述最符合你的理想家居通过预训练的风格分类模型ResNet50微调将用户选择映射到12维风格向量。关键技巧是在损失函数中加入对比损失项使相似风格的样本在向量空间更聚集。4. 前后端协作关键点4.1 状态管理方案采用VuexTypeScript实现类型安全的状态管理核心接口设计interface DesignState { currentRoom: Room3DModel; materialList: Material[]; recommendationPool: DesignCase[]; } // 使用装饰器简化mutations调用 Mutation updateMaterials(payload: Material[]) { state.materialList payload; }特别注意3D场景状态需要特殊处理我们采用快照机制每次操作前保存场景状态到IndexedDB。4.2 性能优化实践模型加载优化将GLTF模型拆分为基础包1MB和异步加载包接口缓存策略对GET请求添加指纹校验304响应比例提升到68%推荐计算Worker化将算法运算移到Web Worker线程实测数据首屏加载从4.2s降到1.8sFCP提升56%。有个重要发现Three.js的实例化渲染对家具陈列场景特别有效同屏渲染性能提升3倍。5. 典型问题排查实录5.1 内存泄漏问题现象长时间使用后浏览器标签页内存占用超过2GB。通过Chrome Memory工具定位到Three.js纹理未释放Vue组件销毁时未清除事件监听解决方案onBeforeUnmount(() { scene.dispose(); // 释放Three.js资源 eventBus.off(update); // 清除自定义事件 });5.2 推荐结果震荡表现为用户小幅操作导致推荐结果剧烈变化。根本原因是特征权重未做平滑处理。改进方法添加滑动窗口均值滤波设置推荐变更阈值相似度15%才更新调整后用户满意度评分从3.2提升到4.55分制。6. 项目部署与扩展建议6.1 容器化部署方案Dockerfile配置要点# 前端构建阶段 FROM node:16 as build WORKDIR /app COPY package*.json . RUN npm ci COPY . . RUN npm run build # 生产阶段 FROM nginx:alpine COPY --frombuild /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf特别提醒Nginx配置需要增加对WebSocket的支持否则3D协作功能无法使用。建议内存限制设为1.5GB以上。6.2 后续优化方向引入GAN网络生成虚拟样板间增加AR预览功能已验证可用WebXR实现推荐算法加入强化学习机制在开发过程中有个深刻体会家居行业的数字化不是简单地把线下流程搬到线上而是要重构用户决策路径。我们通过埋点分析发现用户在3D场景中平均停留时间达8分钟远超传统图片浏览模式的2分钟。
