【万字文档+源码】基于SpringBoot+Vue 美食乐享系统-可用于毕设-课程设计-练手学习-学习资料分享

一、项目概述

1.1 项目背景

延安本地特色美食种类丰富，但缺少线上展示、分享、交流一体化平台，游客与本地居民难以线上查阅美食介绍、烹饪教程，用户咨询无统一客服渠道，美食资源无法系统化管理。为推广延安特色饮食文化，搭建前后端分离的美食乐享系统，面向普通用户提供美食浏览、分类检索、收藏、评论、客服咨询功能；管理员后台统一管理轮播图、用户、美食分类、本地特色美食、美食烹饪教程、客服聊天记录，实现延安美食线上数字化展示与运营管理。

1.2 开发技术栈

后端（SpringBoot）

1. 核心框架：SpringBoot 2.7.x，快速开发 RESTful 接口

2. 持久层：MyBatis-Plus，实现分页、多条件模糊检索、单表 CRUD

3. 数据库：MySQL8.0，存储用户、美食分类、本地特色、烹饪教程、收藏、评论、客服聊天、轮播图数据

4. 身份鉴权：JWT Token 区分普通用户、管理员角色，拦截未登录 / 越权访问

5. 文件处理：本地文件存储，支持美食图片、轮播图、烹饪视频上传预览

6. 工具类：Hutool 做表单校验、分页封装、日期处理

7. 业务模块：收藏逻辑、评论管理、客服消息回复、富文本内容存储

前端（Vue3 + Element Plus）

1. 核心框架：Vue3 + VueRouter + Pinia 状态管理

2. UI 组件：Element Plus（管理后台）、轻量化粉色简约前台页面

3. 网络请求：Axios 全局拦截，自动携带 Token、统一捕获异常

4. 页面组件：首页轮播、美食卡片列表、富文本编辑器、图片多图上传、视频预览、分页控件、消息列表

5. 交互功能：美食收藏 / 取消收藏、评论发布、客服对话、多条件筛选检索

1.3 系统角色划分

系统分为两类角色，权限完全隔离：

1. 普通前台用户：注册登录、首页浏览推荐美食、分类检索美食、查看本地特色美食详情、美食收藏、发布美食评论、客服在线咨询、个人中心查看我的收藏。

2. 系统管理员：后台全权限管理，轮播图、系统用户、客服聊天、美食类型、本地特色、美食烹饪、美食信息七大模块维护，支持新增、详情、修改、删除、消息回复操作。

1.4 整体业务流程

用户注册登录 → 首页浏览美食轮播与推荐卡片 → 通过分类 / 名称检索美食 → 查看美食详情、收藏、发布评论；有疑问可进入客服聊天提交咨询；管理员登录后台，维护全部美食数据、回复用户客服消息、管理平台用户与首页轮播素材。

二、系统功能模块详细设计

2.1 登录注册模块

2.1.1 系统登录页面

页面粉色甜品简约背景，表单包含账号、密码输入框，支持记住密码；提供登录按钮与注册用户跳转入口；登录成功根据角色跳转前台首页 / 管理员后台，Token 失效强制返回登录页。

2.2 前台用户功能模块

顶部导航栏：首页、本地特色、美食信息、美食烹饪、客服聊天管理、个人中心

2.2.1 系统首页

1. 顶部全屏美食轮播图，展示主推美食海报

2. 美食信息推荐区域：圆形美食卡片展示菜品图片、名称分类，分页浏览全部美食资源

2.2.2 本地特色模块

展示延安特色菜品，点击进入详情页：

• 左侧美食文字介绍、多图轮播展示菜品实拍图

• 底部美食详情富文本介绍，支持跳转美食详情、评论页面

2.2.3 美食信息列表页面

1. 顶部搜索框：输入美食名称模糊检索

2. 分类标签栏：全部、轻食、各类自定义美食类型快速筛选

3. 圆形美食卡片布局：菜品图片、美食名称、所属分类，点击卡片进入详情页

2.2.4 美食详情页面

1. 基础信息展示：美食名称、分类、图文介绍、点击量、收藏数量、发布用户信息、多图轮播预览

2. 操作按钮：收藏 / 取消收藏、转发、切换评论标签

3. 评论区：用户可输入内容发布美食评价，分页加载全部评论

2.2.5 个人中心 - 我的收藏

1. 收藏美食检索框，按美食名称搜索已收藏菜品

2. 收藏美食卡片列表，分页展示用户收藏的全部美食，点击可跳转详情页

2.2.6 辅助前台功能

1. 美食烹饪：查看各类菜品食材、图文 + 视频烹饪教程

2. 客服聊天管理：用户提交美食相关咨询消息，等待管理员后台回复

3. 评论模块：美食详情内发布、浏览用户真实评价

2.3 管理员后台功能模块

左侧绿色侧边导航栏：首页、轮播图管理、系统用户、客服聊天管理、美食类型管理、本地特色管理、美食烹饪管理、美食信息管理

2.3.1 首页控制台

后台欢迎首页，展示系统名称，作为各功能模块跳转入口。

2.3.2 轮播图管理

维护前台首页顶部轮播素材，支持上传图片、新增、修改、删除轮播图，配置展示顺序。

2.3.3 系统用户管理

分管理员、普通用户子菜单，查看全部注册账号，支持新增账号、重置密码、禁用用户。

2.3.4 客服聊天管理

1. 列表字段：用户消息、提问内容、回复状态（未回复 / 已回复）

2. 核心操作：对用户咨询消息进行回复，标记消息状态，分页查看全部聊天记录

2.3.5 美食类型管理

维护美食分类字典（轻食、家常菜、特色菜等），新增 / 编辑 / 删除分类标签，用于前台筛选。

2.3.6 本地特色管理

1. 列表页：按美食名称检索，支持新增、详情、修改、删除本地特色菜品

2. 新增 / 修改弹窗：必填美食名称、多图上传、简短美食介绍、富文本长篇美食详情，编辑器支持图文排版

2.3.7 美食烹饪管理

1. 美食名称搜索框筛选菜品

2. 列表字段：序号、美食名称、所属类型、美食图片、食材、烹饪视频预览

3. 操作按钮：新增、详情、修改、删除，支持上传烹饪教学视频

2.3.8 美食信息管理

统一管理平台全部美食基础信息，维护菜品图文、分类、收藏、点击数据，管控前台展示美食资源。

三、数据库核心表设计

3.1 user 用户表

3.2 food_type 美食分类表

id、type_name（分类名称：轻食、本地特色等）、sort 排序字段。

3.3 banner 轮播图表

id、img_url 轮播图片、title 标题、sort 排序、is_show 是否启用。

3.4 local_food 本地特色美食表

id、food_name 美食名称、img_list 多图地址、short_intro 简短介绍、detail 富文本详情、create_time 创建时间。

3.5 food_info 美食信息表

3.6 food_cook 美食烹饪教程表

id、food_name、type_id、food_img 食材图、material 食材清单、video_url 烹饪视频地址。

3.7 collect 收藏表

user_id 用户 id、food_id 美食 id、create_time 收藏时间，联合唯一防止重复收藏。

3.8 food_comment 美食评论表

user_id、food_id、comment_content 评论内容、create_time 评论时间。

3.9 chat_msg 客服聊天表

user_id 用户 id、msg_content 用户提问、reply_content 管理员回复、status 状态 0 未回复 1 已回复、create_time 消息时间。

四、核心业务流程

4.1 用户登录鉴权流程

1. 用户输入账号密码提交登录接口，后端校验账号密码与角色权限

2. 校验通过返回 JWT Token，前端本地存储

3. 所有前台、后台接口请求头携带 Token，后端拦截器校验有效性

4. Token 过期、无访问权限自动跳转登录页面

4.2 用户美食浏览 & 收藏流程

1. 用户登录前台首页，浏览推荐美食，通过分类 / 名称检索目标菜品

2. 进入美食详情查看图文介绍，点击收藏按钮生成收藏记录，个人中心统一查看收藏列表

3. 在评论区输入内容发布评价，所有用户可见评论内容

4. 有美食相关疑问，进入客服聊天模块提交咨询消息，等待管理员后台回复

4.3 管理员后台运营流程

1. 管理员登录后台，维护轮播图、美食分类基础字典数据

2. 新增 / 编辑本地特色美食、烹饪教程、美食信息，上传菜品图片、教学视频

3. 进入客服聊天管理，查看用户未回复咨询，编辑回复内容完成答疑

4. 管理系统全部用户账号，对违规美食、评论内容执行删除操作

五、项目部署说明

5.1 SpringBoot 后端部署

1. MySQL 执行项目 SQL 脚本，创建数据库与全部业务数据表

2. 修改application.yml配置文件：数据库地址、账号密码、文件上传存储路径、JWT 密钥、服务端口

3. Maven 打包命令：mvn clean package -DskipTests生成 jar 包

4. Windows/Linux 服务器启动：java -jar food-system.jar --port=8082

5.2 Vue 前端部署

1. 前端目录执行npm install安装依赖

2. 生产打包：npm run build生成 dist 静态资源文件夹

3. Nginx 配置托管 dist，反向代理后端 8082 接口地址

4. 访问 Nginx 端口进入前台美食系统，后台独立路径访问管理端

六、系统特色与创新点

1. 延安本地美食垂直定位：聚焦陕北延安特色饮食，区分通用美食与本地特色专区，助力地方美食文化宣传

2. 完整美食内容生态：美食图文介绍 + 烹饪视频教程 + 用户评论互动 + 客服咨询全链路内容体系

3. 轻量化美观前台 UI：粉色柔和美食风格页面，轮播、圆形卡片提升用户浏览体验

4. 多维度检索筛选：支持美食名称模糊搜索 + 分类标签快速过滤，快速定位目标菜品

5. 收藏个人资源库：个人中心统一管理收藏美食，打造用户专属美食清单

6. 客服线上问答闭环：用户在线提问，管理员后台统一回复，解决美食相关咨询需求

7. 富文本 + 多媒体素材管理：后台支持多图上传、视频预览、富文本图文排版，丰富美食展示内容

七、项目总结

本基于 SpringBoot+Vue 的圣地延安美食乐享系统针对地方美食展示需求设计，搭建面向游客、本地居民的美食分享平台，同时配套完整管理员后台实现内容、用户、客服消息一体化管控。系统前后端分离架构分层清晰，业务流程完整，既可以作为计算机毕业设计项目，也可直接迭代上线为地方文旅美食展示平台，可扩展美食下单、线下探店打卡、美食推荐算法等拓展功能，具备良好的二次开发空间。