<!DOCTYPE
html>
<
html lang="zh-CN" xmlns
:th="http
://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件管理 - Hadoop-JavaEE</title>
<link href="https
://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h2>文件管理
<small class="text-muted" id="currentPathDisplay">/</small>
</h2>
<hr>
<!-- 消息显示：基于URL参数，增加默认文本 -->
<div th
:if="${param.success}" class="alert alert-success" th
:text="${param.success ?
: '操作成功'}"></div>
<div th
:if="${param.error}" class="alert alert-danger" th
:text="${param.error ?
: '操作失败'}"></div>
<!-- 创建目录：表单action改为Thymeleaf
语法 -->
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">创建目录</h5>
<form method="post" th
:action="@{/file/mkdir}">
<div class="input-group">
<input type="text" name="path" class="form-control" placeholder="例如：/testDir">
<button type="submit" class="btn btn-primary">创建</button>
</div>
</form>
</div>
</div>
<!-- 上传文件：修复隐藏域的路径传递 + 表单action -->
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">上传文件</h5>
<form method="post" th
:action="@{/file/upload}" enctype="multipart/form-data">
<div class="input-group">
<input type="file" name="file" class="form-control" required>
<input type="hidden" name="hdfsDir" id="hdfsDir" value="/">
<button type="submit" class="btn btn-success">上传</button>
</div>
</form>
</div>
</div>
<!-- 文件列表：修复fileList空值 + file变量解析 + 链接参数 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">文件列表</h5>
<table class="table table-striped">
<thead>
<tr>
<th>文件名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 给fileList加空列表兜底，消除未定义提示 -->
<tr th
:each="file
: ${fileList ?
: #lists.emptyList
()}">
<td th
:text="${file ?
: '未知文件'}">文件名</td>
<td>
<!-- 使用Thymeleaf参数
语法拼接路径，避免字符串拼接错误 -->
<a th
:href="@{/file/download
(path=/${'/' + file}
)}" class="btn btn-sm btn-info">下载</a>
<a th
:href="@{/file/delete
(path=/${'/' + file}
)}" class="btn btn-sm btn-danger" onclick="return confirm
('确定删除？'
)">删除</a>
</td>
</tr>
<!-- 空列表判断：覆盖fileList为null/空的场景 -->
<tr th
:if="${#lists.isEmpty
(fileList ?
: #lists.emptyList
())}">
<td colspan="2" class="text-center text-muted">暂无文件</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-3">
<!-- 返回首页改为Thymeleaf
语法 -->
<a th
:href="@{/}" class="btn btn-secondary">返回首页</a>
</div>
</div>
<script>
// 使用JavaScript处理路径显示
document.addEventListener
('DOMContentLoaded', function
() {
const urlParams = new URLSearchParams
(window.location.search
);
const path = urlParams.get
('path'
);
if
(path
) {
document.getElementById
('currentPathDisplay'
).textContent = path;
}
// 更新隐藏字段
const hdfsDirInput = document.getElementById
('hdfsDir'
);
hdfsDirInput.value = path || '/';
}
);
</script>
</body>
</
html>对该代码错误的地方进行调整
本文介绍了HTML中的两个常用标签：<a> 和 <dir> 的定义及用法。<a> 标签用于创建超链接，<dir> 标签则用于定义目录列表。
扫一扫
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
