如何从MySQL表获取整数并在HTML页面实时更新？解决部署问题

1. 放弃PHP，改用「前端静态页面 + Node.js API接口」架构 #

AWS Amplify本身是静态网站托管服务，不支持PHP运行环境，所以PHP这条路走不通。核心思路是：前端用纯HTML/JS展示数据，后端用Node.js写一个API接口专门负责查询SQL并返回结果，前端通过定时请求这个接口实现实时更新。

2. 编写Node.js SQL查询接口 #

用Express框架快速搭建接口，只负责处理SQL查询，不做HTML渲染：

• 初始化项目并安装依赖：

npm init -y
npm install express mysql2 cors

• 编写接口代码（示例server.js）：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
app.use(cors());

// 替换为你的数据库配置
const db = mysql.createConnection({
  host: '你的数据库地址',
  user: '数据库用户名',
  password: '数据库密码',
  database: '目标数据库名'
});

db.connect(err => {
  if (err) throw err;
  console.log('数据库连接成功');
});

// 定义查询接口
app.get('/api/get-target-value', (req, res) => {
  // 替换为你的SQL查询语句，确保返回单个整数值
  const query = 'SELECT target_column FROM target_table WHERE your_condition LIMIT 1';
  db.query(query, (err, results) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    // 提取查询到的整数值
    const targetValue = results[0].target_column;
    res.json({ value: targetValue });
  });
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`服务器运行在端口 ${PORT}`));

3. 将Node.js接口部署到AWS #

Amplify不直接托管Node.js后端，但可以用AWS Lambda + API Gateway组合部署：

• 用Amplify CLI简化流程：运行amplify add api，选择REST API，将上面的SQL查询逻辑写入生成的Lambda函数中，Amplify会自动配置API Gateway。
• 部署完成后，你会得到一个可访问的API地址（比如https://xxx.execute-api.us-east-1.amazonaws.com/prod/get-target-value）。

4. 前端页面实现实时更新 #

保留index.html，用JS的setInterval定时请求API更新数据：

<!DOCTYPE html>
<html>
<head>
  <title>实时数值展示</title>
</head>
<body>
  <h3>当前目标数值：<span id="value-display">0</span></h3>

  <script>
    const displayEl = document.getElementById('value-display');
    const API_URL = 'https://xxx.execute-api.us-east-1.amazonaws.com/prod/get-target-value';

    // 封装数据获取函数
    async function fetchValue() {
      try {
        const res = await fetch(API_URL);
        const data = await res.json();
        displayEl.textContent = data.value;
      } catch (err) {
        console.error('数据获取失败:', err);
        displayEl.textContent = '加载失败';
      }
    }

    // 页面加载时先获取一次数据
    fetchValue();
    // 定时更新，这里设为5秒一次，可根据需求调整
    setInterval(fetchValue, 5000);
  </script>
</body>
</html>

5. 部署前端到AWS Amplify #

直接将包含index.html的前端项目上传到Amplify，它会正常托管静态页面，页面通过AJAX请求你部署的API接口获取数据。

关键注意点 #

• 数据库权限：如果用AWS RDS，要确保Lambda的IAM角色拥有RDS访问权限，或者将RDS安全组设置为允许Lambda/API Gateway的IP访问。
• 跨域配置：Node.js代码中已加入cors中间件，用Amplify配置REST API时也可直接开启CORS选项。
• 性能优化：如果查询频率高，可在API层加入缓存（比如Redis），避免频繁查询数据库。

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