获课：jzit.top/13696/

MinIO 是一个开源的分布式对象存储系统，兼容 Amazon S3 API，广泛用于构建云原生应用、文件存储解决方案等。Vue 是一个流行的前端框架，而 Spring Boot 则是一个快速构建 Java 后端应用的框架。如果你想从头开始开发一个基于 MinIO、Vue 和 Spring Boot 的分布式存储系统，下面是一个基本的整合开发流程。

1.搭建 MinIO 集群

MinIO 的分布式模式是通过运行多个 MinIO 实例来实现的，可以通过 Docker 来搭建一个简单的分布式集群。

步骤：

• 安装 Docker 和 Docker Compose。
• 使用以下 Docker Compose 文件来启动 MinIO 集群。

docker-compose.yml:

yamlversion: '3.7'
services:
  minio:
    image: minio/minio
    environment:
      MINIO_ACCESS_KEY: minio
      MINIO_SECRET_KEY: minio123
    volumes:
      - minio_data:/data
    ports:
      - "9000:9000"
    command: server /data
    networks:
      - minio_network
    deploy:
      replicas: 4
volumes:
  minio_data:
    driver: local
networks:
  minio_network:
    driver: bridge

在这个配置中，MinIO 会启动 4 个副本，使用 MINIO_ACCESS_KEY 和 MINIO_SECRET_KEY 来配置认证。

启动 MinIO：

bashdocker-compose up -d

启动后，你可以通过 http://localhost:9000 访问 MinIO Web 界面。

2.Spring Boot 后端开发

在 Spring Boot 中，你可以使用 MinIO 客户端库来与 MinIO 进行交互，上传、下载文件等。

步骤：

• 创建一个 Spring Boot 项目，可以使用 Spring Initializr 来生成一个基本项目。
• 添加 MinIO 的依赖。

pom.xml:

xml
    
        io.minio
        minio
        8.0.3
    
    
        org.springframework.boot
        spring-boot-starter-web
    

配置 MinIO 客户端：

在 application.properties 或 application.yml 中配置 MinIO 的连接信息。

application.properties:

minio.url=http://localhost:9000
minio.accessKey=minio
minio.secretKey=minio123
minio.bucket=mybucket

创建 MinIO 客户端服务：

MinioService.java:

javaimport io.minio.MinioClient;
import io.minio.errors.MinioException;
import io.minio.messages.Item;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;

@Service
public class MinioService {

    @Value("${minio.url}")
    private String url;

    @Value("${minio.accessKey}")
    private String accessKey;

    @Value("${minio.secretKey}")
    private String secretKey;

    @Value("${minio.bucket}")
    private String bucketName;

    private final MinioClient minioClient;

    public MinioService() {
        this.minioClient = MinioClient.builder()
                .endpoint(url)
                .credentials(accessKey, secretKey)
                .build();
    }

    // 上传文件
    public void uploadFile(MultipartFile file) throws IOException, MinioException {
        try (InputStream inputStream = file.getInputStream()) {
            minioClient.putObject(bucketName, file.getOriginalFilename(), inputStream, file.getSize(), file.getContentType());
        }
    }

    // 列出存储桶中的文件
    public List listObjects() throws MinioException {
        return minioClient.listObjects(bucketName).stream().toList();
    }
}

创建 Controller 来处理请求：

MinioController.java:

javaimport org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import io.minio.errors.MinioException;

import java.io.IOException;
import java.util.List;

@RestController
@RequestMapping("/minio")
public class MinioController {

    @Autowired
    private MinioService minioService;

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            minioService.uploadFile(file);
            return "File uploaded successfully!";
        } catch (IOException | MinioException e) {
            e.printStackTrace();
            return "Error during file upload";
        }
    }

    @GetMapping("/files")
    public List listFiles() {
        try {
            return minioService.listObjects().stream().map(item -> item.objectName()).toList();
        } catch (MinioException e) {
            e.printStackTrace();
            return List.of("Error retrieving files");
        }
    }
}

启动 Spring Boot 应用：

运行 SpringBootApplication，启动后你可以访问：

• POST /minio/upload 来上传文件。
• GET /minio/files 来列出 MinIO 中的所有文件。

3.Vue 前端开发

在前端，你可以使用 Vue.js 与 Spring Boot 后端进行交互。使用 axios 库来发送 HTTP 请求。

步骤：

• 创建一个 Vue 项目，可以使用 Vue CLI 创建。

bashvue create minio-vue-app

• 安装 axios：

bashnpm install axios

在 Vue 中上传文件：

UploadFile.vue:

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      files: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      const formData = new FormData();
      formData.append("file", this.selectedFile);
      
      try {
        await axios.post("http://localhost:8080/minio/upload", formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        alert("File uploaded successfully!");
        this.listFiles();
      } catch (error) {
        console.error("Error uploading file", error);
      }
    },
    async listFiles() {
      try {
        const response = await axios.get("http://localhost:8080/minio/files");
        this.files = response.data;
      } catch (error) {
        console.error("Error listing files", error);
      }
    }
  },
  created() {
    this.listFiles();
  }
};
</script>

启动 Vue 应用：

bashnpm run serve

4.总结

• MinIO：搭建了一个基于 Docker 的 MinIO 分布式存储集群。
• Spring Boot 后端：使用 MinIO Java SDK 与 MinIO 进行交互，提供文件上传和列出存储文件的 API。
• Vue 前端：通过 axios 上传文件并显示存储在 MinIO 中的文件列表。