前端页面加载时自动获取并渲染数据库数据的完整实践指南-html教程-PHP中文网

前端页面加载时自动获取并渲染数据库数据的完整实践指南

本文详解如何在网页加载完成后，通过 javascript 发起 get 请求从 express + postgresql 后端拉取数据，并动态渲染到 html 表格中，实现“页面即数据”的实时展示效果。

本文详解如何在网页加载完成后，通过 javascript 发起 get 请求从 express + postgresql 后端拉取数据，并动态渲染到 html 表格中，实现“页面即数据”的实时展示效果。

在完成表单提交（POST）功能后，你自然会面临一个关键问题：如何让页面一打开就显示数据库中已有的全部记录？ 答案正是——在 DOM 加载完毕后立即发起一次 GET /mine_info 请求，并将返回的 JSON 数据解析、生成

行，追加至你的中。这不仅提升用户体验，也是前后端分离开发中的标准实践。

✅ 正确的 GET 请求时机与位置

你不应在表单 submit 事件中嵌套 GET（如注释掉的那段代码），因为那会导致：

提交成功后才去拉数据，用户无法即时看到新增行；
若 GET 失败，界面状态与数据库不一致；
逻辑耦合，违背“关注点分离”原则。

✅ 正确做法是：在页面初始化阶段独立执行 GET 请求。 使用 DOMContentLoaded 事件确保 DOM 就绪后再发起请求：

// script.js —— 新增：页面加载后自动获取并渲染数据
document.addEventListener("DOMContentLoaded", async () => {
  try {
    const response = await fetch('http://my_data:3000/mine_info');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const rows = await response.json();
    const tableBody = document.querySelector('#mine_info tbody') || 
                      document.querySelector('#mine_info');

    // 清空现有数据行（保留表头）
    Array.from(tableBody.children).forEach(el => {
      if (el.tagName === 'TR' && el.children[0]?.textContent !== '№') {
        el.remove();
      }
    });

    // 动态插入新行（假设后端返回字段为：id, n_mine, name_mine, adress, full_name_of_direcor, phone_number）
    rows.forEach((row, index) => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td><p>${index + 1}</p></td>
        <td><p>${row.n_mine || ''}</p></td>
        <td><p>${row.name_mine || ''}</p></td>
        <td><p>${row.adress || ''}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill"><img
														src="https://img.php.cn/upload/skill/000/000/081/179163003435961.jpg" alt="前端设计优化skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill" class="overflowclass">前端设计优化skill</a>
													<p class="overflowclass">前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></td>
        <td><p>${row.full_name_of_direcor || ''}</p></td>
        <td><p>${row.phone_number || ''}</p></td>
      `;
      tableBody.appendChild(tr);
    });
  } catch (error) {
    console.error('Failed to load mine info:', error);
    // 可选：在页面显示友好提示，如：<div class="alert">加载失败，请重试</div>
  }
});

⚠️ 注意事项：

确保后端 /mine_info 接口已正确暴露且 CORS 已配置（你已在 app.use(cors()) 中启用，很好）；

前端请求 URL 必须与后端服务地址完全一致（如 http://my_data:3000 → 确认该域名/DNS 可解析，或改用 http://localhost:3000 进行本地调试）；

表格结构需支持动态插入：建议为

显式添加 id="mine_info_body"，便于精准操作；若无，则直接操作

的子 tr 元素（如上例所示）；

字段名需严格匹配后端返回的 JSON 键名（例如你后端 SELECT * 返回的是 n_mine 而非 N_m，务必核对）。

? POST 后的优雅刷新策略（进阶推荐）

虽然页面加载时 GET 已解决初始数据问题，但用户提交新数据后，表格应无需整页刷新即可更新。你可在 form.submit 成功回调中，复用同一 GET 逻辑重新拉取最新数据，实现无缝刷新：

// 在 form.submit 的 try 块末尾添加：
await fetch('http://my_data:3000/mine_info')
  .then(r => r.json())
  .then(renderTable); // 将上面的渲染逻辑封装为 renderTable(rows) 函数

// 然后调用它：
function renderTable(rows) {
  const tableBody = document.querySelector('#mine_info tbody') || document.querySelector('#mine_info');
  // ...（同上渲染逻辑）
}

这样，用户点击“Send to DB”后，页面保持当前状态，表格瞬间更新，体验更接近现代单页应用（SPA）。