HTML商店项目如何动态读取数据库商品数据渲染商品卡片

不要用response.write直接拼接整页HTML输出，这类写法极易出现标签转义错误、结构不匹配问题，将数据读取和页面渲染逻辑拆分即可实现需求，具体实现步骤如下：

实现流程 #

• 服务端提供纯数据接口
  单独写一个查询接口从items数据表拉取全量商品，仅返回JSON格式的结构化数据，不拼接任何HTML内容。以Node.js服务端为例，核心逻辑如下：

  // 路由：/api/goods
  async function fetchAllItems(req, res) {
    // 查询items表中所有商品的logo、名称、价格、描述字段
    const itemList = await db.query('SELECT logo, name, price, description FROM items')
    res.writeHead(200, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify(itemList))
  }
  

• 主页预置渲染容器与基础样式
  商店主页HTML中预留空的商品容器节点，提前写好商品卡片的通用样式，不硬编码任何单条商品信息：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>线上商店首页</title>
    <style>
      .goods-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
      }
      .item-card {
        width: 260px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        overflow: hidden;
        padding: 12px;
      }
      .item-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .price {
        color: #ff4200;
        font-size: 18px;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h1 style="padding: 0 20px;">全部商品</h1>
    <!-- 商品卡片将全部动态插入这个容器 -->
    <div class="goods-wrap" id="goodsContainer"></div>
  </body>
  </html>
  

• 前端动态拉取数据渲染卡片
  页面加载后自动请求商品数据接口，遍历返回的商品列表生成对应卡片节点插入容器，数据库中存在多少条商品就自动渲染多少张卡片，无数据时自动不展示内容：

  async function renderGoods() {
    const container = document.getElementById('goodsContainer')
    // 请求商品数据
    const resp = await fetch('/api/goods')
    const itemList = await resp.json()
    // 遍历生成卡片
    itemList.forEach(item => {
      const card = document.createElement('div')
      card.className = 'item-card'
      card.innerHTML = `
        <img src="${item.logo}" alt="${item.name}">
        <h4>${item.name}</h4>
        <p class="price">¥${item.price}</p>
        <p>${item.description}</p>
      `
      container.appendChild(card)
    })
  }
  // 页面加载完成后触发渲染
  window.addEventListener('DOMContentLoaded', renderGoods)
  

原有response.write方案失效原因 #

直接在服务端通过response.write逐段拼接HTML字符串的写法容错率极低，只要某条商品的名称、描述字段中包含引号、尖括号这类特殊字符，就会导致HTML结构错乱、页面渲染失败。将数据接口和前端渲染逻辑拆分后，不仅能从根源避免这类问题，后续调整卡片样式、新增交互逻辑时也无需修改服务端代码，维护成本更低。

内容的提问来源于stack exchange，提问作者imanuel ben chaim