前端数据按需加载策略：利用两次API调用实现用户详情动态展示

<table id="table">
    <thead>
        <tr>
            <th colspan="3">用户姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 用户列表将在此处动态生成 -->
    </tbody>
</table>

<!-- 用于显示用户详情的对话框 -->
<dialog id="dialog"></dialog>

const table = document.getElementById('table');
const dialog = document.getElementById('dialog'); // 获取对话框元素

window.addEventListener("DOMContentLoaded", async () => {
    try {
        // 1. 发起第一次API请求，获取用户列表
        const response = await fetch('/api/users');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const users = await response.json();

        // 如果没有用户数据，则直接返回
        if (!users || users.length === 0) {
            console.warn("No users found.");
            return;
        }

        // 使用DocumentFragment优化DOM操作，避免频繁重绘
        const fragment = document.createDocumentFragment();

        // 遍历用户数据，动态创建表格行
        for (const user of users) {
            if (!user || !user.id || !user.name) continue; // 确保数据有效性

            const row = document.createElement('tr');
            row.innerHTML = `
                <td colspan="3">${user.name}</td>
                <td>
                    <button onclick="fetchUserById(this)" class="more" data-id="${user.id}">
                        <span class="material-symbols-outlined">visibility</span>
                    </button>
                </td>
            `;
            fragment.appendChild(row);
        }

        // 将所有行一次性添加到表格的tbody中
        table.querySelector('tbody').appendChild(fragment);

    } catch (error) {
        console.error("Failed to load users:", error);
        // 可以根据需要在此处显示错误信息给用户
    }
});

async function fetchUserById(button) {
    // 1. 从按钮的data-id属性中获取用户ID
    const userId = button.dataset.id;
    if (!userId) {
        console.error("User ID not found on button.", button);
        return;
    }

    try {
        // 2. 发起第二次API请求，获取单个用户详情
        const response = await fetch(`/api/user/${userId}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const userDetails = await response.json();

        // 如果之前对话框已打开，先关闭
        dialog.close();

        // 3. 将获取到的用户详情渲染到对话框中
        dialog.innerHTML = `
            <h2>${userDetails.name} 的详细信息</h2>
            <p><strong>邮箱:</strong> ${userDetails.email || 'N/A'}</p>
            <p><strong>性别:</strong> ${userDetails.gender || 'N/A'}</p>
            <p><strong>状态:</strong> ${userDetails.status || 'N/A'}</p>
            <p><strong>其他信息:</strong> ${userDetails.otherInfo || 'N/A'}</p>
            <button onclick="dialog.close()">关闭</button>
        `;

        // 4. 打开对话框
        dialog.showModal(); // showModal() 会创建一个模态对话框，阻止用户与对话框外的元素交互
    } catch (error) {
        console.error(`Failed to fetch details for user ${userId}:`, error);
        // 可以显示一个错误提示给用户
        alert(`加载用户详情失败：${error.message}`);
    }
}