基于Node.js实现单页面内通过req.params.id向模态框插入匹配数据

Got it, let's walk through how to build this single-page modal functionality step by step—no more switching between pages to load user data! Here's how to tie your existing /timesheet route, MongoDB queries, and frontend interactions together:

1. 新增后端API：通过ID查询用户姓名 #

首先需要一个专门的接口，用来根据ID获取对应用户的姓名。假设你已经有一个MongoDB模型（命名为User，包含_id和name字段），在Express应用中添加以下代码：

const User = require('./models/User'); // 根据你的模型路径调整

// 根据ID获取用户姓名的接口
app.get('/api/user/:id', async (req, res) => {
  try {
    const user = await User.findById(req.params.id);
    if (!user) {
      return res.status(404).json({ message: '未找到该用户' });
    }
    res.json({ name: user.name });
  } catch (error) {
    res.status(500).json({ message: '获取用户数据失败' });
  }
});

2. 更新/timesheet路由：传递全量用户数据 #

修改你现有的/timesheet路由，从MongoDB获取所有用户数据，并传递给前端模板（这里以EJS为例，其他模板引擎逻辑类似）：

app.get("/timesheet", async (req, res) => {
  try {
    const allUsers = await User.find(); // 从数据库获取全量用户
    res.render("timesheet", { users: allUsers }); // 将数据传给模板渲染
  } catch (error) {
    res.status(500).send("加载工时表页面失败");
  }
});

3. 构建前端：按钮+模态框结构 #

在timesheet模板中，为每个用户渲染一个按钮（将用户ID存储为自定义属性），同时添加一个默认隐藏的模态框，用于展示姓名：

<!-- 渲染用户按钮 -->
<% users.forEach(user => { %>
  <button class="user-modal-btn" data-user-id="<%= user._id %>">
    查看<%= user.name %>的信息
  </button>
<% }) %>

<!-- 模态框结构 -->
<div id="userNameModal" class="modal">
  <div class="modal-inner">
    <button class="modal-close">&times;</button>
    <h3>用户姓名</h3>
    <p><strong>姓名：</strong> <span id="modalUserName"></span></p>
  </div>
</div>

给模态框添加基础CSS样式，让它正常显示：

/* 模态框基础样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-inner {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  width: 90%;
  max-width: 400px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

4. 添加交互逻辑：点击按钮加载数据到模态框 #

最后添加前端JavaScript，处理按钮点击事件、请求后端数据并填充模态框：

// 获取模态框相关元素
const modal = document.getElementById('userNameModal');
const modalUserName = document.getElementById('modalUserName');
const closeBtn = document.querySelector('.modal-close');

// 监听所有用户按钮的点击事件
document.querySelectorAll('.user-modal-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const userId = btn.getAttribute('data-user-id');
    
    try {
      // 请求后端API获取用户姓名
      const response = await fetch(`/api/user/${userId}`);
      const data = await response.json();
      
      // 更新模态框中的姓名
      modalUserName.textContent = data.name;
      // 显示模态框
      modal.style.display = 'flex';
    } catch (error) {
      console.error('获取用户数据失败:', error);
      modalUserName.textContent = '加载用户姓名失败';
      modal.style.display = 'flex';
    }
  });
});

// 点击关闭按钮隐藏模态框
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 点击模态框外部区域隐藏模态框
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

这样就完成啦！现在在/timesheet页面点击任意用户按钮，模态框就会弹出，通过按钮携带的ID匹配MongoDB中的数据，将对应姓名显示在模态框里——全程无需跳转到其他页面。

内容的提问来源于stack exchange，提问作者Mark White