如何用JS和Node从MySQL获取指定笔记并渲染到前端模态框

你的代码存在三个核心问题：前端未传递笔记ID给后端、后端未正确接收ID参数、未将响应数据渲染到模态框。以下是分步修复方案：

1. 前端修正：传递ID并渲染笔记内容 #

修改点击事件的Fetch逻辑，获取按钮绑定的笔记ID，请求后端获取完整笔记后渲染到模态框：

document.querySelectorAll('.noteViewModalBtn').forEach(item => {
  item.addEventListener('click', async event => {
    // 获取当前按钮对应的笔记ID
    const noteId = event.target.id;
    const modalContent = document.querySelector('.noteViewModalContent');
    try {
      // 通过URL参数传递笔记ID，发送GET请求
      const res = await fetch(`http://localhost:8080/note/${noteId}`);
      if (!res.ok) throw new Error('加载失败');
      // 解析后端返回的笔记数据（getNote返回数组，取第一个元素）
      const [note] = await res.json();
      // 将完整笔记渲染到模态框
      modalContent.innerHTML = `
        <h2>${note.title}</h2>
        <div class="full-note-body">${note.body}</div>
      `;
      // 显示模态框
      noteViewModal.style.display = "flex";
    } catch (err) {
      console.error(err);
      modalContent.innerHTML = '<p>无法加载该笔记，请稍后重试</p>';
      noteViewModal.style.display = "flex";
    }
  });
});

2. 后端路由修正：接收并使用ID参数 #

改用RESTful风格的URL接收笔记ID，同时添加错误处理逻辑：

// 通过URL参数`:id`接收笔记ID
app.get("/note/:id", checkNotAuthenticated, async(req, res) =>{  
  try {
    const noteId = req.params.id;
    const note = await getNote(noteId);
    // 处理笔记不存在的情况
    if (note.length === 0) {
      return res.status(404).json({ message: "笔记不存在" });
    }
    res.json(note);
  } catch (err) {
    console.error('获取笔记出错:', err);
    res.status(500).json({ message: "服务器内部错误" });
  }
});

3. EJS模板修正：规范按钮ID语法 #

给按钮的id属性添加引号，避免HTML语法错误：

<li>
  <p><%= note.body.substring(0, 250) %> <span class="noteViewModalBtn" id="<%= note.NoteId %>">...</span></p>
</li>

4. 可选：添加模态框关闭逻辑 #

如果还没实现关闭功能，补充以下代码：

// 关闭按钮点击事件（假设关闭按钮id为closeModal）
document.getElementById('closeModal').addEventListener('click', () => {
  noteViewModal.style.display = "none";
});
// 点击模态框外部关闭
window.addEventListener('click', e => {
  if (e.target === noteViewModal) {
    noteViewModal.style.display = "none";
  }
});

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