本系统聚焦校园场景下的学生饮食健康管理,核心功能涵盖用户身份认证、菜品智能选择、饮食数据分析三大模块。业务流程以 “刷卡认证→菜品选择→热量核算→健康建议” 为主线:学生通过刷卡完成身份核验后,可在系统推荐的主食、荤菜、素菜、汤品中自由搭配,确认选择后系统自动计算总热量,对照《中国学生营养日》推荐标准生成个性化饮食建议,并通过折线图直观展示近 7 天热量摄入趋势。管理后台支持用户管理、菜品维护与数据统计,实现饮食健康管理的全流程数字化,助力学生养成科学饮食习惯。
系统采用 “前后端分离 + 轻量化部署” 架构,核心围绕 “校园饮食健康管理” 场景设计,遵循 “简单易用、高效稳定、可扩展” 原则架构分层:前端(用户交互层)+ 后端(服务逻辑层)+ 本地存储(数据临时层),无需复杂数据库,降低部署门槛;
设计核心:以 “用户体验” 为中心,简化操作流程(刷卡→选餐→分析→建议),同时兼顾管理端的数据管控需求;核心技术:HTML5 + Tailwind CSS(样式开发)+ JavaScript(交互逻辑);
辅助工具:Font Awesome(图标库)、Chart.js(数据可视化,实现热量趋势折线图);
适配方案:响应式布局,兼容 PC 端、手机端等多设备访问。开发框架:Python + Flask(轻量化 Web 框架,快速搭建路由与服务);
核心能力:提供页面访问路由、静态资源加载、用户 / 菜品数据临时存储与逻辑处理;
部署配置:支持 host='0.0.0.0' 局域网监听,适配多设备访问需求。数据存储:前端 localStorage(管理端登录状态缓存)+ 后端内存变量(用户、菜品数据临时存储);
交互技术:原生 JS 事件绑定(刷卡、选餐、确认等操作)、DOM 动态渲染(菜品卡片、分析结果)。困难:Flask 默认绑定127.0.0.1,仅本机可访问;防火墙拦截端口、路由器双频隔离导致跨设备连通失败。
解决方法:
后端配置 app.run(host='0.0.0.0', port=5000),让服务监听所有网络接口;
服务器端放行 5000 端口(Linux 用firewall-cmd命令,Windows 配置防火墙入站规则);
路由器关闭 “AP 隔离”“子网隔离”,确保手机、电脑连同一 WiFi / 子网。困难:第三方资源(Tailwind CSS、Chart.js)CDN 下载失败,本地文件路径引用错误,导致样式、图表、交互动画无法正常显示。
解决方法:
替换国内可用 CDN 地址(如 BootCDN),确保资源稳定加载;
统一文件路径规范(如static/js/“static/css/),核对 HTML 中资源引用路径与实际文件位置一致;
新增资源完整性校验,通过浏览器 F12 “网络” 面板排查 404 / 加载失败的资源,针对性修复。
3. 管理端跳转与登录状态问题