基于SpringBoot+Vue的WMS仓储管理系统设计与实现-开发者社区

1. 项目背景与核心需求

WMS（Warehouse Management System）仓储管理系统是现代物流供应链中的核心环节。作为计算机相关专业的毕业设计选题，基于SpringBoot和Vue实现WMS系统具有典型的教学意义和商业价值。这个选题能全面考察学生对前后端分离架构、数据库设计、业务逻辑实现等核心技能的掌握程度。

从技术选型角度看，SpringBoot+Vue的组合已成为当前企业级应用开发的主流方案。SpringBoot简化了Java后端服务的配置和部署，而Vue.js作为渐进式前端框架，其响应式特性和组件化开发模式非常适合构建复杂的管理系统界面。两者通过RESTful API进行数据交互，构成了典型的前后端分离架构。

2. 系统架构设计

2.1 技术栈选型分析

后端技术栈：

SpringBoot 2.7.x：提供自动配置、起步依赖等特性
Spring Security：负责认证授权
MyBatis-Plus：简化数据库操作
Redis：缓存热点数据
MySQL 8.0：主数据库
Swagger：API文档生成

前端技术栈：

Vue 3.x：核心框架
Element Plus：UI组件库
Axios：HTTP客户端
Vue Router：路由管理
Pinia：状态管理
ECharts：数据可视化

2.2 系统模块划分

核心功能模块包括：

基础数据管理：货品、仓库、货架等基础信息维护
入库管理：采购入库、退货入库等流程
出库管理：销售出库、调拨出库等流程
库存管理：库存查询、盘点、调拨等
报表统计：出入库统计、库存周转分析等
系统管理：用户、角色、权限配置

3. 数据库设计与实现

3.1 核心表结构

-- 仓库表 CREATE TABLE `warehouse` ( `id` bigint NOT NULL AUTO_INCREMENT, `code` varchar(32) NOT NULL COMMENT '仓库编码', `name` varchar(64) NOT NULL COMMENT '仓库名称', `address` varchar(255) DEFAULT NULL COMMENT '仓库地址', `contact` varchar(32) DEFAULT NULL COMMENT '联系人', `phone` varchar(20) DEFAULT NULL COMMENT '联系电话', `status` tinyint DEFAULT '1' COMMENT '状态(0:停用,1:启用)', PRIMARY KEY (`id`), UNIQUE KEY `uk_code` (`code`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 货品表 CREATE TABLE `goods` ( `id` bigint NOT NULL AUTO_INCREMENT, `code` varchar(32) NOT NULL COMMENT '货品编码', `name` varchar(64) NOT NULL COMMENT '货品名称', `spec` varchar(128) DEFAULT NULL COMMENT '规格型号', `unit` varchar(16) DEFAULT NULL COMMENT '单位', `category_id` bigint DEFAULT NULL COMMENT '分类ID', PRIMARY KEY (`id`), UNIQUE KEY `uk_code` (`code`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 库存表 CREATE TABLE `inventory` ( `id` bigint NOT NULL AUTO_INCREMENT, `warehouse_id` bigint NOT NULL COMMENT '仓库ID', `goods_id` bigint NOT NULL COMMENT '货品ID', `location_id` bigint DEFAULT NULL COMMENT '库位ID', `quantity` decimal(12,3) NOT NULL DEFAULT '0.000' COMMENT '库存数量', `locked_quantity` decimal(12,3) DEFAULT '0.000' COMMENT '锁定数量', PRIMARY KEY (`id`), UNIQUE KEY `uk_warehouse_goods` (`warehouse_id`,`goods_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 事务处理关键点

在WMS系统中，库存变更操作必须保证事务一致性。以入库操作为例：

@Transactional public void confirmReceipt(Long receiptId) { // 1. 查询入库单 Receipt receipt = receiptMapper.selectById(receiptId); if(receipt == null || !ReceiptStatus.PENDING.equals(receipt.getStatus())) { throw new BusinessException("入库单状态异常"); } // 2. 查询入库明细 List<ReceiptDetail> details = receiptDetailMapper.selectByReceiptId(receiptId); // 3. 更新库存 for(ReceiptDetail detail : details) { Inventory inventory = inventoryMapper.selectByWarehouseAndGoods( receipt.getWarehouseId(), detail.getGoodsId()); if(inventory == null) { // 新增库存记录 inventory = new Inventory(); inventory.setWarehouseId(receipt.getWarehouseId()); inventory.setGoodsId(detail.getGoodsId()); inventory.setQuantity(detail.getQuantity()); inventoryMapper.insert(inventory); } else { // 更新现有库存 inventory.setQuantity(inventory.getQuantity().add(detail.getQuantity())); inventoryMapper.updateById(inventory); } } // 4. 更新入库单状态 receipt.setStatus(ReceiptStatus.COMPLETED); receipt.setConfirmTime(LocalDateTime.now()); receiptMapper.updateById(receipt); }

4. 前端关键实现

4.1 入库单表单实现

使用Vue3的Composition API和Element Plus组件：

<template> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <el-form-item label="入库类型" prop="type"> <el-select v-model="form.type" placeholder="请选择入库类型"> <el-option v-for="item in receiptTypes" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="仓库" prop="warehouseId"> <el-select v-model="form.warehouseId" placeholder="请选择仓库" @change="handleWarehouseChange" > <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :label="warehouse.name" :value="warehouse.id" /> </el-select> </el-form-item> <el-divider content-position="left">入库明细</el-divider> <el-table :data="form.details" border> <el-table-column prop="goodsCode" label="货品编码"> <template #default="{row}"> <el-select v-model="row.goodsId" filterable remote reserve-keyword placeholder="请输入货品编码" :remote-method="queryGoods" @change="handleGoodsChange(row)" > <el-option v-for="item in goodsOptions" :key="item.id" :label="`${item.code} ${item.name}`" :value="item.id" /> </el-select> </template> </el-table-column> <el-table-column prop="quantity" label="数量" width="150"> <template #default="{row}"> <el-input-number v-model="row.quantity" :min="0.001" :precision="3" controls-position="right" /> </template> </el-table-column> <el-table-column label="操作" width="80"> <template #default="{$index}"> <el-button type="danger" icon="el-icon-delete" circle @click="removeDetail($index)" /> </template> </el-table-column> </el-table> <el-button type="primary" @click="addDetail">添加明细</el-button> </el-form> </template> <script setup> import { ref, reactive } from 'vue' import { ElMessage } from 'element-plus' import { getWarehouseList, searchGoods } from '@/api/wms' const formRef = ref() const form = reactive({ type: '', warehouseId: null, details: [] }) // 添加明细行 const addDetail = () => { form.details.push({ goodsId: null, goodsCode: '', goodsName: '', quantity: 0 }) } // 删除明细行 const removeDetail = (index) => { form.details.splice(index, 1) } // 仓库选择变化 const handleWarehouseChange = (warehouseId) => { const warehouse = warehouseList.value.find(item => item.id === warehouseId) if (warehouse) { form.warehouseName = warehouse.name } } // 货品选择变化 const handleGoodsChange = (row) => { const goods = goodsOptions.value.find(item => item.id === row.goodsId) if (goods) { row.goodsCode = goods.code row.goodsName = goods.name } } </script>

4.2 库存可视化看板

使用ECharts实现库存数据可视化：

<template> <div class="dashboard-container"> <el-row :gutter="20"> <el-col :span="12"> <div class="chart-container"> <div ref="inventoryPieChart" style="height:400px"></div> </div> </el-col> <el-col :span="12"> <div class="chart-container"> <div ref="turnoverBarChart" style="height:400px"></div> </div> </el-col> </el-row> </div> </template> <script setup> import { ref, onMounted } from 'vue' import * as echarts from 'echarts' import { getInventoryAnalysis } from '@/api/wms' const inventoryPieChart = ref() const turnoverBarChart = ref() onMounted(async () => { const { data } = await getInventoryAnalysis() initPieChart(data.categoryDistribution) initBarChart(data.turnoverRate) }) const initPieChart = (data) => { const chart = echarts.init(inventoryPieChart.value) const option = { title: { text: '库存品类分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: data.map(item => item.name) }, series: [ { name: '库存占比', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } }, labelLine: { show: false }, data: data.map(item => ({ value: item.value, name: item.name })) } ] } chart.setOption(option) } const initBarChart = (data) => { const chart = echarts.init(turnoverBarChart.value) const option = { title: { text: '库存周转率TOP10', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: data.map(item => item.name) }, series: [ { name: '周转率', type: 'bar', data: data.map(item => item.rate), itemStyle: { color: function(params) { const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'] return colorList[params.dataIndex % colorList.length] } } } ] } chart.setOption(option) } </script>

5. 系统部署方案

5.1 开发环境配置

后端开发环境：

JDK 1.8+
Maven 3.6+
MySQL 8.0
Redis 6.0+
IDE推荐IntelliJ IDEA

前端开发环境：

Node.js 16+
npm 8+ 或 yarn
IDE推荐VS Code

5.2 生产环境部署

使用Docker Compose部署方案：

version: '3.8' services: mysql: image: mysql:8.0 container_name: wms-mysql environment: MYSQL_ROOT_PASSWORD: root123 MYSQL_DATABASE: wms ports: - "3306:3306" volumes: - ./mysql/data:/var/lib/mysql - ./mysql/conf:/etc/mysql/conf.d restart: always redis: image: redis:6.2 container_name: wms-redis ports: - "6379:6379" volumes: - ./redis/data:/data restart: always backend: build: context: ./backend dockerfile: Dockerfile container_name: wms-backend ports: - "8080:8080" depends_on: - mysql - redis environment: - SPRING_PROFILES_ACTIVE=prod restart: always frontend: build: context: ./frontend dockerfile: Dockerfile container_name: wms-frontend ports: - "80:80" restart: always

后端Dockerfile示例：

# 基础镜像 FROM openjdk:8-jdk-alpine # 维护者信息 LABEL maintainer="yourname@example.com" # 设置工作目录 WORKDIR /app # 复制构建好的jar包 COPY target/wms-backend-1.0.0.jar app.jar # 暴露端口 EXPOSE 8080 # 启动命令 ENTRYPOINT ["java","-jar","app.jar"]

前端Dockerfile示例：

# 构建阶段 FROM node:16-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 生产阶段 FROM nginx:stable-alpine as production-stage COPY --from=build-stage /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]