1. 项目概述
这个基于SpringBoot+Vue的仓库管理系统是我在计算机专业毕业设计中的实践项目，旨在解决传统仓库管理效率低下、错误率高的问题。系统采用前后端分离架构，前端使用Vue.js构建响应式用户界面，后端基于SpringBoot框架开发RESTful API，数据库选用MySQL进行数据存储。
作为一个完整的全栈项目，它实现了商品信息管理、进货记录管理、销售记录管理、库存管理及用户权限管理等核心功能。系统特别设计了员工和管理员两种角色，分别提供不同的功能权限，满足企业仓库管理的实际需求。
2. 技术选型与架构设计
2.1 技术栈选择
后端技术栈：
- SpringBoot 2.7.x：简化配置，快速开发
- Spring Security：认证授权管理
- Spring Data JPA：数据库操作
- MySQL 8.0：关系型数据库
- Redis：缓存和会话管理
前端技术栈：
- Vue.js 3.x：前端框架
- Element Plus：UI组件库
- Axios：HTTP请求库
- Vue Router：路由管理
- Vuex：状态管理
2.2 架构设计
系统采用典型的三层架构：
- 表现层(UI)：Vue.js构建的Web界面，负责用户交互
- 业务逻辑层(BLL)：SpringBoot实现的核心业务逻辑
- 数据访问层(DAL)：Spring Data JPA与MySQL交互
这种分层设计使得系统具有以下优势：
- 前后端分离，开发并行
- 职责单一，便于维护
- 接口标准化，易于扩展
3. 核心功能实现
3.1 用户认证与权限管理
系统采用RBAC(基于角色的访问控制)模型，通过Spring Security实现：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/admin/**").hasRole("ADMIN")
.antMatchers("/api/employee/**").hasRole("EMPLOYEE")
.anyRequest().authenticated()
.and()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
}
}
3.2 商品管理模块
商品管理是系统的核心功能，包括商品CRUD、库存管理等：
java复制@Service
public class ProductServiceImpl implements ProductService {
@Autowired
private ProductRepository productRepository;
@Transactional
public Product addProduct(ProductDTO productDTO) {
Product product = new Product();
// 数据转换和校验
BeanUtils.copyProperties(productDTO, product);
product.setCreateTime(LocalDateTime.now());
return productRepository.save(product);
}
public Page<Product> getProducts(Pageable pageable) {
return productRepository.findAll(pageable);
}
}
3.3 库存管理实现
库存管理采用乐观锁解决并发问题：
java复制@Service
public class InventoryServiceImpl implements InventoryService {
@Autowired
private ProductRepository productRepository;
@Transactional
public synchronized void updateStock(Long productId, int quantity, OperationType type) {
Product product = productRepository.findById(productId)
.orElseThrow(() -> new ResourceNotFoundException("Product not found"));
if (type == OperationType.INBOUND) {
product.setQuantity(product.getQuantity() + quantity);
} else if (type == OperationType.OUTBOUND) {
if (product.getQuantity() < quantity) {
throw new BusinessException("Insufficient stock");
}
product.setQuantity(product.getQuantity() - quantity);
}
productRepository.save(product);
}
}
4. 数据库设计
4.1 主要表结构
商品表(product_information)：
sql复制CREATE TABLE `product_information` (
`product_information_id` bigint NOT NULL AUTO_INCREMENT,
`product_name` varchar(64) NOT NULL,
`product_code` varchar(64) NOT NULL,
`product_category` varchar(64) DEFAULT NULL,
`quantity_of_goods` double DEFAULT '0',
`warehouse_name` varchar(64) DEFAULT NULL,
`storage_location` varchar(64) DEFAULT NULL,
`product_status` varchar(64) DEFAULT NULL,
`product_introduction` text,
`create_time` datetime NOT NULL,
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`product_information_id`),
UNIQUE KEY `idx_product_code` (`product_code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
用户表(user)：
sql复制CREATE TABLE `user` (
`user_id` bigint NOT NULL AUTO_INCREMENT,
`state` smallint NOT NULL DEFAULT '1',
`user_group` varchar(32) DEFAULT NULL,
`login_time` timestamp NULL DEFAULT NULL,
`phone` varchar(11) DEFAULT NULL,
`phone_state` smallint DEFAULT '0',
`username` varchar(16) NOT NULL,
`nickname` varchar(16) DEFAULT NULL,
`password` varchar(64) NOT NULL,
`email` varchar(64) DEFAULT NULL,
`email_state` smallint DEFAULT '0',
`avatar` varchar(255) DEFAULT NULL,
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`user_id`),
UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
5. 前端实现
5.1 Vue组件设计
商品列表组件示例：
vue复制<template>
<div class="product-list">
<el-table :data="products" style="width: 100%">
<el-table-column prop="productCode" label="商品编号" width="180" />
<el-table-column prop="productName" label="商品名称" />
<el-table-column prop="quantity" label="库存数量" />
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { getProducts } from '@/api/product'
export default {
setup() {
const products = ref([])
const fetchProducts = async () => {
try {
const response = await getProducts()
products.value = response.data
} catch (error) {
console.error('获取商品列表失败:', error)
}
}
onMounted(() => {
fetchProducts()
})
return {
products,
handleEdit,
handleDelete
}
}
}
</script>
5.2 状态管理
使用Vuex管理全局状态：
javascript复制import { createStore } from 'vuex'
export default createStore({
state: {
user: null,
token: localStorage.getItem('token') || null
},
mutations: {
setUser(state, user) {
state.user = user
},
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
logout(state) {
state.user = null
state.token = null
localStorage.removeItem('token')
}
},
actions: {
async login({ commit }, credentials) {
const response = await login(credentials)
commit('setToken', response.data.token)
const user = await getCurrentUser()
commit('setUser', user.data)
}
}
})
6. 系统测试与部署
6.1 测试策略
采用分层测试策略：
- 单元测试：JUnit测试业务逻辑
- 集成测试：测试模块间交互
- E2E测试：Cypress测试完整流程
6.2 部署方案
开发环境：
- 本地运行，使用Docker容器化MySQL和Redis
生产环境：
- 前端：Nginx静态部署
- 后端：Docker容器部署，使用Jenkins CI/CD
- 数据库：MySQL主从复制，Redis集群
7. 项目总结与优化方向
这个仓库管理系统实现了预期的所有功能，但在实际开发过程中也遇到了一些挑战：
-
性能优化：当商品数量超过10万时，列表查询性能下降明显。解决方案是添加分页和索引优化。
-
并发控制：库存更新时出现并发问题，通过乐观锁和数据库事务解决。
-
用户体验：复杂表单的验证逻辑需要优化，使用Vuelidate简化验证流程。
未来可能的优化方向包括：
- 引入Elasticsearch实现商品搜索
- 使用WebSocket实现实时库存预警
- 增加数据分析模块，提供销售报表
通过这个项目，我深刻理解了全栈开发的流程和挑战，特别是在前后端协作、数据库设计和性能优化方面的实践经验尤为宝贵。