基于Springboot+vue的农产品销售管理系统

1. 项目背景与意义

随着农业现代化和电商化的不断推进，传统农产品销售模式逐渐暴露出信息不对称、流通环节多、产销对接不畅等问题。农户难以精准掌握市场需求，消费者也难以便捷获取优质、可溯源的农产品。因此，构建一套基于 Web 的农产品销售管理系统，具有重要的现实意义。

本系统以 Spring Boot 作为后端框架、Vue 作为前端框架，旨在实现农产品信息发布、在线选购、订单管理、库存跟踪、用户管理等功能，帮助农户、合作社和中小型农业企业降低销售成本、拓宽销售渠道，同时提升消费者的购物体验和信任度。

2. 系统技术栈

本系统采用前后端分离架构，主要技术栈如下：

3. 系统核心功能模块

系统主要分为前台商城和后台管理两大端，核心功能模块如下：

• 用户模块：注册、登录、个人信息维护、收货地址管理。
• 商品模块：农产品分类、商品列表、商品详情、图片上传、库存管理。
• 购物车模块：加入购物车、修改数量、删除商品、结算。
• 订单模块：提交订单、订单列表、订单状态跟踪、取消订单。
• 后台管理模块：商品管理、订单管理、用户管理、数据统计。

4. 数据库设计

系统核心数据表包括用户表、商品表、分类表、购物车表、订单表和订单明细表。以下给出商品表和订单表的简化设计：

-- 商品表 CREATE TABLE product ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, category_id BIGINT, price DECIMAL(10, 2) NOT NULL, stock INT NOT NULL DEFAULT 0, image VARCHAR(255), description TEXT, status TINYINT DEFAULT 1, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 订单表 CREATE TABLE orders ( id BIGINT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL UNIQUE, user_id BIGINT NOT NULL, total_amount DECIMAL(10, 2) NOT NULL, status TINYINT DEFAULT 0, address VARCHAR(255), create_time DATETIME DEFAULT CURRENT_TIMESTAMP );

5. 核心代码实现

5.1 后端：商品实体类

import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; @Data @TableName("product") public class Product { @TableId(type = IdType.AUTO) private Long id; private String name; private Long categoryId; private BigDecimal price; private Integer stock; private String image; private String description; private Integer status; private LocalDateTime createTime; }

5.2 后端：商品查询接口

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; @RestController @RequestMapping("/api/product") public class ProductController { @Resource private ProductMapper productMapper; @GetMapping("/page") public Result<Page<Product>> page(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String keyword) { QueryWrapper<Product> wrapper = new QueryWrapper<>(); if (keyword != null && !keyword.isEmpty()) { wrapper.like("name", keyword); } wrapper.eq("status", 1).orderByDesc("create_time"); Page<Product> result = productMapper.selectPage(new Page<>(page, size), wrapper); return Result.success(result); } }

5.3 前端：商品列表页面

<template> <div> <el-input v-model="keyword" placeholder="搜索农产品" clearable style="width: 300px; margin-bottom: 16px" @keyup.enter="loadData" /> <el-table :data="productList" border stripe> <el-table-column prop="name" label="商品名称" /> <el-table-column prop="price" label="价格" /> <el-table-column prop="stock" label="库存" /> <el-table-column label="操作"> <template #default="scope"> <el-button type="primary" size="small" @click="addCart(scope.row)">加入购物车</el-button> </template> </el-table-column> </el-table> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { ElMessage } from "element-plus"; import request from "@/utils/request"; const keyword = ref(""); const productList = ref([]); const loadData = async () => { const res = await request.get("/api/product/page", { params: { page: 1, size: 10, keyword: keyword.value }, }); productList.value = res.data.records; }; const addCart = (row) => { ElMessage.success("已加入购物车：" + row.name); }; onMounted(loadData); </script>

6. 总结

基于 Spring Boot + Vue 的农产品销售管理系统，通过前后端分离架构实现了农产品从展示、选购到订单管理的完整闭环。系统不仅降低了农产品销售的中间成本，也提升了消费者的购买体验。未来可以进一步引入农产品溯源、智能推荐和数据分析等功能，推动农业数字化转型。