Node+Vue仓库管理系统

于 2025-01-06 13:16:37 发布
阅读量1.2k 收藏 12
点赞数 9
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35827191/article/details/144961580

基于 Node.js + Vue 的仓库管理系统设计与实现

引言

仓库管理系统在现代供应链中起着至关重要的作用，其目标是提高库存管理效率、优化资源配置、降低运营成本。传统的仓库管理多依赖于人工操作，效率低下且容易出错。随着信息技术的发展，基于 Web 的仓库管理系统逐渐成为主流，能够实现对库存的实时监控、精准管理和高效流转。

本文介绍了一个基于 Node.js 和 Vue 的仓库管理系统的设计与实现，提供用户管理、商品管理、库存管理、出入库记录、报表分析等功能。系统采用前后端分离架构，具有良好的用户体验和扩展性。

1. 系统需求分析

1.1 功能需求

1.1.1 用户管理
  • 用户注册、登录、角色分配。
  • 不同角色（如管理员、仓库操作员）具有不同权限。
1.1.2 商品管理
  • 商品的增删改查操作。
  • 支持商品分类管理。
1.1.3 库存管理
  • 实时监控商品库存数量。
  • 当库存低于预警值时触发库存报警。
1.1.4 出入库管理
  • 商品入库登记，增加库存。
  • 商品出库登记，减少库存。
  • 记录每次出入库的操作明细。
1.1.5 报表分析
  • 库存报表：显示当前库存情况。
  • 出入库统计报表：展示一定时间范围内的出入库记录及统计数据。

1.2 非功能需求

  • 高效性：支持并发操作，快速响应。
  • 易用性：前端界面简洁直观，支持常见浏览器。
  • 安全性：采用 JWT（JSON Web Token）进行用户认证和权限管理。
  • 可扩展性：支持未来功能模块的扩展，如供应链管理、财务对接等。

2. 系统设计

2.1 系统架构

系统采用前后端分离架构，主要技术栈包括：

  • 前端：Vue.js + Element UI，用于实现用户界面。
  • 后端：Node.js（基于 Express 框架）处理业务逻辑，提供 RESTful API。
  • 数据库：MySQL 用于存储用户、商品、库存、出入库记录等数据。

2.2 系统架构图

+-------------------+      +--------------------+
|      Vue.js       | <--> |      Node.js       |
|  (用户界面)       |      |  (业务逻辑与API)   |
+-------------------+      +--------------------+
           |                              |
           |                              |
+-------------------+      +--------------------+
|      MySQL        |      |    JWT认证服务     |
|  (数据存储)       |      | (用户认证与权限)   |
+-------------------+      +--------------------+

2.3 数据库设计

2.3.1 用户表（users）

存储用户的基本信息和角色。

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role ENUM('ADMIN', 'OPERATOR') DEFAULT 'OPERATOR',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
2.3.2 商品表（products）

存储商品的基本信息。

CREATE TABLE products (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    category VARCHAR(50),
    stock INT DEFAULT 0,
    low_stock_threshold INT DEFAULT 10, -- 库存预警值
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
2.3.3 出入库记录表（transactions）

记录每次商品的出入库操作。

CREATE TABLE transactions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    product_id INT,
    type ENUM('IN', 'OUT'), -- 'IN' 表示入库，'OUT' 表示出库
    quantity INT NOT NULL,
    operator_id INT, -- 操作员 ID
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (product_id) REFERENCES products(id),
    FOREIGN KEY (operator_id) REFERENCES users(id)
);

3. 核心模块设计

3.1 用户管理模块

3.1.1 用户注册与登录

用户注册接口

const bcrypt = require('bcrypt');
const express = require('express');
const router = express.Router();
const { User } = require('../models');

router.post('/register', async (req, res) => {
    const { username, password, role } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);
    const user = await User.create({ username, password: hashedPassword, role });
    res.json({ message: '用户注册成功', user });
});

用户登录接口

const jwt = require('jsonwebtoken');

router.post('/login', async (req, res) => {
    const { username, password } = req.body;
    const user = await User.findOne({ where: { username } });
    if (!user) return res.status(404).json({ message: '用户不存在' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(401).json({ message: '密码错误' });

    const token = jwt.sign({ id: user.id, role: user.role }, 'SECRET_KEY', { expiresIn: '1h' });
    res.json({ message: '登录成功', token });
});

3.2 商品管理模块

3.2.1 商品列表接口

获取所有商品的基本信息。

router.get('/products', async (req, res) => {
    const products = await Product.findAll();
    res.json(products);
});
3.2.2 新增商品接口
router.post('/products', async (req, res) => {
    const { name, category, stock, low_stock_threshold } = req.body;
    const product = await Product.create({ name, category, stock, low_stock_threshold });
    res.json({ message: '商品添加成功', product });
});

3.3 库存管理模块

3.3.1 商品入库接口

记录商品入库操作并更新库存。

router.post('/transactions/in', async (req, res) => {
    const { productId, quantity, operatorId } = req.body;
    const product = await Product.findByPk(productId);
    if (!product) return res.status(404).json({ message: '商品不存在' });

    product.stock += quantity;
    await product.save();

    await Transaction.create({ product_id: productId, type: 'IN', quantity, operator_id: operatorId });
    res.json({ message: '入库成功', product });
});
3.3.2 商品出库接口

记录商品出库操作并更新库存。

router.post('/transactions/out', async (req, res) => {
    const { productId, quantity, operatorId } = req.body;
    const product = await Product.findByPk(productId);
    if (!product) return res.status(404).json({ message: '商品不存在' });

    if (product.stock < quantity) return res.status(400).json({ message: '库存不足' });

    product.stock -= quantity;
    await product.save();

    await Transaction.create({ product_id: productId, type: 'OUT', quantity, operator_id: operatorId });
    res.json({ message: '出库成功', product });
});

3.4 报表分析模块

3.4.1 库存报表接口

获取所有商品的库存情况。

router.get('/reports/inventory', async (req, res) => {
    const products = await Product.findAll();
    res.json(products.map(p => ({
        id: p.id,
        name: p.name,
        stock: p.stock,
        lowStock: p.stock <= p.low_stock_threshold
    })));
});
3.4.2 出入库统计接口

获取一定时间范围内的出入库记录。

router.get('/reports/transactions', async (req, res) => {
    const { startDate, endDate } = req.query;
    const transactions = await Transaction.findAll({
        where: {
            created_at: {
                [Op.between]: [startDate, endDate]
            }
        }
    });
    res.json(transactions);
});

4. 前端设计与实现

4.1 技术栈

  • Vue.js：前端框架。
  • Element UI：组件库，用于构建表单、表格、弹窗等页面组件。

4.2 商品列表页面

商品列表页面代码

<template>
  <div>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column prop="lowStock" label="库存状态">
        <template #default="scope">
          <span :style="{ color: scope.row.lowStock ? 'red' : 'green' }">
            {{ scope.row.lowStock ? '低库存' : '正常' }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/api/products').then(res => {
        this.products = res.data;
      });
    }
  }
};
</script>

5. 系统测试

5.1 功能测试

  • 测试用户注册、登录、权限校验。
  • 测试商品的增删改查功能。
  • 测试出入库操作的正确性。
  • 测试报表生成的准确性。

5.2 性能测试

  • 测试并发情况下的系统响应时间。
  • 测试大数据量下的数据库查询性能。

6. 总结

本文介绍了一个基于 Node.js 和 Vue 的仓库管理系统的设计与实现。系统采用前后端分离架构，功能包括用户管理、商品管理、库存管理和报表分析等。通过使用现代化的 Web 技术，系统实现了良好的用户体验和数据管理能力。未来可以扩展更多功能，如多仓库管理、供应链对接等，为企业仓储管理提供更高效的解决方案。

计算机毕业设计之node+vue仓库管理


在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值