美食小程序

美食小程序项目简介这是一个完整的美食菜谱分享平台包含微信小程序端和PC管理后台。系统实现了美食菜谱展示、分类浏览、收藏、评论、资讯阅读等核心功能用户可以浏览学习各类美食做法也可以发布自己的菜谱。采用前后端分离架构适合作为微信小程序全栈开发学习项目或计算机设计参考。技术栈后端技术技术版本/说明运行环境Node.jsWeb框架Express 4.16.1数据库MySQL 5.7数据库驱动mysql 2.18.1身份认证jsonwebtoken 9.0.2文件上传multer跨域处理cors 2.8.5HTTP请求axios 1.6.3热重载nodemon 3.0.2管理后台技术技术版本/说明前端框架Vue 2.6.11UI组件库Element UI 2.15.6路由管理Vue Router 3.2.0状态管理Vuex 3.4.0HTTP请求Axios 0.24.0图表库ECharts 5.3.1CSS预处理器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)字段类型说明idint用户ID主键自增phonevarchar(255)手机号passwordvarchar(255)密码usernamevarchar(255)用户名sexvarchar(255)性别nicknamevarchar(255)昵称activevarchar(255)状态openIdvarchar(1100)微信OpenIDavatarvarchar(255)头像roleint角色 (0普通用户, 99管理员)美食表 (food)字段类型说明idint美食ID主键自增titlevarchar(255)菜谱名称cate_idint分类IDmaterialvarchar(255)食材moneyvarchar(255)预算费用waysvarchar(255)烹饪方式imgvarchar(255)菜谱图片create_timevarchar(255)创建时间stepvarchar(255)制作步骤user_idint发布用户ID分类表 (cate)字段类型说明idint分类ID主键自增titlevarchar(255)分类名称covervarchar(255)分类图标收藏表 (star)字段类型说明idint收藏ID主键自增user_idint用户IDfood_idint美食ID评论表 (comment)字段类型说明idint评论ID主键自增user_idint用户IDfood_idint美食IDcontentlongtext评论内容create_timetimestamp创建时间资讯表 (news)字段类型说明idint资讯ID主键自增titlevarchar(255)资讯标题postervarchar(255)封面图contentlongtext资讯内容create_timetimestamp创建时间美食分类分类名称说明炒菜各类炒制菜品午餐午餐类菜品汤羹各类汤品早餐早餐类食品甜点甜品点心其他其他类别运行环境要求后端环境Node.js 14.0MySQL 5.7 / 8.0npm 或 yarn管理后台Node.js 14.0npm 或 yarn现代浏览器Chrome、Firefox、Edge等小程序端微信开发者工具最新稳定版基础库版本 2.19.0需要有效的AppID快速开始1. 数据库配置创建MySQL数据库CREATEDATABASEmeishiCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;导入数据库文件mysql-uroot-pmeishi归档/meishi.sql修改数据库配置编辑归档/express/config/db.js修改数据库连接信息{database:meishi,port:3306,host:localhost,user:root,password:你的密码}2. 启动后端服务# 进入后端目录cd归档/express# 安装依赖npminstall# 启动服务开发模式npmrun dev后端服务默认运行在http://localhost:50013. 启动管理后台# 进入管理后台目录cd归档/admin# 安装依赖npminstall# 启动开发服务器npmrun dev管理后台默认运行在http://localhost:80804. 运行小程序打开微信开发者工具选择导入项目选择归档/meishi目录填入AppID可使用测试号点击导入5. 配置小程序API地址编辑归档/meishi/utils/request.js修改API基础地址constbaseUrlhttp://localhost:5001;// 修改为你的后端地址默认账号管理后台手机号187150230xx密码123456小程序端支持微信授权登录或使用手机号登录界面预览项目包含演示视频文件美食小程序.mp4- 小程序端完整功能演示美食admin.mp4- 管理后台完整功能演示扩展建议如需进一步完善项目可考虑以下扩展视频教程添加菜谱视频教学功能营养分析提供菜品营养成分分析智能推荐基于用户偏好推荐菜谱食材购买集成食材购买功能社交功能用户关注和互动打卡功能每日做菜打卡菜谱合集支持创建菜谱合集语音助手语音播报制作步骤注意事项本项目为学习演示项目部分数据为模拟数据生产环境部署需要配置HTTPS小程序上线需要完成微信认证建议定期备份数据库数据常见问题Q: 数据库连接失败A: 检查MySQL服务是否启动数据库配置是否正确Q: 图片无法显示A: 检查后端服务是否启动图片路径配置是否正确Q: 小程序无法请求后端A: 检查request.js中的baseUrl配置开发时需在微信开发者工具中关闭不校验合法域名Q: 管理后台登录失败A: 确认数据库中users表有管理员账号role99许可证本项目仅供学习交流使用请勿用于商业用途。