美食小程序

美食小程序

项目简介

这是一个完整的美食菜谱分享平台，包含微信小程序端和PC管理后台。系统实现了美食菜谱展示、分类浏览、收藏、评论、资讯阅读等核心功能，用户可以浏览学习各类美食做法，也可以发布自己的菜谱。采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql 2.18.1
身份认证	jsonwebtoken 9.0.2
文件上传	multer
跨域处理	cors 2.8.5
HTTP请求	axios 1.6.3
热重载	nodemon 3.0.2

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.6
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.24.0
图表库	ECharts 5.3.1
CSS预处理器	Less 3.0.4
粒子效果	vue-particles 1.0.9

小程序端技术

技术	版本/说明
开发框架	微信小程序原生框架
开发语言	JavaScript (ES6+)
样式语言	WXSS
模板语言	WXML

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 菜谱分享平台：用户可浏览和发布美食菜谱
• 详细做法步骤：包含食材、做法、步骤等完整信息
• 分类浏览：支持按菜品类型分类浏览
• 收藏功能：用户可收藏喜欢的菜谱
• 评论互动：支持用户评论交流
• 资讯模块：美食相关资讯文章阅读
• 数据可视化：管理后台集成ECharts图表展示

功能模块

小程序端功能

1. 首页模块 (pages/index)

• 轮播图展示
• 美食分类导航
• 热门菜谱推荐
• 最新菜谱展示
• 搜索功能入口

2. 分类模块 (pages/cate)

• 按分类浏览菜谱
• 分类列表展示
• 菜谱筛选

3. 菜谱详情模块 (pages/detail)

• 菜谱图片展示
• 菜谱基本信息（名称、食材、做法）
• 制作步骤详解
• 收藏功能
• 评论查看

4. 搜索模块 (pages/search)

• 关键词搜索
• 搜索结果展示
• 搜索历史

5. 发布菜谱模块 (pages/add)

• 填写菜谱名称
• 添加食材清单
• 编写制作步骤
• 上传菜谱图片

6. 我的发布模块 (pages/my_add)

• 我发布的菜谱列表
• 编辑/删除菜谱

7. 收藏模块 (pages/star)

• 我的收藏列表
• 取消收藏

8. 评论模块 (pages/comment)

• 发表评论
• 评论列表查看

9. 资讯模块

• 资讯列表 (pages/news)
• 资讯详情 (pages/news_detail)

10. 个人中心模块 (pages/my)

• 用户信息展示
• 我的发布
• 我的收藏
• 用户信息编辑 (pages/userInfo)

管理后台功能

1. 首页仪表盘 (Welcome.vue)

• 数据统计概览
• 图表展示

2. 分类管理 (Cate.vue)

• 分类列表
• 新增/编辑/删除分类
• 分类图标上传

3. 美食管理 (Food.vue)

• 菜谱信息列表
• 新增/编辑/删除菜谱
• 菜谱图片上传
• 食材和步骤编辑

4. 用户管理 (Users.vue)

• 用户列表
• 用户信息查看
• 用户状态管理

5. 收藏管理 (Collect.vue)

• 收藏记录列表
• 收藏统计

6. 评论管理 (Comment.vue)

• 评论列表
• 评论审核
• 评论删除

7. 资讯管理 (News.vue)

• 资讯列表
• 新增/编辑/删除资讯
• 资讯封面上传

项目结构

food_min_express_mysql_all/
├── 归档/                           # 项目文件
│   ├── admin/                      # 管理后台（Vue2 + Element UI）
│   │   ├── public/                 # 静态资源
│   │   ├── src/
│   │   │   ├── api/                # API接口封装
│   │   │   ├── assets/             # 静态资源
│   │   │   ├── components/         # 公共组件
│   │   │   ├── router/             # 路由配置
│   │   │   ├── store/              # Vuex状态管理
│   │   │   ├── utils/              # 工具函数
│   │   │   ├── views/              # 页面视图
│   │   │   │   ├── Cate.vue        # 分类管理
│   │   │   │   ├── Collect.vue     # 收藏管理
│   │   │   │   ├── Comment.vue     # 评论管理
│   │   │   │   ├── Food.vue        # 美食管理
│   │   │   │   ├── Home.vue        # 主布局
│   │   │   │   ├── Login.vue       # 登录页
│   │   │   │   ├── News.vue        # 资讯管理
│   │   │   │   ├── Users.vue       # 用户管理
│   │   │   │   └── Welcome.vue     # 首页仪表盘
│   │   │   ├── App.vue             # 根组件
│   │   │   └── main.js             # 入口文件
│   │   ├── package.json
│   │   └── vue.config.js           # Vue配置
│   │
│   ├── express/                    # 后端服务（Express + MySQL）
│   │   ├── bin/
│   │   │   └── www                 # 启动入口
│   │   ├── config/                 # 配置文件
│   │   ├── public/
│   │   │   └── images/             # 上传图片存储
│   │   ├── routes/
│   │   │   ├── admin/              # 管理端API
│   │   │   ├── web/                # 小程序端API
│   │   │   ├── index.js            # 路由入口
│   │   │   └── upload.js           # 文件上传
│   │   ├── app.js                  # Express应用配置
│   │   └── package.json
│   │
│   ├── meishi/                     # 微信小程序
│   │   ├── images/                 # 图片资源
│   │   │   └── tabbar/             # TabBar图标
│   │   ├── pages/                  # 页面目录
│   │   │   ├── index/              # 首页
│   │   │   ├── cate/               # 分类页
│   │   │   ├── detail/             # 详情页
│   │   │   ├── search/             # 搜索页
│   │   │   ├── add/                # 发布菜谱
│   │   │   ├── my_add/             # 我的发布
│   │   │   ├── star/               # 我的收藏
│   │   │   ├── comment/            # 评论页
│   │   │   ├── news/               # 资讯列表
│   │   │   ├── news_detail/        # 资讯详情
│   │   │   ├── my/                 # 个人中心
│   │   │   └── userInfo/           # 用户信息
│   │   ├── utils/
│   │   │   ├── api.js              # API接口封装
│   │   │   ├── request.js          # 请求封装
│   │   │   └── util.js             # 工具函数
│   │   ├── app.js                  # 小程序入口
│   │   ├── app.json                # 小程序配置
│   │   ├── app.wxss                # 全局样式
│   │   └── project.config.json     # 项目配置
│   │
│   ├── meishi.sql                  # 数据库SQL文件
│   └── 运行必读.md                  # 运行说明
│
├── 美食小程序.mp4                   # 小程序演示视频
└── 美食admin.mp4                   # 管理后台演示视频

数据模型

用户表 (users)

字段	类型	说明
id	int	用户ID，主键自增
phone	varchar(255)	手机号
password	varchar(255)	密码
username	varchar(255)	用户名
sex	varchar(255)	性别
nickname	varchar(255)	昵称
active	varchar(255)	状态
openId	varchar(1100)	微信OpenID
avatar	varchar(255)	头像
role	int	角色 (0普通用户, 99管理员)

美食表 (food)

字段	类型	说明
id	int	美食ID，主键自增
title	varchar(255)	菜谱名称
cate_id	int	分类ID
material	varchar(255)	食材
money	varchar(255)	预算费用
ways	varchar(255)	烹饪方式
img	varchar(255)	菜谱图片
create_time	varchar(255)	创建时间
step	varchar(255)	制作步骤
user_id	int	发布用户ID

分类表 (cate)

字段	类型	说明
id	int	分类ID，主键自增
title	varchar(255)	分类名称
cover	varchar(255)	分类图标

收藏表 (star)

字段	类型	说明
id	int	收藏ID，主键自增
user_id	int	用户ID
food_id	int	美食ID

评论表 (comment)

字段	类型	说明
id	int	评论ID，主键自增
user_id	int	用户ID
food_id	int	美食ID
content	longtext	评论内容
create_time	timestamp	创建时间

资讯表 (news)

字段	类型	说明
id	int	资讯ID，主键自增
title	varchar(255)	资讯标题
poster	varchar(255)	封面图
content	longtext	资讯内容
create_time	timestamp	创建时间

美食分类

分类名称	说明
炒菜	各类炒制菜品
午餐	午餐类菜品
汤羹	各类汤品
早餐	早餐类食品
甜点	甜品点心
其他	其他类别

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+ / 8.0+
• npm 或 yarn

管理后台

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

小程序端

• 微信开发者工具（最新稳定版）
• 基础库版本 2.19.0+
• 需要有效的AppID

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE meishi CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p meishi < 归档/meishi.sql

3. 修改数据库配置 编辑 归档/express/config/db.js，修改数据库连接信息：

{
  database: "meishi",
  port: "3306",
  host: "localhost",
  user: "root",
  password: "你的密码"
}

2. 启动后端服务

# 进入后端目录
cd 归档/express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5001

3. 启动管理后台

# 进入管理后台目录
cd 归档/admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择 归档/meishi 目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

编辑 归档/meishi/utils/request.js，修改API基础地址：

const baseUrl = 'http://localhost:5001'; // 修改为你的后端地址

默认账号

管理后台

• 手机号：187150230xx
• 密码：123456

小程序端

• 支持微信授权登录
• 或使用手机号登录

界面预览

项目包含演示视频文件：

• 美食小程序.mp4 - 小程序端完整功能演示
• 美食admin.mp4 - 管理后台完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 视频教程：添加菜谱视频教学功能
2. 营养分析：提供菜品营养成分分析
3. 智能推荐：基于用户偏好推荐菜谱
4. 食材购买：集成食材购买功能
5. 社交功能：用户关注和互动
6. 打卡功能：每日做菜打卡
7. 菜谱合集：支持创建菜谱合集
8. 语音助手：语音播报制作步骤

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证
4. 建议定期备份数据库数据

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

许可证

本项目仅供学习交流使用，请勿用于商业用途。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/food_min_express_mysql_all