SSM框架分页展示HDFS文件列表,返回上一级,进入下一级,上传文件,删除文件,下载文件前后端代码
时间: 2023-06-12 18:05:36 浏览: 55
这是一个比较复杂的功能,需要前后端代码配合完成。以下是一个简单的示例代码,仅供参考:
后端代码:
1. 实体类
```java
public class HdfsFile {
private String name;
private String path;
private boolean isDir;
private long size;
// 省略getter和setter方法
}
```
2. Service层
```java
@Service
public class HdfsService {
@Autowired
private FileSystem fileSystem;
// 获取当前目录下的文件列表
public List<HdfsFile> listFiles(String path) throws IOException {
List<HdfsFile> fileList = new ArrayList<>();
FileStatus[] fileStatuses = fileSystem.listStatus(new Path(path));
for (FileStatus fileStatus : fileStatuses) {
HdfsFile hdfsFile = new HdfsFile();
hdfsFile.setName(fileStatus.getPath().getName());
hdfsFile.setPath(fileStatus.getPath().toString());
hdfsFile.setDir(fileStatus.isDirectory());
hdfsFile.setSize(fileStatus.getLen());
fileList.add(hdfsFile);
}
return fileList;
}
// 获取上一级目录
public String getParentPath(String path) {
Path parent = new Path(path).getParent();
return parent == null ? "/" : parent.toString();
}
// 创建目录
public boolean mkdir(String path) throws IOException {
return fileSystem.mkdirs(new Path(path));
}
// 删除文件或目录
public boolean delete(String path) throws IOException {
return fileSystem.delete(new Path(path), true);
}
// 上传文件
public boolean upload(InputStream in, String path) throws IOException {
FSDataOutputStream out = fileSystem.create(new Path(path));
IOUtils.copyBytes(in, out, 4096, true);
return true;
}
// 下载文件
public boolean download(String path, OutputStream out) throws IOException {
FSDataInputStream in = fileSystem.open(new Path(path));
IOUtils.copyBytes(in, out, 4096, true);
return true;
}
}
```
3. Controller层
```java
@Controller
@RequestMapping("/hdfs")
public class HdfsController {
@Autowired
private HdfsService hdfsService;
@GetMapping("/list")
@ResponseBody
public List<HdfsFile> list(@RequestParam(defaultValue = "/") String path) throws IOException {
return hdfsService.listFiles(path);
}
@GetMapping("/parent")
public String parent(@RequestParam(defaultValue = "/") String path, RedirectAttributes attributes) {
String parentPath = hdfsService.getParentPath(path);
attributes.addAttribute("path", parentPath);
return "redirect:/hdfs/list";
}
@PostMapping("/mkdir")
@ResponseBody
public boolean mkdir(String path) throws IOException {
return hdfsService.mkdir(path);
}
@PostMapping("/delete")
@ResponseBody
public boolean delete(String path) throws IOException {
return hdfsService.delete(path);
}
@PostMapping("/upload")
@ResponseBody
public boolean upload(MultipartFile file, String path) throws IOException {
InputStream in = file.getInputStream();
return hdfsService.upload(in, path);
}
@GetMapping("/download")
public void download(String path, HttpServletResponse response) throws IOException {
OutputStream out = response.getOutputStream();
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(new Path(path).getName(), "UTF-8"));
hdfsService.download(path, out);
}
}
```
前端代码:
1. HTML代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HDFS文件管理</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1>HDFS文件管理</h1>
<form class="form-inline mb-3" method="post" action="/hdfs/mkdir">
<div class="form-group mr-3">
<input type="text" class="form-control" name="path" placeholder="请输入目录路径">
</div>
<button type="submit" class="btn btn-primary">创建目录</button>
</form>
<table class="table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/hdfs/list?path=/">/</a></td>
<td>-</td>
<td>-</td>
</tr>
{{#each files}}
<tr>
<td>
{{#if isDir}}
<a href="/hdfs/list?path={{path}}">{{name}}</a>
{{else}}
{{name}}
{{/if}}
</td>
<td>{{#if isDir}}-{{else}}{{size}}{{/if}}</td>
<td>
{{#if isDir}}
<form class="d-inline-block mr-2" method="get" action="/hdfs/parent">
<input type="hidden" name="path" value="{{../path}}">
<button class="btn btn-primary">返回上一级</button>
</form>
{{/if}}
{{#unless isDir}}
<form class="d-inline-block mr-2" method="get" action="/hdfs/download">
<input type="hidden" name="path" value="{{path}}">
<button class="btn btn-primary">下载</button>
</form>
<form class="d-inline-block mr-2" method="post" action="/hdfs/delete">
<input type="hidden" name="path" value="{{path}}">
<button class="btn btn-danger">删除</button>
</form>
{{/unless}}
</td>
</tr>
{{/each}}
</tbody>
</table>
<form method="post" action="/hdfs/upload" enctype="multipart/form-data">
<div class="form-group">
<label>上传文件</label>
<div class="custom-file">
<input type="file" class="custom-file-input" name="file">
<label class="custom-file-label">选择文件</label>
</div>
</div>
<div class="form-group">
<label>上传路径</label>
<input type="text" class="form-control" name="path" placeholder="请输入上传路径">
</div>
<button type="submit" class="btn btn-primary">上传</button>
</form>
</div>
</body>
<script>
$(function () {
$('.custom-file-input').on('change', function () {
var fileName = $(this).val().split('\\').pop();
$(this).next('.custom-file-label').html(fileName);
});
});
</script>
</html>
```
2. JavaScript代码
```javascript
// Handlebars模板
var template = Handlebars.compile($('#file-list-template').html());
// 获取文件列表
function getFileList(path) {
$.get('/hdfs/list', {path: path}, function (data) {
var html = template({path: path, files: data});
$('#file-list').html(html);
});
}
// 上传文件
function upload() {
var formData = new FormData($('#upload-form')[0]);
$.ajax({
url: '/hdfs/upload',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function () {
getFileList($('#path-input').val());
}
});
}
// 删除文件或目录
function remove(path) {
$.post('/hdfs/delete', {path: path}, function () {
getFileList($('#path-input').val());
});
}
// 创建目录
function mkdir() {
$.post('/hdfs/mkdir', {path: $('#path-input').val()}, function () {
getFileList($('#path-input').val());
});
}
$(function () {
// 页面加载时获取根目录下的文件列表
getFileList('/');
// 上传文件表单中文件选择框的显示
$('.custom-file-input').on('change', function () {
var fileName = $(this).val().split('\\').pop();
$(this).next('.custom-file-label').html(fileName);
});
// 点击返回上一级按钮
$(document).on('submit', '#parent-form', function (e) {
e.preventDefault();
getFileList($(this).find('input[name=path]').val());
});
// 点击文件名或目录名
$(document).on('click', 'a', function (e) {
e.preventDefault();
getFileList($(this).attr('href'));
});
// 点击下载按钮
$(document).on('submit', '#download-form', function (e) {
e.preventDefault();
window.open('/hdfs/download?path=' + $(this).find('input[name=path]').val());
});
// 点击删除按钮
$(document).on('submit', '#delete-form', function (e) {
e.preventDefault();
if (confirm('确定要删除吗?')) {
remove($(this).find('input[name=path]').val());
}
});
// 点击上传按钮
$(document).on('submit', '#upload-form', function (e) {
e.preventDefault();
upload();
});
// 点击创建目录按钮
$(document).on('click', '#mkdir-btn', function () {
mkdir();
});
});
```