# 抖音小程序食谱菜谱工具项目总结

## 项目概述

这是一个严格按照抖音小程序开发规范制作的食谱菜谱小工具，使用Unicode emoji作为图标，无需外部图片资源。项目包含完整的菜谱数据管理和用户交互功能。

## 核心功能

### 1. 首页功能

- 滑屏加载数据，支持无限滚动

- 菜谱分类导航（家常菜、川菜、粤菜、甜品、汤类、素食等）

- 搜索入口

- 自定义底部导航栏

### 2. 搜索功能

- 支持关键词搜索（标题、描述、分类、食材）

- 部分匹配搜索算法

- 热门搜索推荐

- 搜索历史记录

- 分类筛选功能

### 3. 菜谱详情功能

- 详细食材清单

- 制作步骤说明

- 烹饪贴士

- 收藏功能

### 4. 收藏功能

- 菜谱收藏管理

- 收藏列表展示

- 取消收藏功能

## 技术特点

### 开发规范

- 严格遵循抖音小程序开发规范

- 使用MVVM架构模式

- 逻辑与UI分离

- 组件化开发思想

- 状态驱动视图更新

### UI设计

- 使用Unicode emoji作为图标（无需外部图片资源）

- 响应式设计，适配不同屏幕尺寸

- 自定义底部导航栏替代原生导航

### 数据管理

- 300+条真实菜谱数据

- 完整的数据管理工具集

- 支持批量添加菜谱

- 支持单个菜谱添加

- 支持文本文件导入

## 项目结构

```

.

├── app.js                  # 小程序入口文件

├── app.json                # 小程序全局配置

├── app.ttss                # 小程序全局样式

├── project.config.json     # 项目配置文件

├── recipes.js              # 菜谱数据文件（300+条数据）

├── README.md               # 项目说明文档

├── USAGE.md                # 使用说明文档

├── pages                   # 页面目录

│   ├── index               # 首页

│   ├── search              # 搜索页

│   ├── recipeDetail        # 菜谱详情页

│   └── favorites           # 收藏页

└── tools                   # 数据管理工具

├── README.md           # 工具使用说明

├── addRecipe.bat       # Windows批处理脚本

├── addRecipe.js        # 命令行添加菜谱工具

├── batchAddRecipes.js  # 批量添加菜谱工具

├── batchRecipes.txt    # 批量菜谱示例文件

├── dataManager.js      # 核心数据管理类

└── textToRecipe.js     # 文本转菜谱工具

```

## 数据管理工具

### 工具功能

1. **交互式添加菜谱** - 通过命令行交互方式添加

2. **文本文件导入** - 支持从文本文件批量导入菜谱

3. **快速添加菜谱** - 通过命令行参数快速添加

4. **数据显示** - 显示菜谱总数等信息

### 使用方式

```bash

# 交互式添加菜谱

node addRecipe.js

# 批量添加菜谱（一个文件多个菜谱）

node batchAddRecipes.js batchRecipes.txt

# 单个菜谱添加

node textToRecipe.js recipe.txt

# 快速添加菜谱

node addRecipe.js --title "菜谱名称"

# 显示菜谱总数

node addRecipe.js --count

```

### 文件格式

支持单个和批量菜谱文件格式，菜谱之间用空行分隔。

## Emoji图标使用

项目中使用了多种Unicode emoji作为图标：

- ? 首页

- ? 搜索

- ❤️ 收藏

- ⏱️ 制作时间

- ? 难度等级

- ?️ 份量

- ? 小贴士

## 项目优势

1. **完全符合抖音小程序规范** - 严格按照平台要求开发

2. **无外部依赖** - 使用emoji图标，减少包体积

3. **数据丰富** - 包含300多条真实菜谱数据

4. **易于扩展** - 完整的数据管理工具，便于添加新菜谱

5. **用户体验优秀** - 滑屏加载、搜索优化、自定义导航

6. **维护方便** - 清晰的项目结构和完整的文档

## 使用场景

1. 用户浏览和搜索菜谱

2. 学习制作各种菜系的菜品

3. 收藏喜欢的菜谱

4. 管理员通过工具添加新菜谱

5. 批量导入菜谱数据

这个项目为用户提供了一个完整的菜谱浏览和管理解决方案，同时为管理员提供了便捷的数据管理工具，是一个功能完善、易于维护的抖音小程序应用。

以下是对整个小程序项目的详细总结，特别包含了接口（聚合数据api）信息：

### 项目概述

该项目是一个食谱查询小程序，采用单页面应用（SPA）结构，主要通过HTML、CSS和JavaScript构建。项目位于`c:\Users\89604\Downloads\新建文件夹 (3)`目录下，包含前端界面和后端代理服务。

### 核心功能

- **食谱搜索**：用户可以通过搜索框输入关键词查询食谱，支持热门搜索标签

- **分类浏览**：提供多种食谱分类（如家常菜、川菜、粤菜等），支持按分类浏览

- **食材查询**：可以根据特定食材查找相关食谱

- **分页功能**：搜索结果支持分页展示，每页显示30条记录

- **详情查看**：点击食谱卡片可查看详细信息，包括食材、步骤和小贴士

### API接口详情

项目通过Node.js代理服务器（server.js）调用外部食谱API，主要接口包括：

#### 1. 食谱搜索接口

```

GET http://localhost:3000/api/search?keyword={关键词}&num=30&page={页码}

```

- **功能**：根据关键词搜索食谱

- **参数**：

- `keyword`：搜索关键词（如菜品名称、食材等）

- `num`：每页显示的记录数（固定为30）

- `page`：当前页码

- **返回**：食谱列表数据，包含食谱ID、名称、图片、描述等信息

#### 2. 食谱详情接口

```

GET http://localhost:3000/api/detail?id={食谱ID}

```

- **功能**：获取指定食谱的详细信息

- **参数**：

- `id`：食谱唯一标识符

- **返回**：食谱的详细信息，包括食材清单、烹饪步骤、小贴士等

#### 3. 分类-食材映射接口

项目内部实现了分类到食材的映射逻辑，主要包括：

```javascript

const categoryToIngredient = {

'家常菜': '猪肉',

'川菜': '辣椒',

'粤菜': '海鲜',

'甜点': '鸡蛋',

'素食': '蔬菜',

'汤羹': '鸡肉',

'水果类': '苹果',

'蔬菜类': '胡萝卜'

};

```

- **功能**：将用户点击的分类转换为对应的食材关键词进行搜索

- **使用方式**：点击分类按钮时，根据映射关系获取对应食材关键词，然后调用搜索接口

### 代理服务实现

项目使用Node.js创建了代理服务器（server.js），主要功能包括：

1. 转发前端API请求到实际的食谱API服务

2. 解决跨域问题

3. 处理请求和响应数据

### 主要修改内容

1. **页面结构优化**：

- 移除了传统网页的顶部导航栏和页脚

- 添加了固定的底部导航栏，符合移动APP设计风格

- 配置了禁止缩放的视口设置，提升移动设备体验

2. **UI风格调整**：

- 将搜索区域改为圆角输入框和标签式热门搜索

- 重构分类区域为4列网格布局，并增加了水果类、蔬菜类分类

- 调整菜谱展示区域为垂直列表布局

- 优化模态框尺寸和样式，适配移动端

3. **交互体验优化**：

- 实现了底部导航栏的点击事件处理和活跃状态切换

- 添加了触摸反馈和自动滚动功能

- 将底部导航栏中的'我的'按钮修改为'返回'按钮，图标从用户图标变为向上箭头，点击后返回页面顶部

4. **功能完整性**：

- 保持了原有所有功能的完整性

- 扩展了分类映射表，增加了更多食材对应关系

- 设置为每页显示30条搜索结果，提升浏览效率

### 技术实现

- **前端**：HTML、CSS（Tailwind CSS）、JavaScript

- **图标**：Font Awesome图标库

- **后端代理**：Node.js（server.js）

- **静态服务**：http-server

### 当前运行状态

- 代理服务器（node server.js）正在terminal 3运行，端口3000

- 静态文件服务器（npx http-server -p 8080）正在terminal 4运行，可通过http://localhost:8080访问

- 所有功能正常运行，界面已完全适配移动APP风格

### 测试文件

项目中包含几个API测试文件：

- `test-category-api.js`：用于测试分类API功能

- `test-ingredient-api.js`：用于测试食材API功能

- `test-proxy.js`：用于测试代理服务功能

总体而言，该小程序已成功从传统网页风格转型为现代化的移动APP风格，通过代理服务器实现了与食谱API的无缝对接，提供了丰富的食谱查询功能和流畅的用户体验。