springboot + minio + vue 文件懒加载

### Spring Boot与MinIO结合Vue实现文件懒加载 #### 一、项目结构设计 为了实现文件懒加载功能，整个项目的架构应该分为前端(Vue.js)和后端(Spring Boot)，两者通过RESTful API交互。后端负责处理文件存储逻辑并与MinIO服务器通信；前端则专注于用户体验优化，在页面滚动或特定事件触发时按需加载图片或其他资源。 #### 二、Spring Boot 配置说明 在`application.yml`中配置MinIO客户端的相关属性[^4]： ```yaml minio: endpoint: http://localhost:9000 accessKey: minioadmin secretKey: minioadmin bucketName: test-bucket ``` 定义用于操作MinIO的服务层组件，比如获取对象URL的方法: ```java @Service public class FileService { private final MinioClient minioClient; @Value("${minio.bucketName}") private String bucketName; public FileService(MinioClient minioClient){ this.minioClient = minioClient; } /** * 获取指定文件的预览链接 */ public String getObjectUrl(String fileName)throws Exception{ return minioClient.getPresignedObjectUrl( GetPresignedObjectUrlArgs.builder() .method(Method.GET) .bucket(bucketName) .object(fileName) .build()); } } ``` #### 三、Controller 层接口开发 提供给前端调用的API，例如根据ID返回对应文件的信息以及其访问路径： ```java @RestController @RequestMapping("/api/file") public class FileController { private final FileService fileService; public FileController(FileService fileService){ this.fileService=fileService; } @GetMapping("/{id}/preview") ResponseEntity<Map<String, Object>> preview(@PathVariable Long id) throws Exception { Map<String,Object> resultMap=new HashMap<>(); // 这里假设有一个方法可以从数据库或者其他地方根据ID找到对应的文件名 Optional<FileEntity> optionalFile=repository.findById(id); if(!optionalFile.isPresent()){ throw new ResourceNotFoundException("未找到相应的文件"); }else{ String url=fileService.getObjectUrl(optionalFile.get().getFileName()); resultMap.put("url",url); resultMap.put("name",optionalFile.get().getName()); return ResponseEntity.ok(resultMap); } } } ``` #### 四、Vue前端部分 利用Intersection Observer API来监听目标元素是否进入视口范围，并在此基础上动态加载图像等内容。下面是一个简单的例子展示如何结合上述后端提供的API完成懒加载效果： ```html <template> <div v-for="item in items" :key="item.id"> <img :src="item.src? item.src:'loading.gif'" alt="" ref="images"/> </div> </template> <script> export default { data(){ return {items:[{id:1},{id:2}/* ... */]}; }, mounted() { const observer = new IntersectionObserver((entries)=>{ for(let entry of entries){ if(entry.isIntersecting && !entry.target.getAttribute('loaded')){ axios.get(`/api/file/${entry.target.dataset.id}/preview`) .then(response=>{ let imgElement=document.querySelector(`[data-id="${response.data.id}"]`); imgElement.setAttribute('src', response.data.url); imgElement.setAttribute('loaded','true'); }) .catch(error=>console.error(error)); observer.unobserve(entry.target); } }}); this.$refs.images.forEach(img => observer.observe(img)); } }; </script> ``` 以上代码实现了当某个图片元素即将出现在屏幕可视区域内时才发起网络请求去获取实际的数据源地址并设置给`<img>`标签的`src`属性从而达到延迟加载的目的。