HarmonyOS ArkTS 实战校园食堂评价与美食推荐完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习生活类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 700 行可直接运行通过本项目你将掌握星级评分组件的实现与交互设计评价系统的数据结构与排序算法菜品收藏与推荐机制的设计瀑布流布局与卡片视觉设计多维度筛选与排行榜功能实现目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 菜品模型 Dish][2.2 评价模型 Comment][2.3 设计思路说明][三、核心功能实现详解][3.1 菜品浏览与筛选][3.2 星级评分与发表评价][3.3 收藏与推荐算法][3.4 食堂排行榜][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 星级评分的交互设计考量][5.2 美食推荐算法的基础设计][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值今天吃什么是大学生每天都要面对的灵魂拷问。校园食堂窗口众多、菜品丰富但质量参差不齐新生不了解哪些好吃老生想尝新又怕踩雷。食堂评价与美食推荐应用正是为了解决这个痛点。本项目基于 HarmonyOS ArkTS 实现了一个校园食堂评价与美食推荐应用整合了菜品打分评价、美食推荐、收藏菜品、食堂排行、热门窗口、吐槽反馈等功能通过UGC评价体系帮助学生发现美食、避开雷区。项目核心价值决策效率价值看评分选菜减少选择困难降低踩雷概率信息透明价值建立公开评价体系促进食堂提升菜品质量社区互动价值美食分享形成校园饮食文化增加生活乐趣1.2 完整功能清单功能模块具体功能实现难度⭐菜品浏览菜品列表、食堂筛选、搜索查找、分类浏览⭐⭐评价系统星级评分、文字评价、点赞互动、评价列表⭐⭐⭐收藏管理收藏菜品、我的收藏、收藏分类、快速查找⭐⭐排行榜菜品排行、食堂排行、窗口排行、新晋热门⭐⭐⭐推荐系统每日推荐、猜你喜欢、新品推荐、高分推荐⭐⭐⭐反馈互动吐槽反馈、问题上报、点赞评论、分享美食⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS强类型支持适合评分、排序等数据处理状态管理State 装饰器轻量响应式满足评价和收藏状态更新布局方式瀑布流/网格布局适合菜品卡片展示视觉效果好数据存储内存状态演示简化生产环境需对接后端服务最低版本API 24兼容主流 HarmonyOS 设备⚠️ 注意本项目为前端演示版本评价数据均为本地模拟。真实食堂评价平台需要运营审核机制防止恶意差评和广告灌水。二、数据结构设计2.1 菜品模型 Dish菜品是系统的核心实体包含基本信息和评分数据。/** * 食堂菜品数据模型 */interfaceDish{id:number;// 菜品IDname:string;// 菜品名称canteen:string;// 所属食堂window:string;// 所属窗口price:number;// 价格元score:number;// 综合评分 0-5tags:string[];// 标签好吃/性价比高/分量足 等image:string;// 菜品图片isCollected:boolean;// 是否已收藏commentCount:number;// 评价数量}2.2 评价模型 Comment评价是用户对菜品的反馈包含评分和文字内容。/** * 菜品评价数据模型 */interfaceComment{id:number;// 评价IDdishId:number;// 所属菜品IDuserName:string;// 评价用户score:number;// 评分 1-5星content:string;// 评价内容time:string;// 评价时间likes:number;// 点赞数}2.3 设计思路说明为什么评分采用5星制5星评分是最经典也最符合用户习惯的评分体系认知成本低几乎所有人都理解5星代表好1星代表差粒度适中5个等级足够区分好坏又不会因为选项太多让用户纠结计算方便平均分、加权分等统计都很直观视觉友好星星图标美观交互反馈好10分制太精细3分制太粗糙5星制是体验和精度的最佳平衡点。关于标签系统的设计标签是对评分的补充提供更多维度的信息口味维度好吃、一般、难吃性价比维度性价比高、有点贵、便宜分量维度分量足、刚好、吃不饱其他排队久、环境好、新品等标签让评价信息更结构化用户可以快速了解菜品的特点而不只是一个干巴巴的分数。三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivatecommentContentText:string;// 评价内容输入Stateprivaterating:number5;// 当前评分默认5星StateprivateselectedCanteen:string全部;// 食堂筛选StateprivatenextCommentId:number10;// 下一条评价IDStateprivatedishes:Dish[][];// 菜品列表Stateprivatecomments:Comment[][];// 评价列表3.2 菜品筛选与搜索/** * 获取筛选后的菜品列表 * 支持按食堂筛选和排序 */privategetFilteredDishes():Dish[]{letresultthis.dishes;// 按食堂筛选if(this.selectedCanteen!全部){resultresult.filter(dd.canteenthis.selectedCanteen);}// 按评分降序排序高分在前returnresult.sort((a,b)b.score-a.score);}/** * 切换收藏状态 */privatetoggleCollect(dishId:number):void{this.dishesthis.dishes.map(dd.iddishId?{...d,isCollected:!d.isCollected}:d);}3.3 发表评价与星级评分用户选择星级并填写评价内容后提交。/** * 提交菜品评价 * param dishId 菜品ID */privatesubmitComment(dishId:number):void{constcontentthis.commentContentText.trim();if(content.length0)return;// 1. 创建新评价constcomment:Comment{id:this.nextCommentId,dishId:dishId,userName:我,score:this.rating,content:content,time:newDate().toLocaleString(),likes:0};this.comments[comment,...this.comments];this.nextCommentId;// 2. 更新菜品的平均评分和评价数this.updateDishScore(dishId);// 3. 清空输入this.commentContentText;this.rating5;}/** * 重新计算菜品平均评分 * 简化版取所有评价的平均分 */privateupdateDishScore(dishId:number):void{constdishCommentsthis.comments.filter(cc.dishIddishId);if(dishComments.length0)return;consttotalScoredishComments.reduce((sum,c)sumc.score,0);constavgScoreMath.round((totalScore/dishComments.length)*10)/10;this.dishesthis.dishes.map(dd.iddishId?{...d,score:avgScore,commentCount:dishComments.length}:d);}设计要点解析实时更新平均分提交评价后立即重新计算菜品平均分保证数据一致性保留一位小数评分精度到0.1分既精确又不会太琐碎评价数同步更新评价数量也是重要参考指标避免只有1个5分就排第一3.4 评价点赞功能/** * 给评价点赞 */privatelikeComment(commentId:number):void{this.commentsthis.comments.map(cc.idcommentId?{...c,likes:c.likes1}:c);}/** * 获取某菜品的热门评价 * 按点赞数排序取前3条 */privategetTopComments(dishId:number):Comment[]{returnthis.comments.filter(cc.dishIddishId).sort((a,b)b.likes-a.likes).slice(0,3);}3.5 食堂排行榜/** * 计算各食堂的平均评分 * 生成食堂排行榜 */privategetCanteenRanking(){constcanteenMapnewMapstring,{total:number;count:number}();this.dishes.forEach(d{if(!canteenMap.has(d.canteen)){canteenMap.set(d.canteen,{total:0,count:0});}constdatacanteenMap.get(d.canteen)!;data.totald.score;data.count;});constranking:{name:string;avgScore:number}[][];canteenMap.forEach((value,key){ranking.push({name:key,avgScore:Math.round((value.total/value.count)*10)/10});});// 按平均分降序returnranking.sort((a,b)b.avgScore-a.avgScore);}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 数据统计栏 │ ← 收录菜品/我的收藏/已评价/今日推荐 ├─────────────────────────┤ │ 搜索栏 食堂筛选 │ ← 搜索 一食堂/二食堂 切换 ├─────────────────────────┤ │ Tab 切换栏 │ ← 推荐 / 排行榜 / 我的收藏 ├─────────────────────────┤ │ │ │ 菜品瀑布流 │ ← 菜品卡片 评分 价格 │ │ └─────────────────────────┘4.2 主题色与视觉规范主色调玫瑰红 #F43F5E选择玫瑰红作为主题色的设计考量美食属性联想玫瑰红/玫红色与美食、食欲有着天然的视觉关联令人联想到美味的食物激发用户探索美食的兴趣热情活力调性玫红色传递热情、活力、愉悦的情绪与发现美食、分享快乐的产品定位高度契合视觉吸引力强高饱和度的红色系在视觉上非常醒目能够快速抓住用户注意力适合推荐和热门标记层次感丰富从浅粉到深红的色阶变化丰富可以用于评分高低、热门程度等不同层级的视觉区分辅助色规范主色调#F43F5E玫瑰红高分菜品#F43F5E红色高亮推荐中等评分#F59E0B琥珀色低分菜品#6B7280灰色价格标签#1F2937深灰加粗收藏高亮#F59E0B金色星星4.3 状态视觉区分表评分等级星星颜色文字颜色推荐标签心理暗示4.5-5分全金色星星玫瑰红强烈推荐必吃美食4.0-4.4分金色星星深橙推荐值得一试3.5-3.9分半金半灰琥珀还行可以尝试3.0-3.4分灰色星星灰色一般谨慎选择3分以下全灰星星深灰不推荐建议避雷收藏状态图标样式视觉表现交互反馈未收藏空心星星灰色点击填充金色已收藏实心星星金色点击变空心五、关键技术点解析5.1 星级评分的交互设计考量星级评分看似简单实际上有很多交互细节影响用户体验。交互设计要点实时预览手指滑到第几颗星星星就实时点亮到第几颗给用户即时反馈点击区域每颗星的点击区域要比视觉图标大方便手指点击半星支持可选支持0.5星精度提供更精细的评分粒度取消评分再次点击当前星级可以取消回到未评分状态文字辅助可以配合很差/一般/好/很好/非常好等文字提示常见的评分偏差问题分数膨胀大多数人都打4-5分导致区分度不高极端评价特别好或特别差才会评价中间的不评价恶意差评竞争对手或情绪性的不合理低分解决方案增加评价审核、加权计算、异常检测等机制。5.2 美食推荐算法的基础设计推荐系统是美食应用的核心竞争力从简单到复杂有多个层级。推荐算法演进路径算法级别实现方式推荐效果开发难度L1 基础按评分排序推荐一般低L2 标签基于标签的相似推荐中等中L3 协同过滤基于用户行为的协同过滤较好高L4 深度学习深度学习个性化推荐很好很高本项目采用的简化推荐策略热门推荐评分高 评价数多的菜品质量有保障新品推荐最近新增的菜品鼓励尝鲜收藏相似根据用户收藏的菜品推荐同食堂同类型的菜品对于校园场景简单的规则推荐已经能满足基本需求开发成本低效果也不错。六、常见问题与优化建议踩坑点 1评分水军刷分问题表现有人恶意刷高分或恶意刷低分影响评分公正性解决方案增加评价审核机制限制单人评价次数异常评分加权处理踩坑点 2菜品信息不准确问题表现窗口换了菜品、价格变了信息更新不及时解决方案建立用户纠错机制允许用户上报信息变更运营审核后更新踩坑点 3评价内容质量低问题表现很多评价只有好吃一般几个字参考价值不大解决方案引导用户填写结构化评价口味、分量、性价比等维度奖励优质评价踩坑点 4搜索匹配度差问题表现搜索红烧肉搜不到红烧五花肉解决方案增加同义词和模糊匹配支持拼音搜索优化搜索算法优化方向增加菜品图片上传功能用户评价时可以配图实现实时排队人数显示帮助学生错峰就餐增加营养成分信息提供健康饮食建议接入每日菜单更新提前知道今天有什么菜七、项目总结与扩展方向核心收获通过完成食堂评价与美食推荐项目你将掌握星级评分组件的完整交互实现评价系统的数据结构与排序算法瀑布流布局的卡片视觉设计基础推荐系统的设计思路后续扩展功能图片评价评价可以上传图片有图有真相排队人数实时显示各食堂窗口排队情况错峰就餐营养成分展示菜品热量和营养健康饮食每日菜单每日更新菜单提前知道今天吃什么外卖点餐在线点餐送到宿舍楼下美食榜单周榜月榜年榜发现校园美食天花板运行效果