当前位置：首页 > news >正文

【万字文档+源码】基于SpringBoot+Vue的水果蔬菜商城系统 -学习项目资料分享

news 2026/6/13 2:12:33

一、项目概述

1.1 项目背景

随着生鲜电商行业的快速发展，传统线下果蔬购买存在品类有限、价格不透明、购买不便等问题，消费者难以高效选购新鲜果蔬，商家也缺乏线上销售与运营的数字化工具。本项目基于 SpringBoot+Vue 前后端分离架构，打造集用户消费、商家入驻、商品管理、订单处理于一体的水果蔬菜商城系统，为消费者提供便捷的线上果蔬购买渠道，同时为商家提供高效的线上运营管理平台，推动果蔬零售行业的数字化升级。

1.2 项目目标

构建多角色协同的生鲜电商平台，支持普通用户、商家、管理员三类角色的业务流程。
实现果蔬商品的全生命周期管理，包括商品上架、分类管理、库存监控等。
打造完整的线上购物闭环，覆盖从商品浏览、下单到订单管理的全流程。
搭建用户交流论坛，支持用户互动与反馈，增强平台粘性。
提供完善的后台管控体系，实现对用户、商家、商品、订单的统一管理。

1.3 技术栈

角色	技术选型	用途说明
后端	Spring Boot 2.x	快速构建稳定的后端服务，提供 RESTful API 接口
后端	MyBatis-Plus	简化数据库 CRUD 操作，提升开发效率
后端	MySQL	存储用户、商家、果蔬商品、订单、论坛等核心业务数据
后端	Redis（可选）	实现会话缓存、购物车数据缓存，提升系统响应速度
前端	Vue 2.x/3.x	构建用户交互界面，实现前后端数据交互
前端	Element UI/Plus	提供成熟的 UI 组件库，快速搭建美观的用户端与管理后台
工具	Maven	项目依赖管理与构建
部署	Nginx	前端项目部署，反向代理与静态资源托管

二、系统功能模块设计

2.1 整体架构

系统采用前后端分离架构，分为用户端、商家端、管理员端三大角色，核心功能模块如下：

2.2 用户端功能模块

首页模块
- 轮播图展示热门果蔬商品与平台活动公告。
- 果蔬商品推荐，支持按品类、品牌快速浏览。
- 导航栏快速入口，直达商品信息、论坛交流、通知公告等核心页面。
用户注册与登录
- 用户账号注册，支持填写个人信息、上传头像。
- 多角色登录，支持用户、商家、管理员三种角色切换。
果蔬商品浏览与购买
- 商品信息查询：支持按商品名称、品牌、价格区间、品类多维度筛选，查看商品详情、图片、价格、库存信息。
- 商品收藏与加入购物车：用户可收藏心仪商品，将商品加入购物车管理。
- 下单购买：在线下单购买果蔬商品，生成订单记录。
订单管理
- 订单状态查询：支持查看已支付、未支付、已发货、已完成、已退款、已取消等状态的订单。
- 订单操作：支持取消订单、申请退款等功能。
交流论坛模块
- 帖子列表展示：查看用户发布的果蔬购买体验、推荐等内容。
- 发布帖子：用户可分享购物体验、提问求助，参与话题讨论。
个人中心
- 个人信息管理：修改账号信息、联系方式、头像。
- 我的订单管理：查看所有订单记录与状态。
- 我的收藏：管理收藏的果蔬商品。

2.3 商家端功能模块

商品管理
- 果蔬商品发布：新增商品信息，设置商品名称、品牌、规格、价格、库存、图片等。
- 商品维护：支持商品信息的修改、上架 / 下架、删除操作。
- 商品列表查询：支持按商品名称、品牌、品类筛选。
订单管理
- 订单列表查看：查看用户购买的果蔬订单信息。
- 订单状态处理：处理订单发货、退款审核等操作。
个人资料管理
- 修改商家账号信息、店铺简介、联系方式等。

2.4 管理员端功能模块

用户管理
- 查看、管理平台用户信息，支持用户账号的禁用 / 启用、信息编辑。
商家管理
- 审核商家入驻申请，管理商家账号状态。
- 查看商家信息，支持商家账号的禁用 / 启用、信息编辑。
商品管理
- 商品类别管理：维护果蔬商品分类信息，支持新增、修改、删除分类。
- 品牌管理：维护商品品牌信息，支持新增、修改、删除品牌。
- 果蔬商品管理：审核、管理所有商家上架的商品，确保商品信息合规。
订单管理
- 查看平台所有订单信息，支持按订单状态、用户、商家多维度筛选。
- 订单异常处理：介入处理订单纠纷、退款问题。
交流论坛管理
- 帖子审核与管理，删除违规内容，维护社区秩序。
系统管理
- 通知公告管理：发布、修改、删除平台公告。

三、核心功能亮点

3.1 多角色协同的生鲜电商业务闭环

系统支持用户、商家、管理员三类角色，从用户浏览购买→商家处理订单→管理员监管全流程，形成完整的果蔬电商业务闭环，覆盖商品展示、交易、管理全环节，满足平台各方的业务需求。

3.2 精细化果蔬商品管理体系

管理员可对商品类别、品牌进行统一管控，商家可自主维护商品信息，实现果蔬商品从入驻到销售的全流程精细化管理，确保商品信息的准确性与品类的丰富性，适配生鲜商品的多样化需求。

3.3 多维度商品筛选与浏览体验

用户端提供按商品名称、品牌、价格区间、品类的多维度筛选功能，结合商品图片、详情展示，帮助用户快速找到心仪的果蔬商品，大幅提升购物效率与体验。

3.4 完善的订单全流程管理

用户可实时查看订单状态（支付、发货、退款等），商家可处理订单发货与退款申请，管理员可介入订单异常处理，形成订单从下单到售后的完整管理闭环，保障交易流程的规范性。

3.5 社区化用户交流平台

交流论坛模块为用户提供互动渠道，用户可分享果蔬购买体验、推荐优质商品，管理员可审核管理内容，营造良好的社区氛围，增强平台用户粘性与活跃度。

四、系统实现细节

4.1 后端核心实现

项目结构

fruit-vegetable-mall-system ├── src/main/java/com/mall │ ├── controller # 控制器层，处理前端请求 │ ├── service # 业务逻辑层 │ ├── mapper # MyBatis-Plus数据访问层 │ ├── entity # 实体类，对应数据库表 │ ├── config # 配置类（跨域、MyBatis-Plus、安全配置） │ └── utils # 工具类（分页、文件上传、数据处理工具） └── src/main/resources ├── application.yml # 配置文件（数据库、端口、Redis等） └── mapper # MyBatis XML文件

关键技术实现
- 多角色权限控制：基于 Spring Security 实现用户、商家、管理员的角色权限区分，不同角色登录后访问不同的功能模块。
- 文件上传：实现果蔬商品图片、用户头像的上传功能，支持本地存储或云存储。
- 多条件筛选查询：基于 MyBatis-Plus 实现商品的多条件筛选查询，适配前端的多维度筛选需求。
- 跨域处理：通过 Spring Boot 配置CorsFilter，解决前后端分离架构下的跨域问题。

4.2 前端核心实现

项目结构

mall-front ├── src │ ├── components # 公共组件（导航栏、分页、表单、商品卡片） │ ├── views # 页面组件（首页、商品信息、购物车、个人中心、管理后台） │ ├── router # 路由配置 │ ├── store # Vuex状态管理（用户信息、购物车数据、全局状态） │ ├── api # 接口请求封装（Axios） │ └── utils # 工具函数（日期格式化、请求拦截） └── public # 静态资源

关键技术实现
- 路由权限控制：通过 Vue Router 配置路由守卫，根据用户角色控制路由访问权限，实现不同角色的页面隔离。
- 多条件筛选组件：封装商品筛选组件，支持按品类、品牌、价格区间等多维度筛选，提升用户查找商品的效率。
- 购物车状态管理：使用 Vuex 统一管理用户购物车数据，实现购物车状态的跨页面同步。
- 响应式布局：使用 Element UI 的栅格系统实现页面响应式布局，适配不同屏幕尺寸。

4.3 数据库设计（核心表）

表名	核心字段	用途
user	id, username, password, phone, role, avatar	用户信息表，区分普通用户、商家、管理员
merchant	id, merchant_name, contact_phone, address, status	商家信息表，存储商家基本信息与审核状态
product_category	id, category_name, image	商品类别表，维护果蔬商品分类信息
brand	id, brand_name	品牌表，维护商品品牌信息
product	id, product_no, name, category_id, brand_id, merchant_id, price, stock, specs, description, image, click_count, comment_count, favorite_count, status	果蔬商品信息表，存储商品属性与运营数据
cart	id, user_id, product_id, quantity	购物车表，存储用户购物车数据
order	id, order_no, user_id, merchant_id, total_amount, pay_status, order_status, create_time	订单信息表，记录用户购买订单信息
forum_post	id, title, content, user_id, create_time, status	论坛帖子表，存储用户发布的内容
announcement	id, title, content, publish_time, status	通知公告表，存储平台公告内容

五、系统测试与部署

5.1 功能测试

核心流程测试：用户注册登录、商品浏览、加入购物车、下单购买、商家商品管理、管理员商品分类管理等流程，验证功能的完整性与正确性。
角色权限测试：验证不同角色（用户、商家、管理员）的功能访问权限，确保权限控制有效。
边界场景测试：空表单提交、非法参数请求、库存不足场景、订单状态变更等场景的稳定性测试。

5.2 部署流程

后端部署
- 打包 Spring Boot 项目为 Jar 包：mvn clean package。
- 服务器安装 JDK、MySQL，配置数据库并导入 SQL 脚本。
- 运行 Jar 包：java -jar fruit-mall-system.jar，配置端口号与数据库连接信息。
前端部署
- 打包 Vue 项目：npm run build，生成 dist 目录静态文件。
- 配置 Nginx，托管 dist 目录，配置反向代理指向后端接口地址。