档案工程系统从零搭建：基于SpringBoot与Vue的实操指南

一、环境准备与依赖安装

在开始编码前，必须确保本地开发环境已配置以下基础组件。请严格按照版本号安装，避免因版本不兼容导致启动失败。

• JDK 17+：推荐使用Oracle JDK或OpenJDK 17。
• Node.js 18+：前端构建环境。
• MySQL 8.0+：数据存储。
• MinIO：用于存储档案文件（PDF、图片等），提供S3兼容接口。
• Maven 3.8+：Java项目构建工具。

MinIO启动命令示例（Windows PowerShell）：

minio server D:\data --console-address ":9001"

执行后访问 http://localhost:9001，默认账号密码均为 minioadmin。登录后创建一个名为 archive-bucket 的Bucket，并将访问策略设置为 Public。

二、数据库设计与初始化

我们需要设计两张核心表：t_archive（档案主表）和 t_category（分类表）。请在MySQL客户端执行以下SQL脚本。

CREATE DATABASE IF NOT EXISTS archive_system DEFAULT CHARSET utf8mb4;
USE archive_system;
-- 分类表
CREATE TABLE t_category (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
category_name VARCHAR(100) NOT NULL COMMENT '分类名称',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- 档案主表
CREATE TABLE t_archive (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(200) NOT NULL COMMENT '档案标题',
category_id BIGINT COMMENT '所属分类ID',
file_name VARCHAR(255) NOT NULL COMMENT '原始文件名',
file_url VARCHAR(500) NOT NULL COMMENT '文件存储路径/URL',
file_size BIGINT COMMENT '文件大小(字节)',
uploader VARCHAR(50) DEFAULT 'admin' COMMENT '上传人',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

三、后端实现（Spring Boot）

使用Spring Initializr创建项目，依赖选择：Spring Web、MyBatis Framework、MySQL Driver、Lombok。

1. 添加Maven依赖

在 pom.xml 中手动添加MinIO客户端依赖：

io.minio
minio
8.5.7


com.baomidou
mybatis-plus-boot-starter
3.5.3.1

2. 配置文件

编辑 src/main/resources/application.yml，填入完整的数据库和MinIO连接信息：

server:
port: 8080
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: root
password: 123456
minio:
endpoint: http://localhost:9000
accessKey: minioadmin
secretKey: minioadmin
bucketName: archive-bucket

3. 核心实体类与配置

Archive.java（使用Lombok简化Getter/Setter）：

package com.example.archive.entity;
import lombok.Data;
import java.time.LocalDateTime;
@Data
public class Archive {
private Long id;
private String title;
private Long categoryId;
private String fileName;
private String fileUrl;
private Long fileSize;
private String uploader;
private LocalDateTime createdAt;
}

MinioConfig.java（初始化MinIO客户端）：

package com.example.archive.config;
import io.minio.MinioClient;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@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();
}
}

4. 业务层与控制层

ArchiveController.java（包含上传和列表查询接口）：

package com.example.archive.controller;
import com.example.archive.entity.Archive;
import io.minio.MinioClient;
import io.minio.PutObjectArgs;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.;
import org.springframework.web.multipart.MultipartFile;
import java.util.List;
import java.util.UUID;
@RestController
@RequestMapping("/api/archive")
public class ArchiveController {
@Autowired
private MinioClient minioClient;
@Autowired
private JdbcTemplate jdbcTemplate;
@Value("${minio.bucketName}")
private String bucketName;
@Value("${minio.endpoint}")
private String endpoint;
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file,
@RequestParam("title") String title,
@RequestParam("categoryId") Long categoryId) throws Exception {
// 1. 生成唯一文件名
String originalFilename = file.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
String objectName = UUID.randomUUID().toString() + suffix;
// 2. 上传到MinIO
minioClient.putObject(
PutObjectArgs.builder()
.bucket(bucketName)
.object(objectName)
.stream(file.getInputStream(), file.getSize(), -1)
.contentType(file.getContentType())
.build()
);
// 3. 保存元数据到MySQL
String fileUrl = endpoint + "/" + bucketName + "/" + objectName;
String sql = "INSERT INTO t_archive (title, category_id, file_name, file_url, file_size) VALUES (?, ?, ?, ?, ?)";
jdbcTemplate.update(sql, title, categoryId, originalFilename, fileUrl, file.getSize());
return "上传成功，访问路径：" + fileUrl;
}
@GetMapping("/list")
public List list() {
String sql = "SELECT  FROM t_archive ORDER BY created_at DESC";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Archive.class));
}
}

四、前端实现（Vue 3 + Element Plus）

前端使用Vue 3 Composition API和Element Plus组件库，实现文件上传和表格展示。

1. 项目初始化

在终端执行：

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

2. 配置Element Plus

修改 src/main.js：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('app')

3. 页面组件开发

修改 src/App.vue，完整代码如下：

五、启动与验证

完成上述代码编写后，按以下顺序启动服务：

1. 启动MySQL：确保数据库服务正在运行，且已执行第二步的SQL脚本。
2. 启动MinIO：确保MinIO服务已启动，且Bucket已创建。
3. 启动后端：在IDEA中运行 ArchiveApplication 主类，或在项目根目录执行 mvn spring-boot:run。看到控制台输出 Started ArchiveApplication 表示后端就绪。
4. 启动前端：在 archive-frontend 目录下执行 npm run dev。终端会显示本地访问地址，通常是 http://localhost:5173。

打开浏览器访问前端地址，输入标题、选择一个本地文件，点击“提交档案”。成功后下方表格会立即刷新，显示新上传的档案记录，点击“查看”即可在新标签页打开MinIO中的文件。至此，一个具备基础文件存储能力的档案工程系统已落地。