摘要

随着仓储物流行业的数字化转型，卫生用品仓库管理面临效率低、错误率高、数据滞后等挑战。本文设计并实现了一套基于Vue.js框架的卫生用品仓库管理系统，涵盖员工管理、商品入库/出库、库存统计等核心功能。系统采用前后端分离架构，前端通过Vue组件化开发实现动态交互界面，后端基于Spring Boot提供RESTful API，数据库采用MySQL存储结构化数据。本文重点阐述员工查询模块的需求分析、数据库设计及批量操作功能的实现细节。测试结果表明，系统可显著提升仓库管理效率，降低人工操作错误率，为同类仓储管理系统提供可复用的技术方案。

关键词：Vue.js；仓库管理系统；前后端分离；组件化开发；卫生用品管理

一、绪论

1.1 研究背景与意义

卫生用品（如口罩、消毒液、纸巾）作为快消品，具有需求波动大、库存周转快的特点。传统人工仓库管理存在效率低、数据不同步、易出错等问题，难以满足现代化供应链需求。开发一套集成员工管理、商品追踪、库存预警的信息化系统，可规范仓储流程、提升响应速度，对降低运营成本具有重要意义。

Vue.js以其轻量级、高灵活性和丰富的生态组件（如Element UI），成为开发复杂业务系统的优选框架。基于Vue构建仓库管理系统，能够通过响应式编程与组件化设计，实现高效的数据交互与用户体验优化。

1.2 国内外研究现状

现有仓储管理系统多聚焦于工业领域，功能集中于库存盘点与物流跟踪，缺乏对员工绩效、商品效期等细节的管理。开源系统中，Vue.js应用多限于基础功能展示，全栈系统设计案例较少。商业系统则存在成本高、扩展性差等问题。针对卫生用品行业的专业化管理系统仍有较大空白。

1.3 论文结构

本文组织如下：绪论阐明研究背景；技术简介介绍核心框架；需求分析明确系统功能；系统设计详述架构与模块实现；总结展望未来优化方向。

二、技术简介

2.1 Vue.js框架

响应式数据绑定：基于数据劫持实现视图自动更新，简化动态内容渲染。

组件化开发：通过单文件组件（.vue）封装模板、逻辑与样式，提升代码复用率。

生态整合：Vue Router管理路由，Vuex实现全局状态共享，Axios处理异步请求。

2.2 后端技术栈

Spring Boot：快速搭建RESTful服务，整合MyBatis-Plus简化数据库操作。

JWT鉴权：基于Token的身份验证机制，保障接口安全性。

2.3 数据库技术

MySQL：存储员工信息、商品数据、操作日志等结构化数据。

Redis：缓存高频查询数据（如员工列表），提升接口响应速度。

2.4 UI组件库

Element UI：提供表格、表单、分页控件等组件，加速管理界面开发。

三、需求分析

3.1 功能需求

系统面向仓库管理员与普通员工，核心功能如下：

员工管理：员工信息增删改查（工号、姓名、性别、身份证、电话、部门、薪资、审核状态）、照片上传、批量审核/删除、数据导出。

商品管理：商品分类（如一次性用品、消毒用品）、效期管理、库存上下限设置。

入库/出库管理：扫码录入商品信息，自动更新库存，记录操作人与时效。

统计报表：生成库存周转率、员工操作量、商品效期预警等可视化报表。

3.2 非功能需求

性能：支持50+用户并发操作，列表加载时间≤1秒。

安全性：敏感数据加密传输，关键操作（如删除员工）需二次验证。

兼容性：适配Chrome、Edge等主流浏览器及1366×768以上分辨率。

3.3 员工查询模块需求细化

界面需求包括：

数据展示：分页加载员工列表，显示工号、姓名、性别（可视化开关）、审核状态（颜色标识）、添加时间等字段。

搜索功能：按工号、姓名、部门、身份证等多条件组合检索。

批量操作：通过复选框选择多名员工，执行批量删除或审核状态变更。

数据导出：将当前筛选结果导出为Excel文件。

操作日志：记录员工信息变更历史，便于审计追踪。

四、系统设计

4.1 架构设计

系统采用分层架构：

前端层：Vue.js构建SPA，通过Axios调用后端接口。

API网关：统一处理鉴权、限流与路由转发。

业务逻辑层：处理员工审核状态变更、数据校验等核心业务。

数据层：MySQL存储持久化数据，Redis缓存高频查询结果（如员工列表）。

4.2 数据库设计

核心表结构示例：

员工表（employee）：id、work_id（工号）、name、gender、id_card、phone、department、salary、is_approved、create_time。

操作日志表（operation_log）：id、employee_id、action_type、details、create_time。

4.3 员工查询模块设计

前端实现：

表格渲染：使用Element UI的el-table展示数据，结合v-for循环动态生成行。

分页与搜索：el-pagination实现分页跳转，el-input绑定搜索关键词，通过计算属性过滤数据。

批量操作：通过v-model绑定复选框状态，点击“批量删除”时提取选中行的ID数组，发送DELETE请求。

性别与审核状态可视化：使用el-switch组件绑定布尔值，绿色表示男性/已审核，红色表示女性/未审核。

后端接口设计：

GET /api/employees：支持分页（page、size）、排序（sort）、多条件搜索（workId、name等）。

PUT /api/employees/batch-approval：接收员工ID数组，批量更新审核状态。

DELETE /api/employees：逻辑删除或物理删除指定员工记录。

POST /api/employees/export：根据当前筛选条件生成Excel文件下载链接。

数据校验与日志记录：

更新员工信息时，校验身份证格式与电话号码有效性。

每次数据变更自动记录操作日志，存储至operation_log表。

4.4 安全与性能优化

防抖处理：搜索框输入采用防抖技术，减少无效请求。

权限控制：通过Vue Router守卫限制普通员工访问管理功能。

缓存策略：员工列表数据缓存至Redis，设置过期时间为5分钟。

五、系统测试与优化

5.1 测试方案

功能测试：验证员工增删改查、批量操作、数据导出等流程正确性。

性能测试：JMeter模拟50用户并发访问员工列表，监测接口响应时间与吞吐量。

安全测试：通过Postman验证接口鉴权机制，确保未授权用户无法访问敏感数据。

5.2 优化成果

接口性能：员工列表加载时间从1.5秒优化至0.4秒（Redis缓存）。

错误率：输入校验与事务管理将数据操作失败率降至0.2%以下。

六、总结与展望

6.1 研究成果

本文基于Vue.js与Spring Boot实现了卫生用品仓库管理系统，主要贡献如下：

功能完善：集成员工管理、商品追踪、库存统计，覆盖仓储全流程。

体验优化：通过可视化状态标识与批量操作，提升管理效率。

技术示范：为同类系统提供前后端分离架构与组件化开发实践参考。

6.2 未来展望

物联网整合：接入RFID标签，实现商品自动出入库与效期监控。

移动端适配：开发微信小程序，支持扫码入库与实时库存查询。

AI预测：基于历史数据预测库存需求，优化采购策略。

通过持续迭代，系统将进一步推动仓储管理智能化，为卫生用品行业提供高效、可靠的技术支持。