基于 Spring Boot + Vue3 的地方美食推荐系统：协同过滤、商城业务与可视化后台实现

系统源码：https://pan.quark.cn/s/0f61fc4556d3

前言

本文介绍一套基于 Spring Boot、Vue3 和 MySQL 实现的地方美食推荐系统。项目并非只有美食信息展示，而是将内容推荐、商品浏览、购物车、订单、评论、论坛、客服和后台运营整合到了一套完整的前后端分离系统中。

系统由用户端、管理端和后端服务三部分组成。用户端采用橙黄色美食主题，负责美食浏览与交易；管理端负责商品、订单、用户及内容运营；后端统一提供 RESTful 接口，并根据用户历史订单实现基于用户的协同过滤推荐。

本文将从系统架构、功能设计、推荐逻辑、数据库设计、页面效果和运行部署几个方面进行介绍。

一、项目概述

1.1 项目定位

地方美食推荐系统面向地方菜系展示和美食电商场景，收录川菜、粤菜、鲁菜、苏菜、浙菜、湘菜、闽菜、徽菜、地方小吃和甜品饮品等分类。

用户可以完成以下操作：

• 注册登录和维护个人资料；
• 浏览首页推荐内容；
• 按名称、分类等条件查找美食；
• 查看价格、库存、口味、规格和详情；
• 收藏、点赞、评论美食；
• 加入购物车并提交订单；
• 管理收货地址和个人订单；
• 阅读美食资讯；
• 发布论坛内容并参与回复；
• 通过客服模块进行交流。

管理员可以通过独立后台完成商品、分类、用户、订单、资讯、论坛、轮播图、友情链接、日志和客服信息管理，并通过数据看板查看分类、销量和销售额统计结果。

1.2 技术选型

层次	主要技术
用户端	Vue 3、Vue Router、Vuex、Element Plus、Axios、wangEditor
管理端	Vue 3、Element Plus、Axios、ECharts
后端	Spring Boot 2.2.2、Spring MVC、MyBatis-Plus
权限与会话	Token、Apache Shiro
数据库	MySQL 8.0
构建工具	Maven、Node.js、Vue CLI
其他组件	Hutool、Fastjson、Swiper

后端 Maven 编译目标为 Java 8，使用 JDK 8 或 JDK 11 均可运行。项目本地调试环境采用 JDK 11。

1.3 项目目录

FoodRecommendation/
├── server_code/       Spring Boot 后端
├── client_code/       Vue3 用户端
├── manage_code/       Vue3 管理端
├── 截图/              系统运行截图
└── 运行说明书.md       启动与部署说明

二、系统总体架构

系统采用典型的前后端分离模式：

浏览器
  ├── 用户端 Vue3（8082）
  └── 管理端 Vue3（8081）
            │
            │ Axios / JSON
            ▼
     Spring Boot API（8080）
            │
     MyBatis-Plus
            │
            ▼
         MySQL 8.0

用户端与管理端分别维护路由和页面组件，通过 Axios 调用统一后端接口。Spring Boot Controller 负责接收参数和组织业务流程，Service 与 DAO 层完成数据访问，MyBatis-Plus 提供分页、条件查询和通用增删改查能力。

这种结构的优点是两个前端可以独立开发和部署，后台接口也可以继续提供给移动端或其他客户端使用。

三、用户端功能展示

3.1 用户登录与注册

用户端提供账号登录和注册入口。登录成功后，服务端创建会话并返回 Token，前端在后续请求中携带身份信息，用于访问个人中心、收藏、购物车、订单和推荐接口。

3.2 首页推荐与内容聚合

首页是系统的内容入口，包含轮播图、美食商城推荐、美食资讯和友情链接等区域。美食卡片展示名称、分类、价格和互动数据，用户可以继续进入商城或详情页。

首页将交易内容和资讯内容放在同一页面，既能展示商品，也能通过文章和社区内容增加用户停留时间。

3.3 美食商城与分类筛选

商城页面支持美食名称搜索和分类筛选，列表以卡片形式展示图片、名称、分类、价格等信息。

分类页面集中展示系统维护的地方菜系，后台修改分类后，用户端可以同步读取最新数据。

3.4 美食详情、收藏与评论

详情页展示美食名称、价格、库存、所属分类、口味、规格、图片及富文本介绍。用户可以选择数量，加入购物车或直接购买，也可以点赞、收藏并发表评论。

评论区使用 wangEditor 富文本编辑器。评论数据与商品关联，提交后在详情页分页显示；管理员也可以在后台查看和维护相关内容。

3.5 购物车与订单链路

购物车支持数量调整、商品删除、详情查看和勾选结算。前端根据商品单价和购买数量计算小计及订单总额。

提交订单前，用户需要选择收货地址。系统支持维护联系人、手机号、详细地址和默认地址。

订单创建后，可以在订单中心查看订单编号、商品、金额、收货信息和状态，并根据当前状态执行对应操作。

完整业务链路可以概括为：

浏览美食
  → 查看详情
  → 加入购物车或立即购买
  → 选择收货地址
  → 创建订单
  → 扣减余额与库存
  → 更新订单状态
  → 完成后发表评论

3.6 资讯、论坛与收藏

美食资讯模块用于发布烹饪技巧、地域饮食文化和平台动态。

论坛模块支持发布主题、一级评论、二级回复和内容删除，补充了用户之间的交流场景。

收藏中心集中保存用户感兴趣的美食，便于后续再次浏览。

四、推荐模块设计

系统包含两种推荐方式。

4.1 热度排序

公共推荐接口按照 clicktime 降序查询，将近期浏览或互动较活跃的美食优先展示。这种方式不依赖登录状态，适合作为新用户或数据不足时的兜底策略。

核心思路如下：

params.put("sort", "clicktime");
params.put("order", "desc");
PageUtils page = meishishangchengService.queryPage(params, wrapper);

4.2 基于用户的协同过滤

个性化接口 autoSort2 使用订单表中的 userid 和 goodid 构建用户—商品行为矩阵，再计算用户间相似度。

核心调用如下：

List<OrdersEntity> orders = ordersService.selectList(
    new EntityWrapper<OrdersEntity>()
);

UserBasedCollaborativeFiltering filter =
    new UserBasedCollaborativeFiltering();

List<String> recommendations = filter.recommendItems(
    orders,
    "userid",
    "goodid",
    userId,
    limit
);

整体过程分为四步：

1. 从订单记录中提取用户与商品的交互关系；
2. 构建稀疏用户—商品矩阵；
3. 计算目标用户与其他用户之间的相似度；
4. 从相似用户购买过、而目标用户尚未购买的商品中生成候选结果。

推荐结果按照计算后的商品 ID 顺序查询。如果推荐数量不足，接口会按照商品 ID 倒序补充其他商品，保证页面始终能够获得足够的数据。这解决了新用户、订单数据较少以及推荐结果不足时的冷启动问题。

需要说明的是，当前交互权重主要来自订单行为。如果继续扩展，可以把浏览、收藏、点赞和评论设置成不同权重，形成更细致的用户偏好模型。

五、管理端功能展示

5.1 数据看板

管理端首页通过 ECharts 展示美食总数、订单总数、美食分类占比、日销量、月销量、日销售额、月销售额和单品销量。

前端请求后端分组统计接口，再将结果转换为 ECharts 所需的横坐标、纵坐标和系列数据。例如日销量统计调用：

GET /orders/value/addtime/buynumber/日

单品销量统计调用：

GET /orders/value/goodname/buynumber?order=desc

统计逻辑由后端完成，前端只负责图表配置和交互展示，职责划分比较清晰。

5.2 美食与分类管理

美食管理采用卡片式列表，可以按照名称和分类查询，并提供详情、修改、删除和评论查看功能。

详情弹窗集中展示美食分类、图片、口味、规格、推荐指数、库存、价格和富文本详情等字段。

分类管理负责维护川菜、粤菜、鲁菜等分类数据。

5.3 用户与订单管理

管理员可以分页查看用户资料，并根据权限执行新增、修改、删除等操作。

订单管理覆盖订单查询、状态维护、导出和多维统计，是管理端与商城业务联系最紧密的模块。

5.4 内容、日志与客服管理

后台还包括美食资讯、轮播图、论坛、友情链接、系统日志和客服聊天等模块。系统日志通过注解记录关键管理操作，方便后续排查和审计。

六、数据库设计

项目数据库共包含 20 张表。

表名	作用
yonghu	前台用户
users	后台管理员
token	登录令牌
meishishangcheng	美食商品
meishifenlei	美食分类
cart	购物车
address	收货地址
orders	订单
storeup	收藏、点赞等互动数据
discussmeishishangcheng	美食评论
forum	论坛主题及回复
discussforum	论坛评论
news	美食资讯
config	轮播图配置
friendship_link	友情链接
chat	客服会话
chat_friend	聊天联系人
chat_message	聊天消息
syslog	系统操作日志
menu	菜单及权限配置

其中 orders、meishishangcheng、yonghu、address 和 cart 构成商城主链路；forum、news 和评论表构成内容社区；chat 相关表负责客服通信；syslog、menu 和 users 服务于后台管理。

七、后端接口组织

后端以业务模块划分 Controller，例如：

• /yonghu：用户注册、登录、会话及资料管理；
• /meishishangcheng：美食分页、详情、推荐、统计及维护；
• /orders：订单增删改查和聚合统计；
• /cart：购物车管理；
• /address：收货地址管理；
• /forum：论坛主题和回复；
• /news：资讯管理；
• /chat：客服会话；
• /syslog：系统日志。

通用查询通过 MyBatis-Plus 的 EntityWrapper 构造条件，列表接口统一返回分页对象。前端可传入 page、limit、sort 和 order 等参数完成分页与排序。

八、项目运行

8.1 环境准备

建议安装以下环境：

• JDK 8 或 JDK 11；
• Maven 3.6 及以上；
• Node.js 16 及以上；
• MySQL 8.0。

8.2 初始化数据库

创建数据库：

CREATE DATABASE cl91859876
DEFAULT CHARACTER SET utf8mb4
COLLATE utf8mb4_general_ci;

然后导入：

server_code/sql/cl91859876.sql

再修改 server_code/src/main/resources/application.yml 中的数据库账号和密码。

8.3 启动后端

cd server_code
mvn spring-boot:run

后端默认访问地址：

http://localhost:8080/cl91859876

8.4 启动管理端

cd manage_code
npm install
npm run serve

管理端默认端口为 8081。

8.5 启动用户端

cd client_code
npm install
npm run serve

用户端默认端口为 8082。

推荐启动顺序为：

MySQL → Spring Boot 后端 → 管理端或用户端

九、项目特点与可扩展方向

这套系统的特点主要有：

1. 用户端、管理端和服务端拆分清晰；
2. 商城业务链路相对完整；
3. 同时包含资讯、论坛、客服等内容运营功能；
4. 推荐模块既有热度排序，也有用户协同过滤；
5. 后台提供多维度 ECharts 数据统计；
6. 数据库结构完整，并包含测试数据；
7. 配有运行说明和页面截图，方便部署与维护。

后续可以继续扩展：

• 将浏览、收藏、点赞、评论加入推荐权重；
• 引入 Redis 缓存首页和热门商品；
• 使用 WebSocket 改造客服实时通信；
• 接入真实支付和物流接口；
• 增加商品规格、优惠券和库存流水；
• 使用 JWT 或新版 Shiro/Spring Security 完善认证；
• 增加 Docker Compose，实现一键部署；
• 为订单创建和库存扣减增加更严格的事务控制；
• 对富文本内容增加服务端安全过滤；
• 对管理端路由和按钮权限做更细粒度控制。

十、总结

本文介绍了一个基于 Spring Boot、Vue3 和 MySQL 的地方美食推荐系统。项目将美食内容展示、协同过滤推荐、购物交易、社区互动和后台运营结合起来，既包含用户侧的完整体验，也包含管理员侧的数据维护与可视化分析。

从技术实现角度看，项目覆盖了前后端分离开发中的常见知识点：Token 会话、分页查询、文件上传、富文本编辑、商城订单、关联数据、协同过滤、聚合统计和 ECharts 图表。后续还可以围绕推荐权重、缓存、实时通信、事务和容器化部署继续迭代。

如果你正在开发类似的美食、电商或内容推荐平台，希望本文中的模块拆分和实现思路能够提供帮助。