如何在NodeJS+EJS多页面渲染同ID商品（MySQL数据源）

1. 重构商品数据获取逻辑（减少重复代码） #

当前每个路由都新建数据库连接的方式既低效又冗余，先把商品数据获取逻辑抽成独立函数，同时改用数据库连接池优化性能：

// 在文件顶部初始化数据库连接池
const mysql = require('mysql');
const pool = mysql.createPool({
  host: process.env.HOST,
  user: process.env.USER,
  password: process.env.PASSWORD,
  database: process.env.DATABASE
});

// 封装获取商品数据的通用函数
function getProducts(callback) {
  pool.query('SELECT * FROM products', callback);
}

2. 给About和Services路由传递商品数据 #

修改路由配置，让/about和/services页面也调用上述函数获取商品数据，并传递给对应EJS模板：

// 首页路由（简化版）
app.get('/', function(req, res){
  getProducts(function(err, result){
    if(err) throw err;
    res.render('index', {result: result});
  });
});

// About页面路由
app.get('/about', function(req, res){
  getProducts(function(err, result){
    if(err) throw err;
    res.render('about', {result: result});
  });
});

// Services页面路由
app.get('/services', function(req, res){
  getProducts(function(err, result){
    if(err) throw err;
    res.render('services', {result: result});
  });
});

3. 复用EJS渲染代码（避免重复写循环） #

把商品卡片的循环代码抽成EJS局部模板，比如创建views/partials/productList.ejs：

<% if(result && result.length > 0) { %>
  <% result.forEach(function(product){ %>
    <div class="product_card col-lg-3">
        <img src="images/<%= product.image %>">
        <div class="product_content">
            <p><%= product.name %></p>
            <h5>£<%= product.price %></h5>
            <a href="/singleproduct/<%= product.id %>" role="button">View</a>
        </div>
    </div>
  <% }) %>
<% } %>

之后在index.ejs、about.ejs、services.ejs需要展示商品的位置，直接引入这个局部模板即可：

<!-- 在页面对应位置插入 -->
<%- include('partials/productList') %>

核心说明 #

• 商品ID完全不需要修改：所有页面渲染的都是数据库中原始的商品数据，跳转详情页的链接会自动沿用正确ID。
• 连接池优化：相比每次新建连接，连接池能提升数据库操作的性能和稳定性。
• 局部模板复用：后续修改商品卡片样式时，只需更新一个文件，维护成本更低。

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