1. 项目背景与核心价值药膳作为传统中医文化与现代营养学结合的产物近年来在健康管理领域获得广泛关注。随着治未病理念的普及越来越多用户开始通过食疗调理身体状态。然而当前市面上的药膳菜谱普遍存在以下痛点信息零散配方分散在各类书籍、视频平台缺乏系统化整理适配性差未考虑用户体质差异、季节时令等个性化因素交互薄弱多数为静态展示缺少收藏、定制等实用功能数据孤立营养分析、药材配伍等关键信息未结构化存储本系统采用SpringBootVue技术栈实现了药膳数据的全生命周期管理。前端通过Vue3组合式API构建响应式界面后端基于SpringBoot提供RESTful API二者通过Axios进行数据交互。系统核心功能模块包括智能推荐引擎基于用户体质问卷如气虚/湿热等匹配适宜药膳多维检索体系支持按功效如健脾/安神、药材、烹饪方式等组合查询配伍禁忌检测自动校验食材与中药材的相克关系如人参忌萝卜营养分析看板可视化展示菜品的热量、蛋白质等营养成分占比提示系统特别设计了时令模式根据二十四节气动态调整推荐权重。例如夏季优先显示绿豆、百合等清热食材为主的配方。2. 技术架构设计2.1 前后端分离方案选型采用SpringBootVue的分离架构主要基于以下考量方案类型传统JSP服务端渲染(SSR)前后端分离(本方案)开发效率耦合度高需要Node.js环境并行开发性能表现首屏快但交互慢SEO友好需优化首屏加载技术栈要求需掌握JavaWeb全栈需SSR框架知识明确职责边界适用场景简单管理系统内容型网站复杂交互应用本系统选择分离架构的原因药膳管理系统需要丰富的交互效果如拖拽排序菜谱步骤团队有专职前端人员可深度优化Vue组件未来可能开发小程序等多端应用2.2 后端技术栈详解SpringBoot选用2.7.3版本LTS维护版主要模块配置如下// 安全控制 implementation org.springframework.boot:spring-boot-starter-security // 数据库访问 implementation org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.2 // 缓存支持 implementation org.springframework.boot:spring-boot-starter-data-redis // 文件处理 implementation commons-io:commons-io:2.11.0数据库设计遵循药膳领域特点药材表(tb_herb)包含性味归经等专业字段菜谱表(tb_recipe)设置季节权重字段(season_weight)用户画像表(tb_profile)记录体质检测结果2.3 前端工程化实践Vue3项目采用Vite构建关键配置优化点// vite.config.js export default defineConfig({ plugins: [vue()], build: { rollupOptions: { output: { manualChunks(id) { // 将element-plus单独打包 if (id.includes(element-plus)) { return element } } } } } })样式方案选择全局使用SCSS编写主题变量组件级样式采用CSS Modules第三方库样式通过unplugin-auto-import自动按需加载3. 核心功能实现3.1 智能推荐算法推荐逻辑包含三个层级基础过滤排除用户过敏食材和禁忌配伍权重计算# 相似度计算公式 def calculate_score(user, recipe): season_match 1 if recipe.season current_season() else 0.3 body_score cosine_similarity(user.body_vec, recipe.effect_vec) return 0.4*season_match 0.6*body_score多样性控制确保每页结果包含不同功效类别的菜谱3.2 配伍禁忌检测建立药材关系图谱使用图数据库Neo4j存储相互作用// 创建相克关系 MATCH (a:Herb {name:甘草}), (b:Herb {name:甘遂}) CREATE (a)-[:INCOMPATIBLE]-(b)检测时通过Cypher查询MATCH path(h1)-[:INCOMPATIBLE*..2]-(h2) WHERE h1.name IN $ingredients AND h2.name IN $ingredients RETURN path3.3 菜谱编辑器开发采用JSON Schema定义菜谱数据结构{ type: object, properties: { steps: { type: array, items: { type: object, properties: { images: {type: array, items: {type: string}}, duration: {type: number} } } } } }配合VueDraggable实现步骤排序draggable v-modelsteps handle.handle endonSortEnd div v-for(step, index) in steps :keyindex i classhandle≡/i {{ step.content }} /div /draggable4. 部署与性能优化4.1 容器化部署方案Docker Compose编排文件示例version: 3 services: app: build: . ports: - 8080:8080 depends_on: - redis environment: - SPRING_PROFILES_ACTIVEprod redis: image: redis:alpine volumes: - redis_data:/data关键优化参数设置JVM内存参数-XX:MaxRAMPercentage80启用G1垃圾回收器-XX:UseG1GC配置Tomcat连接池server.tomcat.max-threads200 server.tomcat.accept-count504.2 前端性能提升实施策略图片懒加载使用Intersection Observer APIconst observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { entry.target.src entry.target.dataset.src observer.unobserve(entry.target) } }) })路由懒加载const RecipeDetail () import(/views/RecipeDetail.vue)WebWorker处理复杂计算如营养分析4.3 监控与日志SpringBoot Admin配置示例Configuration EnableAdminServer public class AdminConfig { Bean public InMemoryHttpTraceRepository httpTraceRepository() { return new InMemoryHttpTraceRepository(); } }前端埋点方案// 用户行为追踪 const track (event, payload) { if (import.meta.env.PROD) { navigator.sendBeacon(/analytics, { event, ...payload }) } }5. 典型问题解决方案5.1 跨域会话保持前后端分离常见的Cookie失效问题解决方案后端配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowCredentials(true) .allowedOriginPatterns(*) } }前端Axios配置axios.defaults.withCredentials true5.2 大文件上传优化药膳制作视频上传的处理方案分片上传const chunkSize 5 * 1024 * 1024 // 5MB const uploadChunk async (file, chunkIndex) { const start chunkIndex * chunkSize const chunk file.slice(start, start chunkSize) const formData new FormData() formData.append(chunk, chunk) await axios.post(/upload, formData) }断点续传实现服务端记录已上传分片hash客户端通过spark-md5生成文件指纹5.3 移动端适配策略针对药膳制作场景的移动优化使用vw/vh单位实现响应式布局关键操作按钮增加触摸反馈.btn:active { transform: scale(0.95); transition: transform 0.1s; }拍照上传功能调用设备APIinput typefile acceptimage/* captureenvironment6. 扩展功能设计6.1 中医体质检测实现九种体质的自动化判定设计问卷问题库如是否容易出汗使用决策树算法计算体质倾向def check_body_type(answers): if answers[q1] 3 and answers[q2] 2: return 阳虚质 elif answers[q3] 5: return 湿热质 # 其他判断逻辑...6.2 智能购物清单根据所选菜谱自动生成采购清单食材去重合并智能换算如黄芪10g→黄芪1包关联附近药店API获取药材库存6.3 药膳知识图谱构建药材关系网络使用Python爬取《中国药典》数据Neo4j存储实体关系前端通过Echarts实现可视化查询MATCH path(h:Herb)-[r]-(t) WHERE h.name当归 RETURN path LIMIT 507. 项目演进路线7.1 短期优化方向增加AR药膳制作指引对接智能厨电API开发微信小程序版本7.2 长期发展规划引入机器学习优化推荐算法建立用户健康档案系统开发药膳外卖O2O模块实际开发中发现药材数据的标准化是最大挑战。我们最终通过以下方式解决建立药材别名映射表如怀山药淮山开发数据清洗流水线def clean_herb_name(name): name re.sub(r[(].*?[)], , name) # 去除括号内容 return alias_mapping.get(name, name)人工复核关键数据