Node.js Express：如何不跳转页面动态渲染文章模型数据？

没问题，这需求核心就是做无刷新的文章详情加载，不用跳转到新路由，直接在当前文章的div里更新内容。咱们分后端接口和前端交互两部分来实现，下面是具体步骤和代码示例：

第一步：后端新增API接口（用于获取单篇文章数据） #

首先你需要新增一个API路由，用来根据文章ID返回JSON格式的文章数据，这样前端不用跳转页面就能拿到数据。假设你用的是Express框架，代码大概是这样：

// 假设你的articleModel是Mongoose模型或者类似的ORM模型
app.get('/api/articles/:id', async (req, res) => {
  try {
    const article = await articleModel.findById(req.params.id);
    if (!article) {
      return res.status(404).json({ message: '文章不存在' });
    }
    // 返回文章的title和body字段
    res.json({ title: article.title, body: article.body });
  } catch (err) {
    res.status(500).json({ message: '服务器错误' });
  }
});

这个接口的作用就是接收文章ID，返回对应的title和body，供前端异步请求使用。

第二步：前端修改视图和添加交互逻辑 #

原来的视图里，你已经有了每个文章对应的div和锚标签，现在需要给这些元素加一些标识，然后绑定点击事件来实现无刷新加载。

调整后的HTML结构示例 #

<!-- 假设这是你渲染文章列表的循环部分（比如用EJS/Handlebars等模板引擎） -->
<% articles.forEach(article => { %>
  <div class="article-item" data-article-id="<%= article._id %>">
    <!-- 把原来的锚标签href设为#或者javascript:void(0)，或者后续阻止默认跳转 -->
    <a href="#" class="article-title-link"><%= article.title %></a>
    <!-- 预留一个容器用来显示文章内容，初始可以隐藏或者为空 -->
    <div class="article-content" style="display: none;"></div>
  </div>
<% }) %>

前端JavaScript交互代码 #

// 给所有文章标题链接绑定点击事件
document.querySelectorAll('.article-title-link').forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止锚标签的默认跳转行为
    e.preventDefault();
    
    // 获取当前文章的ID（从父元素的data属性里取）
    const articleId = link.closest('.article-item').dataset.articleId;
    // 获取用来显示内容的容器
    const contentContainer = link.closest('.article-item').querySelector('.article-content');
    
    try {
      // 发送异步请求到刚才的API接口
      const response = await fetch(`/api/articles/${articleId}`);
      if (!response.ok) {
        throw new Error('请求失败');
      }
      const articleData = await response.json();
      
      // 更新容器里的内容
      contentContainer.innerHTML = `
        <h3>${articleData.title}</h3>
        <p>${articleData.body}</p>
      `;
      // 显示内容容器（如果之前是隐藏的）
      contentContainer.style.display = 'block';
    } catch (err) {
      // 处理错误，比如显示提示
      contentContainer.innerHTML = '<p>加载文章失败，请重试</p>';
      contentContainer.style.display = 'block';
    }
  });
});

关键细节说明 #

• 阻止默认跳转：必须用e.preventDefault()阻止锚标签的默认跳转行为，不然页面还是会跳转到#或者其他地址。
• data属性的使用：用data-article-id存储文章ID，方便快速获取，比直接把ID写在href里更优雅。
• 异步请求：用fetch API发送异步请求，也可以用axios等库，逻辑是一样的。
• DOM更新：拿到数据后直接修改对应div的innerHTML，实现动态渲染。
• 状态处理：记得处理请求失败的情况，给用户友好的提示。

这样修改后，用户点击文章标题时，就会在当前div里动态加载并显示文章的title和body，完全不用跳转到新的路由页面啦！

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