SpringBoot+Vue库存管理系统开发实战-代码聚汇网

SpringBoot+Vue库存管理系统开发实战

第三世界的妖孽

1. 项目背景与核心价值

库存管理系统是现代零售业数字化转型的基础设施。去年我在为一家连锁便利店做技术咨询时，亲眼目睹了店主还在用Excel表格手工记录进货和销售数据，经常出现库存盘点差异超过15%的情况。这正是我们需要开发这类系统的现实意义——通过SpringBoot+Vue的技术组合，构建一个实时、准确的库存管理解决方案。

这个系统特别适合作为计算机专业学生的毕业设计或课程设计，因为它完整覆盖了企业级应用开发的典型技术栈：

前端采用Vue.js实现响应式管理界面
后端使用SpringBoot构建RESTful API
MySQL作为关系型数据库存储核心业务数据
包含用户权限、商品管理、库存预警等企业级功能模块

2. 技术栈选型解析

2.1 为什么选择SpringBoot+Vue

在技术选型阶段，我们对比了三种常见方案：

方案	开发效率	学习成本	社区支持	适合场景
PHP+Laravel	高	低	一般	快速原型开发
Django+Vue	中	中	较好	数据密集型应用
SpringBoot+Vue	中高	中高	优秀	企业级系统

最终选择SpringBoot+Vue是因为：

Java生态在企业级开发中占据主导地位，SpringBoot的自动配置特性大幅降低了项目启动成本
Vue的渐进式框架特性适合学生逐步掌握前端开发
MyBatis作为ORM框架，既保持了SQL灵活性又简化了数据库操作

2.2 数据库设计关键点

MySQL表设计中特别注意了以下几点：

建立商品与库存的1:1关系（sys_goods与sys_goods_stock）
操作记录表（sys_emp_logs）采用类型字段区分不同操作
预警配置与预警记录分离设计，避免数据冗余

sql复制CREATE TABLE `sys_goods_stock` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `goods_id` bigint(20) NOT NULL COMMENT '商品ID',
  `stock` int(11) NOT NULL DEFAULT '0' COMMENT '库存数量',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_goods_id` (`goods_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现细节

3.1 库存变更的原子性操作

库存管理最关键的并发控制问题，我们采用两种方案解决：

方案一：数据库乐观锁

java复制@Update("UPDATE sys_goods_stock SET stock = stock - #{num} 
        WHERE goods_id = #{goodsId} AND stock >= #{num}")
int deductStock(@Param("goodsId") Long goodsId, @Param("num") Integer num);

方案二：分布式锁（Redis实现）

java复制public boolean updateStockWithLock(Long goodsId, Integer num) {
    String lockKey = "stock_lock:" + goodsId;
    try {
        // 尝试获取锁
        Boolean locked = redisTemplate.opsForValue()
            .setIfAbsent(lockKey, "1", 10, TimeUnit.SECONDS);
        if (locked != null && locked) {
            // 执行库存操作
            return stockMapper.deductStock(goodsId, num) > 0;
        }
        return false;
    } finally {
        redisTemplate.delete(lockKey);
    }
}

3.2 前后端分离架构实现

前端Vue项目结构建议如下：

code复制src/
├── api/            # 接口定义
├── assets/         # 静态资源  
├── components/     # 通用组件
│   ├── Pagination.vue
│   └── ...
├── router/         # 路由配置
├── store/          # Vuex状态管理
├── utils/          # 工具函数
└── views/          # 页面组件
    ├── goods/      # 商品管理
    ├── stock/      # 库存管理
    └── ...

Axios请求拦截器示例：

javascript复制// 请求拦截
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = 'Bearer ' + getToken()
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Message.error(res.msg || 'Error')
      return Promise.reject(new Error(res.msg || 'Error'))
    }
    return res
  }
)

4. 典型问题解决方案

4.1 跨域问题处理

SpringBoot后端配置CORS的三种方式：

全局配置（推荐）

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .maxAge(3600);
    }
}

控制器注解

java复制@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*")
public class GoodsController {
    // ...
}

过滤器方式

java复制@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new FilterRegistrationBean<>(new CorsFilter(source));
}

4.2 数据可视化实现

使用ECharts实现库存预警可视化：

vue复制<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      const res = await getWarnData();
      const chart = echarts.init(this.$refs.chart);
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: res.data.map(item => item.goodsName)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.data.map(item => ({
            value: item.currentNum,
            itemStyle: {
              color: item.currentNum < item.warnNum ? '#f56c6c' : '#67c23a'
            }
          })),
          type: 'bar'
        }]
      };
      
      chart.setOption(option);
    }
  }
}
</script>

5. 项目扩展建议

引入Redis缓存：对商品信息等高频读取数据进行缓存

java复制@Cacheable(value = "goods", key = "#id")
public GoodsDTO getGoodsById(Long id) {
    return goodsMapper.selectById(id);
}

添加导出功能：使用EasyExcel实现数据导出

java复制@GetMapping("/export")
public void exportExcel(HttpServletResponse response) {
    List<GoodsDTO> list = goodsService.list();
    EasyExcel.write(response.getOutputStream(), GoodsDTO.class)
        .sheet("商品列表")
        .doWrite(list);
}

集成消息通知：库存预警时发送邮件/短信通知

java复制@Async
public void sendWarnEmail(GoodsWarnVO warn) {
    MimeMessage message = mailSender.createMimeMessage();
    MimeMessageHelper helper = new MimeMessageHelper(message);
    helper.setTo("admin@example.com");
    helper.setSubject("库存预警通知");
    helper.setText(String.format(
        "商品【%s】当前库存%d已低于预警值%d", 
        warn.getGoodsName(), 
        warn.getCurrentNum(),
        warn.getWarnNum()
    ));
    mailSender.send(message);
}

6. 开发环境搭建指南

6.1 后端开发环境

JDK 1.8+（推荐Amazon Corretto 11）
Maven 3.6+（配置阿里云镜像）

xml复制<mirror>
  <id>aliyunmaven</id>
  <mirrorOf>*</mirrorOf>
  <name>阿里云公共仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

IDEA插件推荐：

Lombok
MyBatisX
Spring Assistant

6.2 前端开发环境

Node.js 14+
Vue CLI 4.5+

bash复制npm install -g @vue/cli
vue create stock-frontend

VS Code插件推荐：

Vetur
ESLint
Vue VSCode Snippets

7. 项目部署方案

7.1 传统部署方式

后端打包：

bash复制mvn clean package -DskipTests

前端打包：

bash复制npm run build

Nginx配置示例：

nginx复制server {
    listen       80;
    server_name  stock.example.com;
    
    location / {
        root   /opt/stock-frontend/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

7.2 Docker容器化部署

后端Dockerfile：

dockerfile复制FROM amazoncorretto:11
COPY target/stock-system.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

前端Dockerfile：

dockerfile复制FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

使用docker-compose编排：

yaml复制version: '3'
services:
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - mysql_data:/var/lib/mysql
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    
  frontend:
    build: ./frontend
    ports:
      - "80:80"

volumes:
  mysql_data:

8. 常见问题排查

8.1 前端常见问题

问题1：页面刷新后路由丢失
解决方案：在Nginx配置中添加try_files规则

nginx复制location / {
    try_files $uri $uri/ /index.html;
}

问题2：API请求跨域
解决方案：确保后端正确配置CORS，开发环境可配置proxy：

javascript复制module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

8.2 后端常见问题

问题1：MyBatis查询结果为空
检查步骤：

确认SQL在数据库中能正常执行
检查实体类字段与数据库列名映射
添加@Results注解显式指定映射关系

问题2：事务不生效
确保：

启动类添加@EnableTransactionManagement
方法使用@Transactional注解
异常类型在rollbackFor中声明

9. 学习资源推荐

SpringBoot进阶：

《Spring Boot实战》
官方文档：spring.io/projects/spring-boot

Vue深度指南：

《Vue.js设计与实现》
官方文档：vuejs.org/guide

项目实战扩展：

添加JWT认证
集成Swagger API文档
实现分布式锁控制库存
接入微信小程序端

这个库存管理系统项目涵盖了企业级应用开发的完整流程，从技术选型到部署运维都有涉及。我在实际开发中发现，最大的挑战不在于具体技术的实现，而在于如何设计合理的业务边界和数据一致性方案。建议开发时先绘制详细的UML图和流程图，这能避免后期大量的重构工作。