Express/NodeJS单路由多MySQL查询：单文章页如何展示文章与推荐文章

架构老林

2026-5-25

嘿，这个问题我太熟了！你遇到的核心问题其实是Express里res.render只能调用一次——因为它会直接发送HTTP响应，多次调用就会触发报错。最优解决方案就是把所有需要的数据（当前文章+推荐文章）一次性准备好，然后只调用一次res.render，具体怎么做我给你拆解清楚：

核心思路

不要分开获取数据再多次渲染，而是并行获取当前文章和推荐文章的所有数据，合并后一次性传给模板，让模板负责分别渲染两个部分。这样既避免了重复渲染的问题，还能通过并行查询提升接口性能。

具体实现步骤

1. 把数据库查询包装成Promise（如果原来用回调的话）

如果你的数据库操作是基于回调的（比如mysql的connection.query），先把它们包装成Promise，这样就能用async/await或者Promise.all来并行处理：

// 封装获取单篇文章的函数
function getArticleBySlug(slug) {
  return new Promise((resolve, reject) => {
    connection.query('SELECT * FROM articles WHERE slug = ?', [slug], (err, results) => {
      if (err) return reject(err);
      // 取查询结果的第一条（因为slug是唯一的）
      resolve(results[0]);
    });
  });
}

// 封装获取推荐文章的函数（这里示例取最新2篇，可根据需求调整排序逻辑）
function getRecommendedArticles(limit, excludeSlug) {
  return new Promise((resolve, reject) => {
    // 排除当前文章，避免推荐自己
    const query = excludeSlug 
      ? 'SELECT * FROM articles WHERE slug != ? ORDER BY created_at DESC LIMIT ?'
      : 'SELECT * FROM articles ORDER BY created_at DESC LIMIT ?';
    const params = excludeSlug ? [excludeSlug, limit] : [limit];
    
    connection.query(query, params, (err, results) => {
      if (err) return reject(err);
      resolve(results);
    });
  });
}

2. 在路由中并行获取数据，一次性渲染模板

用async/await让代码更清晰，同时用Promise.all并行执行两个查询，比串行查询更快：

router.get('/*', async function(req, res, next) {
  try {
    const slug = req.url.replace(/^\//,'').replace(/\/$/,'');
    const bg = getRandomInt(5);

    if (slug === '') {
      // 首页的逻辑，保留你原来的代码即可
      connection.query(...);
    } else {
      // 并行获取当前文章和推荐文章
      const [currentArticle, recommendedArticles] = await Promise.all([
        getArticleBySlug(slug),
        getRecommendedArticles(2, slug) // 传入当前slug，排除自己
      ]);

      // 一次性把所有数据传给模板，只调用一次res.render
      res.render('article', {
        bg,
        article: currentArticle,
        recommended: recommendedArticles
      });
    }
  } catch (err) {
    // 捕获错误，交给Express的错误中间件处理
    next(err);
  }
});

3. 在模板中分别渲染内容

以EJS模板为例，你可以在模板里分别处理当前文章和推荐文章的渲染：

<!-- 渲染当前文章主体 -->
<div class="article-main">
  <h1><%= article.title %></h1>
  <div class="article-meta">发布于 <%= article.created_at.toLocaleString() %></div>
  <div class="article-content"><%- article.content %></div>
</div>

<!-- 渲染推荐文章区域 -->
<div class="recommended-section">
  <h3>推荐阅读</h3>
  <div class="recommended-list">
    <% recommended.forEach(item => { %>
      <a href="/<%= item.slug %>" class="recommended-item">
        <h4><%= item.title %></h4>
        <p class="item-excerpt"><%= item.excerpt || item.content.slice(0, 100) %>...</p>
      </a>
    <% }) %>
  </div>
</div>

额外注意点

错误处理：一定要用try/catch捕获异步操作的错误，交给next(err)处理，避免请求挂起或者崩溃。
推荐逻辑优化：你可以根据博客需求调整推荐文章的查询规则，比如按浏览量、点赞数排序，或者根据文章标签关联推荐，而不是单纯按时间排序。
模板兼容性：如果用的是Pug、Handlebars等其他模板引擎，语法逻辑是一样的，只需要调整模板渲染的语法即可。

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