本文详解如何在网页初始化时通过 get 请求从 express + postgresql 后端拉取数据，并动态填充 html 表格，实现“页面一打开就显示最新数据”的完整流程，含代码示例、关键注意事项与最佳实践。
本文详解如何在网页初始化时通过 get 请求从 express + postgresql 后端拉取数据，并动态填充 html 表格，实现“页面一打开就显示最新数据”的完整流程，含代码示例、关键注意事项与最佳实践。
在构建全栈应用时，仅实现表单提交（POST）是不够的——用户首次访问页面时，必须看到已存在的数据。这正是 GET 请求的核心作用：在 DOM 加载完成时主动拉取服务端数据，并动态渲染到表格中。你已成功实现 POST 写入逻辑，现在只需补充“读取 → 解析 → 渲染”闭环，即可让表格真正“活起来”。
✅ 正确的 GET 请求时机与写法
不应将 GET 请求嵌套在 form.submit 事件中（如你注释掉的那段代码），而应在页面加载完成后立即发起。使用 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}: ${response.statusText}`);
const rows = await response.json();
renderTableData(rows);
} catch (err) {
console.error('❌ 获取表格数据失败：', err);
// 可选：向用户展示友好提示（如 <div id="error">加载失败，请重试</div>）
}
});✅ 动态渲染表格的可靠方法
避免手动拼接 HTML 字符串（易出错、难维护）。推荐清空 <tbody> 后逐行插入 <tr>，同时严格匹配后端字段名（注意：你的后端 SQL 查询返回的是 mine_info 表全部列，但 createRow 中解构的字段名与数据库列名不一致，需统一！）：
function renderTableData(data) {
const tableBody = document.querySelector('#mine_info tbody') ||
document.querySelector('#mine_info').insertAdjacentElement('beforeend', document.createElement('tbody'));
// 清空现有内容（保留表头）
tableBody.innerHTML = '';
data.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></td>
<td><p>${row.full_name_of_direcor || ''}</p></td>
<td><p>${row.phone_number || ''}</p></td>
`;
tableBody.appendChild(tr);
});
}? 关键提醒：你的后端 createRow 函数中解构的字段名为 n_mine, name_mine, adress, full_name_of_direcor, phone_number，请确保数据库表 mine_info 的列名与之一致（例如 adress 而非 address）。否则 GET 返回的数据字段将为 undefined，导致渲染空白。
立即学习“前端免费学习笔记（深入）”；
✅ POST 成功后实时更新表格（无需刷新）
你当前的 POST 逻辑在提交后关闭弹窗，但未刷新表格——用户看不到新数据。优化方案：POST 成功后，直接调用 renderTableData 重新拉取最新数据（比手动追加 <tr> 更安全，避免客户端状态与数据库不一致）：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form).entries());
try {
const postResponse = await fetch('http://my_data:3000/mine_info/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!postResponse.ok) throw new Error('POST 失败');
// ✅ 关键改进：POST 成功后，立即重新 GET 并渲染
const getResponse = await fetch('http://my_data:3000/mine_info');
const updatedRows = await getResponse.json();
renderTableData(updatedRows);
} catch (err) {
console.error('⚠️ 提交或刷新数据时出错：', err);
} finally {
form.classList.remove('open');
popup.classList.remove('popup_open');
}
});⚠️ 必须检查的 3 个常见陷阱
- CORS 配置：确保后端 app.use(cors()) 在所有路由注册之前，且浏览器控制台无 CORS policy 报错；
- HTML 结构兼容性：你当前的 <table> 没有 <tbody>，renderTableData 会自动创建，但建议在 HTML 中显式添加 <tbody> 以符合语义化标准；
- 字段名一致性：前后端字段名必须完全匹配（大小写敏感！）。例如后端返回 n_mine，前端就不能写 row.n_m。
✅ 总结：数据流闭环图
页面加载 → DOMContentLoaded → GET /mine_info → 渲染表格 ↑ ↓ 用户点击“Open form” → 填写 → 点击“Send to DB” → POST /mine_info → 重新 GET → 更新表格
至此，你的应用具备了完整的 CRUD 基础能力：数据可查、可增、可实时同步。这是全栈开发的第一块坚实基石——后续可轻松扩展编辑、删除、分页等功能。保持这种“请求-响应-渲染”的清晰思维，复杂应用也将变得可掌控。
