摘要
基于Java、Spring Boot和Vue的仓库管理系统是一个现代化的库存管理解决方案，旨在提高仓库运营效率和准确性。系统采用Java作为后端开发语言，结合Spring Boot框架简化配置和部署过程，实现业务逻辑和数据处理。前端使用Vue.js构建用户界面，提供动态交互体验。该系统涵盖用户管理、仓库管理、物品分类管理等功能模块，通过RESTful API实现前后端分离，确保系统的灵活性和可维护性。适用于各类企业的仓库管理需求，帮助管理者实时掌握库存状况，优化物流流程，提升整体运营效率。
功能介绍
系统角色分为超级管理员、管理员和普通用户三种；
超级管理员：管理员管理、用户管理、仓库管理、物品分类管理、物品管理、记录管理等；
管理员：用户管理、仓库管理、物品分类管理、物品管理、记录管理等；
普通用户：个人中心、物品管理、记录管理等；
技术介绍
后端：Java语言、Spring Boot框架、MySQL数据库、maven依赖管理等；
前端：Vue、Element ui等；
部分代码展示
<template>
<div>
<div style="margin-bottom: 5px;">
<el-input v-model="name" placeholder="请输入名字" suffix-icon="el-icon-search" style="width: 200px;"
@keyup.enter.native="loadPost"></el-input>
<el-select v-model="sex" filterable placeholder="请选择性别" style="margin-left: 5px;">
<el-option
v-for="item in sexs"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
<el-button type="success" @click="resetParam">重置</el-button>
<el-button type="primary" style="margin-left: 5px;" @click="add">新增</el-button>
</div>
<el-table :data="tableData"
:header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
border
>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="no" label="账号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄" width="80">
</el-table-column>
<el-table-column prop="sex" label="性别" width="80">
<template slot-scope="scope">
<el-tag
:type="scope.row.sex === 1 ? 'primary' : 'success'"
disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="roleId" label="角色" width="120">
<template slot-scope="scope">
<el-tag
:type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' :
(scope.row.roleId === 1 ? '管理员' : '用户')}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="phone" label="电话" width="180">
</el-table-column>
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
<el-popconfirm
title="确定删除吗？"
@confirm="del(scope.row.id)"
style="margin-left: 5px;"
>
<el-button slot="reference" size="small" type="danger" >删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="no">
<el-col :span="20">
<el-input v-model="form.no"></el-input>
</el-col>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-col :span="20">
<el-input v-model="form.password"></el-input>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-col :span="20">
<el-input v-model="form.age"></el-input>
</el-col>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-col :span="20">
<el-input v-model="form.phone"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
</div>
</template>演示视频
基于Java,SpringBoot,vue仓库管理系统
