如何连接动态HTML与MySQL实现无刷新动态更新页面数据

你需要的无页面重载更新内容、定时拉取数据的需求，用前端异步请求+Express提供静态资源与数据接口的方案即可完全实现，不需要依赖PHP，也不需要用Express模板做整页渲染，适配你当前的技术储备水平。 #

核心疑问对应解答 #

1. 不返回全新页面时，Node.js端数据传递到HTML的实现逻辑 #

放弃服务端模板整页输出的思路，将Node.js服务的路由拆分为两类，完全分离页面资源和数据返回逻辑：

• 静态资源路由：首次访问时返回固定的HTML、客户端JS、CSS文件，页面只加载一次
• 数据接口路由：仅返回JSON格式的数据库查询结果，不输出任何HTML内容
  触发查询时不需要跳转页面，由客户端JS发起异步请求拿到JSON数据，直接操作DOM更新表格内容即可，全程不会触发页面重载。

最小实现的服务端代码如下，先安装依赖：
npm i express mysql2

新建server.js作为服务端入口：

const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
// 配置静态资源目录，目录下的HTML、JS、CSS可被前端直接访问
app.use(express.static('public'));

// 替换为你自己的数据库连接参数
const dbConfig = {
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '你的存储测试数据的库名'
}

// 纯数据查询接口，仅返回JSON结果
app.get('/api/query-data', async (req, res) => {
  try {
    const conn = await mysql.createConnection(dbConfig);
    // 替换为你自己的业务查询SQL
    const [rows] = await conn.query('SELECT * FROM 你的测试数据表名');
    await conn.end();
    res.json({ code: 200, data: rows });
  } catch (err) {
    res.json({ code: 500, msg: '查询出错' });
  }
})

app.listen(3000, () => {
  console.log('服务启动成功，端口3000');
})

2. 服务端JS数据向客户端JS的传输实现 #

完全可以实现，JSON是前后端JS数据传输的标准格式，不需要额外的转码工具。客户端用原生fetchAPI发起请求，拿到响应后直接解析为JS对象即可使用，没有跨语言的适配成本。

3. Node.js服务下HTML加载客户端JS文件的配置方法 #

用Express内置的express.static中间件即可，只需要在服务端代码中添加一行静态资源目录配置，放在该目录下的JS、CSS、图片等静态资源，都可以在HTML中用相对路径正常引入，不需要为每个文件单独写路由。

按照如下结构组织项目文件即可：

项目根目录
├── server.js
├── node_modules // 安装依赖后自动生成
└── public // 静态资源存放目录
    ├── index.html
    └── main.js

在public/index.html中写页面结构，正常用<script>标签引入同目录下的main.js即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试数据展示</title>
  <style>
    table { border-collapse: collapse; width: 80%; margin: 20px auto; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    .query-btn { display: block; margin: 20px auto; padding: 8px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <button class="query-btn" id="queryBtn">点击查询最新数据</button>
  <table id="dataTable">
    <thead>
      <tr>
        <!-- 替换为你自己的表字段名 -->
        <th>ID</th>
        <th>测试项名称</th>
        <th>测试值</th>
        <th>记录时间</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script src="./main.js"></script>
</body>
</html>

在public/main.js中写客户端交互逻辑，实现按钮触发查询、定时拉取、表格更新：

// 封装数据拉取+表格更新方法
async function updateTableData() {
  try {
    const res = await fetch('/api/query-data');
    const result = await res.json();
    if (result.code !== 200) {
      alert('数据查询失败');
      return;
    }
    const tbody = document.querySelector('#dataTable tbody');
    // 清空表格旧数据
    tbody.innerHTML = '';
    // 遍历新数据插入行
    result.data.forEach(item => {
      const tr = document.createElement('tr');
      // 字段名和数据库返回的字段保持一致
      tr.innerHTML = `
        <td>${item.id}</td>
        <td>${item.test_name}</td>
        <td>${item.test_value}</td>
        <td>${item.record_time}</td>
      `;
      tbody.appendChild(tr);
    })
  } catch (err) {
    console.error('请求异常', err);
  }
}

// 绑定按钮点击查询事件
document.querySelector('#queryBtn').addEventListener('click', updateTableData);
// 页面加载完成后自动拉取一次数据
window.addEventListener('load', updateTableData);
// 配置每小时自动拉取一次数据，单位为毫秒，1小时=3600000毫秒
setInterval(updateTableData, 3600000);

配置完成后在项目根目录运行node server.js，浏览器访问http://localhost:3000即可看到效果，点击按钮、定时触发都不会重载页面。 #

其他可选替代方案 #

如果需要更快完成课程项目演示，也可以选择以下不需要配置PHP的轻量方案：

• 用json-server提供静态数据接口，写简单的定时脚本查询数据库生成JSON文件存到静态目录，前端直接请求该JSON文件即可，代码量更少
• 如果允许使用云服务，可以选择自带HTTP接口的数据库服务，直接在客户端JS中调用接口查询数据，不需要自己写Node.js服务端逻辑，不过自己写Express接口的方案更适合巩固Node.js基础

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