SSM框架分页展示Hdfs文件列表上传文件，删除文件，下载文件前后端代码

1. 分页展示Hdfs文件列表的后端代码：

// HdfsFileController.java

@RestController
@RequestMapping("/hdfs")
public class HdfsFileController {

    @Autowired
    private HdfsFileService hdfsFileService;

    @GetMapping("/files")
    public Page<HdfsFile> getHdfsFiles(@RequestParam("page") int page, @RequestParam("size") int size) {
        return hdfsFileService.getHdfsFiles(page, size);
    }
}

// HdfsFileService.java

@Service
public class HdfsFileService {

    @Value("${hdfs.basePath}")
    private String basePath;

    @Autowired
    private FileSystem fileSystem;

    public Page<HdfsFile> getHdfsFiles(int page, int size) {
        try {
            Path path = new Path(basePath);
            FileStatus[] fileStatuses = fileSystem.listStatus(path);

            List<HdfsFile> hdfsFiles = Arrays.stream(fileStatuses)
                    .map(fileStatus -> new HdfsFile(fileStatus.getPath().getName(), fileStatus.getLen()))
                    .collect(Collectors.toList());

            return new PageImpl<>(hdfsFiles, PageRequest.of(page, size), hdfsFiles.size());
        } catch (IOException e) {
            throw new RuntimeException("Failed to list HDFS files", e);
        }
    }
}

2. 分页展示Hdfs文件列表的前端代码：

<!-- hdfs-file-list.vue -->

<template>
  <div>
    <h2>Hdfs File List</h2>
    <table>
      <thead>
        <tr>
          <th>File Name</th>
          <th>File Size</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.name">
          <td>{{ file.name }}</td>
          <td>{{ file.size }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Prev</button>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
      page: 0,
      size: 10,
    };
  },
  mounted() {
    this.getFiles();
  },
  methods: {
    getFiles() {
      axios.get(`/hdfs/files?page=${this.page}&size=${this.size}`)
        .then((response) => {
          this.files = response.data.content;
        });
    },
    prevPage() {
      if (this.page > 0) {
        this.page -= 1;
        this.getFiles();
      }
    },
    nextPage() {
      this.page += 1;
      this.getFiles();
    },
  },
};
</script>

3. 上传文件的后端代码：

// HdfsFileController.java

@RestController
@RequestMapping("/hdfs")
public class HdfsFileController {

    @Autowired
    private HdfsFileService hdfsFileService;

    @PostMapping("/files")
    public void uploadFile(@RequestParam("file") MultipartFile file) {
        hdfsFileService.uploadFile(file);
    }
}

// HdfsFileService.java

@Service
public class HdfsFileService {

    @Value("${hdfs.basePath}")
    private String basePath;

    @Autowired
    private FileSystem fileSystem;

    public void uploadFile(MultipartFile file) {
        try {
            Path path = new Path(basePath + "/" + file.getOriginalFilename());
            FSDataOutputStream outputStream = fileSystem.create(path);
            IOUtils.copy(file.getInputStream(), outputStream);
        } catch (IOException e) {
            throw new RuntimeException("Failed to upload file to HDFS", e);
        }
    }
}

4. 上传文件的前端代码：

<!-- hdfs-file-upload.vue -->

<template>
  <div>
    <h2>Upload File to HDFS</h2>
    <input type="file" ref="fileInput" />
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    uploadFile() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/hdfs/files', formData)
        .then(() => {
          alert('File uploaded successfully');
        })
        .catch((error) => {
          alert(`Failed to upload file: ${error.message}`);
        });
    },
  },
};
</script>

5. 删除文件的后端代码：

// HdfsFileController.java

@RestController
@RequestMapping("/hdfs")
public class HdfsFileController {

    @Autowired
    private HdfsFileService hdfsFileService;

    @DeleteMapping("/files/{fileName:.+}")
    public void deleteFile(@PathVariable String fileName) {
        hdfsFileService.deleteFile(fileName);
    }
}

// HdfsFileService.java

@Service
public class HdfsFileService {

    @Value("${hdfs.basePath}")
    private String basePath;

    @Autowired
    private FileSystem fileSystem;

    public void deleteFile(String fileName) {
        try {
            Path path = new Path(basePath + "/" + fileName);
            boolean deleted = fileSystem.delete(path, false);
            if (!deleted) {
                throw new FileNotFoundException("File not found in HDFS: " + fileName);
            }
        } catch (IOException e) {
            throw new RuntimeException("Failed to delete file from HDFS", e);
        }
    }
}

6. 删除文件的前端代码：

<!-- hdfs-file-list.vue -->

<template>
  <div>
    <h2>Hdfs File List</h2>
    <table>
      <thead>
        <tr>
          <th>File Name</th>
          <th>File Size</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.name">
          <td>{{ file.name }}</td>
          <td>{{ file.size }}</td>
          <td>
            <button @click="deleteFile(file.name)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Prev</button>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
      page: 0,
      size: 10,
    };
  },
  mounted() {
    this.getFiles();
  },
  methods: {
    getFiles() {
      axios.get(`/hdfs/files?page=${this.page}&size=${this.size}`)
        .then((response) => {
          this.files = response.data.content;
        });
    },
    deleteFile(fileName) {
      axios.delete(`/hdfs/files/${fileName}`)
        .then(() => {
          this.getFiles();
          alert('File deleted successfully');
        })
        .catch((error) => {
          alert(`Failed to delete file: ${error.message}`);
        });
    },
    prevPage() {
      if (this.page > 0) {
        this.page -= 1;
        this.getFiles();
      }
    },
    nextPage() {
      this.page += 1;
      this.getFiles();
    },
  },
};
</script>

7. 下载文件的后端代码：

// HdfsFileController.java

@RestController
@RequestMapping("/hdfs")
public class HdfsFileController {

    @Autowired
    private HdfsFileService hdfsFileService;

    @GetMapping("/files/{fileName:.+}")
    public ResponseEntity<Resource> downloadFile(@PathVariable String fileName) {
        Resource resource = hdfsFileService.downloadFile(fileName);
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileName + "\"")
                .body(resource);
    }
}

// HdfsFileService.java

@Service
public class HdfsFileService {

    @Value("${hdfs.basePath}")
    private String basePath;

    @Autowired
    private FileSystem fileSystem;

    public Resource downloadFile(String fileName) {
        try {
            Path path = new Path(basePath + "/" + fileName);
            FSDataInputStream inputStream = fileSystem.open(path);

            ByteArrayResource resource = new ByteArrayResource(IOUtils.toByteArray(inputStream));
            return resource;
        } catch (IOException e) {
            throw new RuntimeException("Failed to download file from HDFS", e);
        }
    }
}

8. 下载文件的前端代码：

<!-- hdfs-file-list.vue -->

<template>
  <div>
    <h2>Hdfs File List</h2>
    <table>
      <thead>
        <tr>
          <th>File Name</th>
          <th>File Size</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.name">
          <td>{{ file.name }}</td>
          <td>{{ file.size }}</td>
          <td>
            <button @click="downloadFile(file.name)">Download</button>
            <button @click="deleteFile(file.name)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Prev</button>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
      page: 0,
      size: 10,
    };
  },
  mounted() {
    this.getFiles();
  },
  methods: {
    getFiles() {
      axios.get(`/hdfs/files?page=${this.page}&size=${this.size}`)
        .then((response) => {
          this.files = response.data.content;
        });
    },
    downloadFile(fileName) {
      axios.get(`/hdfs/files/${fileName}`, { responseType: 'blob' })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          alert(`Failed to download file: ${error.message}`);
        });
    },
    deleteFile(fileName) {
      axios.delete(`/hdfs/files/${fileName}`)
        .then(() => {
          this.getFiles();
          alert('File deleted successfully');
        })
        .catch((error) => {
          alert(`Failed to delete file: ${error.message}`);
        });
    },
    prevPage() {
      if (this.page > 0) {
        this.page -= 1;
        this.getFiles();
      }
    },
    nextPage() {
      this.page += 1;
      this.getFiles();
    },
  },
};
</script>