|
|
@@ -0,0 +1,210 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>文件管理系统</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ margin: 0;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ color: #555;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ list-style-type: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ background: #fff;
|
|
|
+ margin: 5px 0;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ background-color: #28a745;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ }
|
|
|
+ button:hover {
|
|
|
+ background-color: #218838;
|
|
|
+ }
|
|
|
+ input[type="file"], input[type="text"] {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .upload-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .page-button {
|
|
|
+ margin: 0 5px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #007bff;
|
|
|
+ color: white;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ }
|
|
|
+ .page-button:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+ .button-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<h1>文件管理系统</h1>
|
|
|
+<h2>当前文件列表</h2>
|
|
|
+
|
|
|
+<input type="text" id="searchInput" placeholder="搜索文件..." />
|
|
|
+<button onclick="searchFiles()">搜索</button>
|
|
|
+
|
|
|
+<ul id="fileList"></ul>
|
|
|
+
|
|
|
+<div class="pagination" id="pagination"></div>
|
|
|
+
|
|
|
+<div class="upload-container">
|
|
|
+ <input type="file" id="fileInput" />
|
|
|
+ <button onclick="uploadFile()">上传文件</button>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ let currentPage = 0;
|
|
|
+ const pageSize = 6;
|
|
|
+
|
|
|
+ function loadFileList() {
|
|
|
+ fetch(`/api/files?page=${currentPage}&size=${pageSize}`)
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(files => {
|
|
|
+ const fileList = document.getElementById('fileList');
|
|
|
+ fileList.innerHTML = '';
|
|
|
+ files.forEach(file => {
|
|
|
+ const li = document.createElement('li');
|
|
|
+ li.innerHTML = `${file}
|
|
|
+ <div class="button-container">
|
|
|
+ <button onclick="downloadFile('${file}')">下载</button>
|
|
|
+ <button onclick="deleteFile('${file}')">删除</button>
|
|
|
+ </div>`;
|
|
|
+ fileList.appendChild(li);
|
|
|
+ });
|
|
|
+ loadPagination();
|
|
|
+ })
|
|
|
+ .catch(error => console.error('Error:', error));
|
|
|
+ }
|
|
|
+
|
|
|
+ function uploadFile() {
|
|
|
+ const fileInput = document.getElementById('fileInput');
|
|
|
+ const file = fileInput.files[0];
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ fetch('/api/files/upload', {
|
|
|
+ method: 'POST',
|
|
|
+ body: formData
|
|
|
+ })
|
|
|
+ .then(response => response.text())
|
|
|
+ .then(text => {
|
|
|
+ alert(text);
|
|
|
+ loadFileList();
|
|
|
+ fileInput.value = '';
|
|
|
+ })
|
|
|
+ .catch(error => console.error('Error:', error));
|
|
|
+ }
|
|
|
+
|
|
|
+ function downloadFile(filename) {
|
|
|
+ window.location.href = '/api/files/download/' + filename;
|
|
|
+ }
|
|
|
+
|
|
|
+ function deleteFile(filename) {
|
|
|
+ if (confirm(`确定要删除文件 ${filename} 吗?`)) {
|
|
|
+ fetch(`/api/files/delete/${filename}`, {
|
|
|
+ method: 'DELETE'
|
|
|
+ })
|
|
|
+ .then(response => response.text())
|
|
|
+ .then(text => {
|
|
|
+ alert(text);
|
|
|
+ loadFileList();
|
|
|
+ })
|
|
|
+ .catch(error => console.error('Error:', error));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function searchFiles() {
|
|
|
+ const searchQuery = document.getElementById('searchInput').value;
|
|
|
+ fetch(`/api/files?search=${searchQuery}&page=0&size=${pageSize}`)
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(files => {
|
|
|
+ const fileList = document.getElementById('fileList');
|
|
|
+ fileList.innerHTML = '';
|
|
|
+ files.forEach(file => {
|
|
|
+ const li = document.createElement('li');
|
|
|
+ li.innerHTML = `${file}
|
|
|
+ <div class="button-container">
|
|
|
+ <button onclick="downloadFile('${file}')">下载</button>
|
|
|
+ <button onclick="deleteFile('${file}')">删除</button>
|
|
|
+ </div>`;
|
|
|
+ fileList.appendChild(li);
|
|
|
+ });
|
|
|
+ currentPage = 0;
|
|
|
+ loadPagination();
|
|
|
+ })
|
|
|
+ .catch(error => console.error('Error:', error));
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadPagination() {
|
|
|
+ const pagination = document.getElementById('pagination');
|
|
|
+ pagination.innerHTML = '';
|
|
|
+ const prevButton = document.createElement('button');
|
|
|
+ prevButton.innerHTML = '上一页';
|
|
|
+ prevButton.classList.add('page-button');
|
|
|
+ prevButton.onclick = () => {
|
|
|
+ if (currentPage > 0) {
|
|
|
+ currentPage--;
|
|
|
+ loadFileList();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ pagination.appendChild(prevButton);
|
|
|
+
|
|
|
+ const nextButton = document.createElement('button');
|
|
|
+ nextButton.innerHTML = '下一页';
|
|
|
+ nextButton.classList.add('page-button');
|
|
|
+ nextButton.onclick = () => {
|
|
|
+ currentPage++;
|
|
|
+ loadFileList();
|
|
|
+ };
|
|
|
+ pagination.appendChild(nextButton);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 页面加载时加载文件列表
|
|
|
+ loadFileList();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|