UserCenter.js

src/main/resources/static/js/UserCenter.js

+// userTable.js
+
+// 动态加载用户数据
+async function loadUsers() {
+    try {
+        const response = await fetch('/api/users'); // 确保后端提供了此 API
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const users = await response.json();
+
+        // 获取表格的 tbody 元素
+        const tbody = document.querySelector('tbody');
+        tbody.innerHTML = ''; // 清空旧的数据
+
+        // 遍历用户数据并生成表格行
+        users.forEach(user => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${user.id}</td>
+                <td>${user.username}</td>
+                <td>${user.email}</td>
+                <td>
+                    <a href="/users/edit/${user.id}">Edit</a>
+                    <a href="/users/delete/${user.id}">Delete</a>
+                </td>
+            `;
+            tbody.appendChild(row);
+        });
+    } catch (error) {
+        console.error('Error loading users:', error);
+        const tbody = document.querySelector('tbody');
+        tbody.innerHTML = `<tr><td colspan="4">Failed to load user data.</td></tr>`;
+    }
+}
+
+// 等页面加载完成后执行加载操作
+document.addEventListener('DOMContentLoaded', loadUsers);