食物数据分析系统vue+flask

食物数据分析系统

项目概述

食物数据分析系统是一个集食物营养成分查询、对比分析和数据可视化于一体的Web应用。系统采用前后端分离架构，为用户提供食物营养信息检索、食物对比和营养分析等功能，帮助用户了解食物的营养成分，做出更健康的饮食选择。

系统架构

总体架构

系统采用前后端分离的架构设计：

前端：基于Vue.js框架，使用Element UI组件库，Echarts图表库实现数据可视化
后端：基于Flask框架，提供RESTful API服务
数据库：MySQL数据库存储食物和营养成分数据
数据处理：Python脚本实现数据清洗和转换

技术栈

前端技术栈

Vue.js 2.x：前端MVVM框架
Vue Router：前端路由管理
Axios：HTTP客户端
Element UI：UI组件库
Echarts：数据可视化图表库

后端技术栈

Flask：Python Web框架
PyMySQL：MySQL数据库连接
SQLAlchemy：ORM框架
Pandas：数据分析和处理

数据流程

数据获取与处理

系统使用的食物数据经过以下流程处理：

数据抓取：通过foodSpider目录下的爬虫采集食物数据
数据转换 ：使用data_conversion.py将JSON格式数据转换为CSV格式
数据清洗 ：使用data_cleaning.py进行数据清洗，包括：
- 删除空格和多余字符
- 重命名属性（列）
- 删除不需要的属性（列）和行
- 去除重复项
- 处理缺失值（填充为0）
数据导入：将处理后的CSV数据导入MySQL数据库

功能模块

前端模块

前端系统主要包含以下视图和功能：

食物搜索 (search_food.vue)
- 根据食物名称搜索
- 显示搜索结果列表
- 查看详细营养信息
食物对比 (food_contrast.vue)
- 选择两种食物进行对比
- 以图表形式展示营养成分对比
- 对比结果分析
营养分析 (food_power.vue)
- 食物营养价值分析
- 主要营养素含量查看
- 营养素详情分析
营养详情 (nutrition_details.vue)
- 展示特定营养素含量排名靠前的食物
- 详细营养素数据展示

后端API接口

后端提供多个API接口，主要包括：

食物查询接口
- /api/food/food_list：根据名称查询食物列表
- /api/food/food_detailed：获取食物详细信息
营养成分接口
- /api/food/nutrition_list：获取营养成分名称列表
- /api/food/nutrition_style_list：获取营养类别列表
- /api/food/nutrition_details：获取特定营养成分详情
分析接口
- /api/food/main_nutrition：获取主要营养素信息
- /api/food/nutrition_analysis：获取食物营养分析
- /api/food/similar_foods：查找相似食物
- /api/food/top_foods：获取某营养成分含量最高的食物

数据库设计

系统使用MySQL数据库，主要包含以下表：

foodinfo表：存储食物基本信息和营养成分
- id：食物ID
- 食物名称：食物名称
- 其他字段：各种营养成分含量
nutritions_name表：存储营养素名称和分类信息
- id：营养素ID
- nurition_name：营养素名称
- nurition_style_id：营养素分类ID
style表：存储营养素分类
- nurition_style_id：分类ID
- nurition_style_name：分类名称

部署指南

环境要求

Mac系统环境

Python 3.6+
Node.js 10+
MySQL 5.7+
pip包管理工具
npm包管理工具

Windows系统环境

Python 3.6+
Node.js 10+
MySQL 5.7+
pip包管理工具
npm包管理工具

后端部署

数据库设置

sql 复制代码

CREATE DATABASE food_analysis;
USE food_analysis;

-- 根据food.sql导入数据
SOURCE /path/to/food.sql;

后端环境设置

bash 复制代码

# 进入后端目录
cd back_end

# 安装依赖
pip install -r requirements.txt

# 修改配置
# 编辑config.py文件，配置数据库连接信息

# 启动服务器
python run.py

前端部署

前端环境设置

bash 复制代码

# 进入前端目录
cd front_end

# 安装依赖
npm install

# 开发模式启动
npm run serve

# 生产环境构建
npm run build

配置后端API地址
- 在front_end/src/config.ts中设置API基础URL

完整启动流程

启动MySQL数据库服务
运行后端Flask应用 python back_end/run.py
运行前端Vue应用 cd front_end && npm run serve
访问 http://localhost:8080 打开应用

开发指南

添加新的食物数据

准备CSV格式的食物数据
使用data_cleaning.py进行数据清洗
导入MySQL数据库

添加新的API接口

在back_end/api/food.py中定义新的路由和处理函数
在back_end/app.py中登记新的路由端点

添加新的前端页面

在front_end/src/views目录下创建新的Vue组件
在front_end/src/router.js中添加新的路由配置
更新相关导航链接

常见问题与解决方案

数据编码问题

确保CSV文件使用UTF-8或GBK编码
在读取CSV文件时指定正确的编码格式
数据库表使用utf8mb4字符集

数据库连接问题

检查数据库服务是否启动
验证用户名密码是否正确
确认数据库名称是否正确
检查防火墙设置

前端API调用问题

确认后端服务是否正常运行
检查API地址配置是否正确
查看浏览器控制台的网络请求错误信息

联系方式

咸鱼：万能程序员

视频：https://www.bilibili.com/video/BV1JPVxzXEnd/