ChefMate————手残党的福音

CloudStudio

项目介绍

ChefMate - 智能菜谱助手

ChefMate是一款智能菜谱助手应用,帮助用户发现、收藏和购买食材制作美食。

功能特点

1. 首页 (home.html)

  • 浏览推荐菜谱
  • 按分类筛选菜谱(鲁菜、川菜、粤菜等)
  • 搜索菜谱功能
  • 收藏喜欢的菜谱
  • 语音输入搜索菜谱
  • 日期选择功能

2. 菜谱详情 (recipe-detail.html)

  • 查看菜谱详细信息(食材、步骤等)
  • 收藏菜谱功能
  • 添加食材到购物篮
  • 分享菜谱
  • 调整食材分量
  • 进入烹饪模式

3. 收藏夹 (favorites.html)

  • 查看收藏的菜谱
  • 查看收藏的食材
  • 分类筛选(全部、菜谱、食材)
  • 删除收藏项
  • 分享功能

4. 购物篮 (shopping-basket.html)

  • 管理购物清单
  • 按分类查看食材(蔬菜、水果、肉类等)
  • 添加新食材
  • 添加新分类
  • 标记已购买食材
  • 调整食材数量
  • 收藏常用食材
  • 分享购物清单

5. 个人中心 (profile.html)

  • 查看个人资料
  • 编辑个人资料
  • 查看成就徽章
  • 设置功能

6. 搜索功能 (search.html)

  • 搜索菜谱
  • 按分类筛选
  • 语音搜索

技术实现

前端

  • HTML5 + CSS3 + JavaScript
  • 响应式设计,适配移动端
  • 本地存储 (localStorage)

后端

  • Python Flask API
  • 语音识别功能
  • 菜谱数据管理

使用说明

  1. 打开 index.html 进入应用
  2. 在首页浏览推荐菜谱或使用搜索功能查找菜谱
  3. 点击菜谱卡片查看详细信息
  4. 在菜谱详情页可以:
    • 收藏菜谱
    • 添加所需食材到购物篮
    • 调整食材分量
    • 分享菜谱
  5. 在购物篮页面可以:
    • 管理购物清单
    • 按分类查看食材
    • 添加新食材
    • 标记已购买食材
  6. 在收藏夹页面可以:
    • 查看收藏的菜谱和食材
    • 删除不需要的收藏项

开发说明

项目结构

chefmateweb/
├── index.html          # 应用入口
├── home.html           # 首页
├── recipe-detail.html  # 菜谱详情页
├── favorites.html      # 收藏夹页
├── shopping-basket.html# 购物篮页
├── profile.html        # 个人中心页
├── search.html         # 搜索页
├── css/                # 样式文件
├── js/                 # JavaScript文件
├── images/             # 图片资源
├── recipes/            # 菜谱数据文件
└── backend/            # 后端API

主要JavaScript文件

  • script.js: 首页功能实现
  • recipe-detail.js: 菜谱详情页功能实现
  • favorites.js: 收藏夹功能实现
  • shopping-basket.js: 购物篮功能实现
  • profile.js: 个人中心功能实现
  • search.js: 搜索功能实现

本地存储键名

  • chefmate_favorites: 收藏数据
  • chefmate_market_data: 购物篮数据
  • chefmate_categories: 自定义分类数据
  • chefmate_user_info: 用户信息

后端API

后端使用Python Flask实现,提供以下功能:

运行后端服务:

python backend/app.py

注意事项

Contributors:

依霏雪

依霏雪

Cola Pig

Cola Pig

核蛋拌面

核蛋拌面

瘦子阿尔法

瘦子阿尔法

飞书

飞书交流群

微信

微信交流群