基于 Spring Boot + Vue3 的农产品销售平台小程序设计与实现

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片！

一、项目背景与意义

随着乡村振兴战略的持续推进，农产品从产地直达消费者的需求日益旺盛。传统农产品销售依赖中间商层层加价，农户利润被压缩，消费者也难以获得新鲜、可溯源的农产品。借助移动互联网技术搭建农产品销售平台小程序，可以打通农户与消费者之间的信息壁垒，缩短流通链路，提升农产品附加值。

本项目采用Spring Boot + Vue3的前后端分离架构，前端以微信小程序作为用户入口，后端提供统一的 RESTful 接口服务，实现商品展示、下单购买、订单管理、农户入驻等核心业务，兼顾开发效率与系统可扩展性。

二、系统需求分析

2.1 角色划分

• 普通用户：浏览农产品、搜索筛选、加入购物车、下单支付、查看订单、评价商品。
• 农户/商家：发布农产品、维护库存与价格、处理订单发货、查看销售统计。
• 平台管理员：审核农户入驻、管理商品分类、处理售后纠纷、维护轮播与公告。

2.2 核心功能需求

三、系统架构设计

3.1 总体架构

系统采用前后端分离架构，整体分为表现层、接口层、业务层与数据层。小程序端通过 HTTPS 调用后端接口，后端基于 Spring Boot 提供统一网关与鉴权，数据持久化使用 MySQL，热点数据缓存至 Redis。

flowchart TD A[微信小程序 Vue3 + uni-app] -->|HTTPS / JSON| B[Spring Boot 接口层] C[后台管理端 Vue3 + Element Plus] -->|HTTPS / JSON| B B --> D[JWT 鉴权拦截器] D --> E[业务服务层] E --> F[MyBatis-Plus 数据访问] F --> G[(MySQL)] E --> H[(Redis 缓存)] E --> I[微信支付 / 对象存储 OSS]

3.2 技术选型

四、数据库设计

数据库围绕用户、商品、订单三条主线设计，核心表结构如下：

CREATE TABLE `product` ( `id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键', `merchant_id` BIGINT NOT NULL COMMENT '商家ID', `category_id` BIGINT NOT NULL COMMENT '分类ID', `name` VARCHAR(100) NOT NULL COMMENT '商品名称', `cover_url` VARCHAR(255) DEFAULT NULL COMMENT '封面图', `price` DECIMAL(10,2) NOT NULL COMMENT '售价', `stock` INT NOT NULL DEFAULT 0 COMMENT '库存', `origin` VARCHAR(100) DEFAULT NULL COMMENT '产地', `description` TEXT COMMENT '商品描述', `status` TINYINT NOT NULL DEFAULT 1 COMMENT '1上架 0下架', `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_category` (`category_id`), KEY `idx_merchant` (`merchant_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='农产品表';

订单表采用主表加明细表的结构，主表记录订单号、用户、金额与状态，明细表记录每个商品的快照信息，避免商品改价影响历史订单。

五、后端核心实现

5.1 项目结构

agri-mall ├── agri-common 公共模块：统一响应、异常、工具类 ├── agri-api 接口模块：Controller、DTO ├── agri-service 业务模块：Service、领域逻辑 ├── agri-dao 持久模块：Mapper、Entity └── agri-admin 后台管理模块

5.2 统一响应与全局异常处理

@Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> r = new Result<>(); r.setCode(200); r.setMessage("success"); r.setData(data); return r; } public static <T> Result<T> fail(String message) { Result<T> r = new Result<>(); r.setCode(500); r.setMessage(message); return r; } }

5.3 商品分页查询接口

@RestController @RequestMapping("/api/product") @RequiredArgsConstructor public class ProductController { private final ProductService productService; @GetMapping("/page") public Result<Page<ProductVO>> page(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) Long categoryId, @RequestParam(required = false) String keyword) { return Result.success(productService.pageQuery(pageNum, pageSize, categoryId, keyword)); } }

5.4 下单业务与库存扣减

下单流程需要保证库存扣减与订单创建的原子性，这里使用本地事务配合乐观锁版本号控制，避免超卖。

@Service @RequiredArgsConstructor public class OrderServiceImpl implements OrderService { private final ProductMapper productMapper; private final OrderMapper orderMapper; @Override @Transactional(rollbackFor = Exception.class) public Long createOrder(Long userId, OrderCreateDTO dto) { for (OrderItemDTO item : dto.getItems()) { int rows = productMapper.deductStock(item.getProductId(), item.getQuantity()); if (rows == 0) { throw new BizException("商品库存不足：" + item.getProductId()); } } Order order = OrderConverter.toEntity(userId, dto); orderMapper.insert(order); return order.getId(); } }

<update id="deductStock"> UPDATE product SET stock = stock - #{quantity} WHERE id = #{productId} AND stock >= #{quantity} </update>

六、小程序端实现

6.1 页面结构

• 首页：轮播图、分类导航、推荐农产品列表。
• 分类页：左侧分类树，右侧商品瀑布流。
• 商品详情页：图片轮播、价格库存、产地溯源、加入购物车与立即购买。
• 购物车页：勾选、数量调整、合计金额、去结算。
• 订单页：待付款、待发货、待收货、已完成四个状态标签。
• 个人中心：订单入口、地址管理、联系客服。

6.2 请求封装

import { useUserStore } from '@/stores/user' const BASE_URL = 'https://api.example.com' export function request(options) { const userStore = useUserStore() return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'Content-Type': 'application/json', Authorization: userStore.token ? `Bearer ${userStore.token}` : '' }, success: (res) => { if (res.data.code === 200) { resolve(res.data.data) } else { uni.showToast({ title: res.data.message, icon: 'none' }) reject(res.data) } }, fail: reject }) }) }

6.3 商品列表组件

<template> <view class="product-list"> <view class="product-item" v-for="item in list" :key="item.id" @click="goDetail(item.id)"> <image :src="item.coverUrl" mode="aspectFill" /> <text class="name">{{ item.name }}</text> <text class="price">￥{{ item.price }}</text> <text class="origin">{{ item.origin }}</text> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue' import { request } from '@/utils/request' const list = ref([]) onMounted(async () => { list.value = await request({ url: '/api/product/page?pageNum=1&pageSize=10' }) }) function goDetail(id) { uni.navigateTo({ url: `/pages/product/detail?id=${id}` }) } </script>

七、系统测试与部署

7.1 测试要点

• 接口测试：使用 Postman 或 Apifox 覆盖登录、商品查询、下单、支付回调等主流程。
• 并发测试：使用 JMeter 模拟多用户同时下单，验证库存扣减不出现超卖。
• 兼容测试：在不同机型与微信版本下验证小程序页面渲染与交互。

7.2 部署方案

后端使用 Docker 打包为镜像，通过 Nginx 反向代理对外提供服务；MySQL 与 Redis 部署在独立服务器并开启定期备份；小程序端通过微信开发者工具上传审核发布。

docker build -t agri-mall:1.0 . docker run -d --name agri-mall -p 8080:8080 \ -e SPRING_PROFILES_ACTIVE=prod \ agri-mall:1.0

八、总结与展望

本文围绕农产品销售平台小程序，完成了从需求分析、架构设计、数据库建模到后端接口与小程序页面实现的全流程设计。系统采用 Spring Boot + Vue3 前后端分离方案，具备良好的可维护性与扩展性。

后续可在此基础上继续完善：接入农产品溯源区块链、增加直播带货与社区团购模块、引入推荐算法提升转化率，并结合数据分析为农户提供种植与定价参考。