基于Spring Boot与Vue的企业采购管理系统开发实践-代码聚汇网

基于Spring Boot与Vue的企业采购管理系统开发实践

汽车界创业小哥·2026-08-28·阅读 23 GEO检测（免费）

Spring BootVue.js企业采购管理系统

|难度：普通|阅读约 17 分钟

1. 项目概述

这个企业采购管理系统采用前后端分离架构，前端使用Vue.js框架，后端基于Spring Boot构建。系统主要解决企业采购流程中的供应商管理、采购申请审批、订单跟踪、库存对接等核心业务场景。我在实际部署过程中发现，这套系统特别适合中小型制造企业和商贸公司使用，能够将传统纸质审批流程缩短70%以上。

系统源码结构清晰，采用Maven多模块设计，前后端完全解耦。后端包含采购核心模块、供应商模块、审批流引擎等组件；前端则基于Vue CLI搭建，使用Element UI组件库。这种架构选择既保证了开发效率，又便于后期功能扩展——我们团队曾用3天时间就完成了额外的报表模块集成。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术栈解析

2.1 Spring Boot后端设计

后端采用Spring Boot 2.7.x版本，这是我经过多个项目验证的稳定版本。核心配置在application-prod.yml中包含了以下关键参数：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/procurement?useSSL=false&serverTimezone=UTC
    username: proc_admin
    password: ${DB_PASSWORD}
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

特别要注意的是数据库连接池配置。系统默认使用HikariCP，但在高并发场景下需要调整：

java复制@Configuration
public class DataSourceConfig {
    @Bean
    @ConfigurationProperties("spring.datasource.hikari")
    public HikariDataSource dataSource() {
        return DataSourceBuilder.create().type(HikariDataSource.class).build();
    }
}

重要提示：生产环境务必通过环境变量注入数据库密码，切勿直接写在配置文件中

2.2 Vue前端架构

前端工程采用Vue 2.x + Vuex + Vue Router技术栈，通过axios与后端通信。项目结构值得借鉴：

code复制src/
├── api/            # 所有接口请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # Vuex状态管理
├── utils/          # 工具函数
└── views/          # 页面组件

路由配置采用懒加载优化首屏性能：

javascript复制const routes = [
  {
    path: '/approval',
    component: () => import('@/views/approval/Index.vue'),
    meta: { requiresAuth: true }
  }
]

3. 系统部署实战

3.1 后端部署

部署前需要准备：

JDK 1.8+
MySQL 5.7+
Redis（用于会话管理）

关键部署步骤：

导入SQL脚本（位于/docs/database/procurement.sql）
修改application-prod.yml中的数据库配置
打包项目：mvn clean package -DskipTests
启动应用：java -jar procurement-backend.jar

踩坑记录：如果遇到PDF导出乱码问题，需要在服务器安装中文字体：
yum install -y fontconfig mkfontscale && mkfontdir && fc-cache -fv

3.2 前端部署

推荐使用Nginx作为前端服务器，配置示例：

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

构建命令：

bash复制npm install
npm run build:prod

4. 核心功能实现解析

4.1 采购审批流引擎

系统采用Activiti工作流引擎实现多级审批。核心表结构包括：

proc_approval_flow（审批流程定义）
proc_approval_task（审批任务实例）
proc_approval_history（审批历史）

审批状态机设计：

java复制public enum ApprovalStatus {
    DRAFT,          // 草稿
    PENDING,        // 待审批
    APPROVED,       // 已批准
    REJECTED,       // 已拒绝
    CANCELLED       // 已取消
}

4.2 供应商评估模块

采用加权算法计算供应商评分：

java复制public BigDecimal calculateSupplierScore(Supplier supplier) {
    BigDecimal qualityScore = supplier.getQualityRate()
            .multiply(new BigDecimal("0.4"));
    BigDecimal deliveryScore = supplier.getDeliveryRate()
            .multiply(new BigDecimal("0.3"));
    BigDecimal priceScore = supplier.getPriceCompetitiveness()
            .multiply(new BigDecimal("0.3"));
    
    return qualityScore.add(deliveryScore).add(priceScore);
}

5. 常见问题排查

5.1 跨域问题

如果出现跨域错误，检查以下配置：

后端需要添加CORS配置：

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

前端axios实例需要设置withCredentials：

javascript复制const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000,
    withCredentials: true
})

5.2 文件上传失败

检查以下配置项：

Spring Boot文件大小限制：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

Nginx客户端body大小限制：

nginx复制client_max_body_size 20m;

6. 性能优化建议

6.1 数据库优化

采购单列表查询建议添加索引：

sql复制CREATE INDEX idx_purchase_order ON purchase_order (creator_id, status);

6.2 缓存策略

使用Redis缓存供应商数据：

java复制@Cacheable(value = "supplier", key = "#supplierId")
public Supplier getSupplierById(Long supplierId) {
    return supplierMapper.selectById(supplierId);
}

6.3 前端性能优化

使用webpack分包策略：

javascript复制configureWebpack: {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

开启Gzip压缩：

bash复制npm install compression-webpack-plugin -D

7. 安全加固方案

7.1 XSS防护

前端使用vue-sanitize过滤输入：

javascript复制import VueSanitize from "vue-sanitize";
Vue.use(VueSanitize);

后端统一处理：

java复制@ControllerAdvice
public class XssAdvice implements ResponseBodyAdvice<Object> {
    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, 
            MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType, 
            ServerHttpRequest request, ServerHttpResponse response) {
        // XSS过滤逻辑
    }
}

7.2 接口防刷

使用Guava RateLimiter限流：

java复制private final RateLimiter limiter = RateLimiter.create(100.0); // 每秒100次

@Around("execution(public * com..controller.*.*(..))")
public Object around(ProceedingJoinPoint pjp) throws Throwable {
    if (!limiter.tryAcquire()) {
        throw new BusinessException("请求过于频繁");
    }
    return pjp.proceed();
}

8. 二次开发指南

8.1 添加新审批类型

在proc_approval_type表中新增记录
实现ApprovalHandler接口：

java复制@Component
public class TravelApprovalHandler implements ApprovalHandler {
    @Override
    public String getType() {
        return "TRAVEL";
    }
    
    @Override
    public void beforeSubmit(ApprovalContext context) {
        // 业务校验逻辑
    }
}

8.2 扩展报表功能

建议使用EasyExcel导出：

java复制@GetMapping("/export")
public void export(HttpServletResponse response) {
    ExcelWriter writer = EasyExcel.write(response.getOutputStream())
            .head(ReportHeader.class).build();
    
    writer.write(dataList(), EasyExcel.writerSheet("报表").build());
    writer.finish();
}

在实际项目中，我们团队基于这个系统开发了供应商风险评估模块，通过接入企查查API实现了自动化的供应商资质审查。整个扩展过程只用了2周时间，这得益于系统良好的扩展性设计。