文教体育用品企业档案管理系统从零到一搭建实操指南

一、系统架构与核心组件选型

该系统采用前后端分离架构，前端使用Vue 3 + Element Plus，后端使用Spring Boot + MySQL。以下是完整的技术栈清单：

• 前端：Node.js 16+、Vue 3、Vite、Element Plus、Axios
• 后端：JDK 17、Spring Boot 3.1、MyBatis-Plus、Spring Security
• 数据库：MySQL 8.0
• 文件存储：MinIO（用于存储产品图纸、合同扫描件等非结构化数据）

二、开发环境搭建

1. 基础软件安装

在命令行中执行以下命令安装Node.js和Java：

对于Windows/macOS，从官网下载安装包：

• Node.js：https://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi（Windows）
• JDK 17：https://download.oracle.com/java/17/latest/jdk-17_windows-x64_bin.msi（Windows）

对于Ubuntu/Debian系统，执行：

```bash 安装Node.js curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs 安装JDK 17 sudo apt update sudo apt install openjdk-17-jdk ```

2. 数据库初始化

创建MySQL数据库和用户：

```sql CREATE DATABASE archive_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER 'archive_admin'@'%' IDENTIFIED BY 'StrongPass123!'; GRANT ALL PRIVILEGES ON archive_system. TO 'archive_admin'@'%'; FLUSH PRIVILEGES; ```

执行以下SQL创建核心表结构：

```sql -- 产品档案表 CREATE TABLE product_archive ( id BIGINT PRIMARY KEY AUTO_INCREMENT, product_code VARCHAR(50) NOT NULL UNIQUE COMMENT '产品编码', product_name VARCHAR(200) NOT NULL COMMENT '产品名称', category VARCHAR(50) COMMENT '产品类别：文具/体育器材/教具', specifications TEXT COMMENT '规格参数', design_drawing_url VARCHAR(500) COMMENT '设计图纸路径', safety_certificate_no VARCHAR(100) COMMENT '安全认证编号', production_date DATE COMMENT '生产日期', shelf_life INT COMMENT '保质期（月）', supplier_id BIGINT COMMENT '供应商ID', storage_location VARCHAR(100) COMMENT '仓库位置', created_time DATETIME DEFAULT CURRENT_TIMESTAMP, updated_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 文件附件表 CREATE TABLE archive_attachment ( id BIGINT PRIMARY KEY AUTO_INCREMENT, archive_id BIGINT NOT NULL, archive_type VARCHAR(20) COMMENT '档案类型：PRODUCT/SUPPLIER/CONTRACT', file_name VARCHAR(255) NOT NULL, file_path VARCHAR(500) NOT NULL COMMENT 'MinIO存储路径', file_size BIGINT COMMENT '文件大小（字节）', file_type VARCHAR(50) COMMENT '文件类型', upload_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ```

三、后端项目搭建

1. 项目初始化

使用Spring Initializr创建项目，或直接使用以下Maven配置：

```xml 4.0.0 org.springframework.boot spring-boot-starter-parent 3.1.0 com.edusports archive-system 1.0.0 17 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-security com.baomidou mybatis-plus-boot-starter 3.5.3.1 mysql mysql-connector-java 8.0.33 io.minio minio 8.5.2 ```

2. 核心配置

在application.yml中配置数据库和MinIO：

```yaml spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/archive_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: archive_admin password: StrongPass123! servlet: multipart: max-file-size: 100MB max-request-size: 100MB minio: endpoint: http://localhost:9000 accessKey: minioadmin secretKey: minioadmin bucketName: archive-files ```

3. 文件上传服务实现

创建MinIO配置类：

```java @Configuration public class MinioConfig { @Value("${minio.endpoint}") private String endpoint; @Value("${minio.accessKey}") private String accessKey; @Value("${minio.secretKey}") private String secretKey; @Bean public MinioClient minioClient() { return MinioClient.builder() .endpoint(endpoint) .credentials(accessKey, secretKey) .build(); } } ```

实现文件上传服务：

```java @Service public class FileStorageService { @Autowired private MinioClient minioClient; @Value("${minio.bucketName}") private String bucketName; public String uploadFile(MultipartFile file, String objectName) throws Exception { // 检查存储桶是否存在 boolean found = minioClient.bucketExists(BucketExistsArgs.builder() .bucket(bucketName).build()); if (!found) { minioClient.makeBucket(MakeBucketArgs.builder() .bucket(bucketName).build()); } // 上传文件 minioClient.putObject(PutObjectArgs.builder() .bucket(bucketName) .object(objectName) .stream(file.getInputStream(), file.getSize(), -1) .contentType(file.getContentType()) .build()); return endpoint + "/" + bucketName + "/" + objectName; } } ```

四、前端项目实现

1. 项目初始化

创建Vue项目并安装依赖：

```bash npm create vue@latest archive-frontend cd archive-frontend npm install element-plus axios vue-router npm install ```

2. 产品档案管理页面

创建ProductArchive.vue组件：

```vue ```

五、档案分类与权限控制

1. 档案分类设计

根据文教体育用品企业特点，设计以下档案分类：

• 产品技术档案：设计图纸、工艺文件、质量标准
• 供应商档案：供应商资质、合同、评价记录
• 质检档案：检测报告、认证证书、抽检记录
• 客户档案：销售合同、客户信息、售后服务记录

2. 权限控制实现

在Spring Security中配置角色权限：

```java @Configuration @EnableWebSecurity public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(auth -> auth .requestMatchers("/api/product/").hasAnyRole("ADMIN", "PRODUCT_MANAGER") .requestMatchers("/api/supplier/").hasAnyRole("ADMIN", "PURCHASE_MANAGER") .requestMatchers("/api/file/upload").authenticated() .anyRequest().authenticated() ) .httpBasic(Customizer.withDefaults()) .csrf().disable(); return http.build(); } } ```

六、系统部署与维护

1. 使用Docker部署

创建docker-compose.yml文件：

```yaml version: '3.8' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root123 MYSQL_DATABASE: archive_system MYSQL_USER: archive_admin MYSQL_PASSWORD: StrongPass123! ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql minio: image: minio/minio command: server /data --console-address ":9001" environment: MINIO_ROOT_USER: minioadmin MINIO_ROOT_PASSWORD: minioadmin ports: - "9000:9000" - "9001:9001" volumes: - minio_data:/data backend: build: ./backend ports: - "8080:8080" depends_on: - mysql - minio frontend: build: ./frontend ports: - "80:80" depends_on: - backend volumes: mysql_data: minio_data: ```

2. 数据备份脚本

创建备份脚本backup.sh：

```bash !/bin/bash BACKUP_DIR="/opt/archive_backup" DATE=$(date +%Y%m%d_%H%M%S) 备份MySQL数据库 mysqldump -uarchive_admin -pStrongPass123! archive_system > \ $BACKUP_DIR/archive_db_$DATE.sql 备份MinIO文件 mc mirror --overwrite minio/archive-files $BACKUP_DIR/minio_backup_$DATE/ 保留最近7天的备份 find $BACKUP_DIR -name ".sql" -mtime +7 -delete find $BACKUP_DIR -name "minio_backup_" -type d -mtime +7 -exec rm -rf {} \; ```

七、常见问题排查

1. 文件上传失败

检查步骤：

1. 检查MinIO服务状态：访问 http://localhost:9001 确认服务正常
2. 检查存储桶权限：在MinIO控制台设置archive-files存储桶为公开读写
3. 检查文件大小限制：确认application.yml中multipart配置足够大

2. 数据库连接失败

执行以下命令检查：

```bash 检查MySQL服务状态 systemctl status mysql 检查用户权限 mysql -u archive_admin -p -e "SHOW GRANTS;" 检查防火墙 sudo ufw status sudo ufw allow 3306 ```

3. 前端页面空白

排查步骤：

1. 浏览器按F12打开开发者工具，查看Console错误
2. 检查nginx配置是否正确代理到后端API
3. 运行npm run build重新构建前端资源