本文讲解如何安全、可靠地从 mysql 数据库读取数据（如单个整数），并通过现代 web 技术在 html 页面中动态展示，重点解决前端无法直连数据库的限制，并提供基于 php + rest api 或 firebase 的可行方案。
本文讲解如何安全、可靠地从 mysql 数据库读取数据（如单个整数），并通过现代 web 技术在 html 页面中动态展示，重点解决前端无法直连数据库的限制，并提供基于 php + rest api 或 firebase 的可行方案。
在 Web 开发中，浏览器中的 HTML/JavaScript 无法直接连接 MySQL 数据库——这是由安全模型决定的：数据库凭证绝不能暴露在前端代码中，且 MySQL 默认仅允许本地或受信服务器连接。因此，“在 HTML 页面上显示 MySQL 数据”本质上是一个前后端分离问题：需借助后端服务作为安全代理，前端通过 HTTP 请求获取数据。
✅ 推荐方案：REST API + 前端轮询（轻量、可控、兼容 Amplify）
由于你使用 AWS Amplify（纯静态托管服务，不支持 PHP 执行），最适配的路径是：
- 独立部署一个轻量后端 API（如 Node.js + Express 或 PHP + nginx），用于执行 SQL 查询并返回 JSON；
- 前端 HTML/JS 通过 fetch() 调用该 API，并用 setInterval 实现定时刷新。
示例：Node.js 后端（api-server.js）
const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
const PORT = process.env.PORT || 3000;
// 配置数据库连接池（请勿硬编码密码！使用环境变量）
const pool = mysql.createPool({
host: 'your-rds-endpoint.amazonaws.com',
user: process.env.DB_USER,
password: process.env.DB_PASS,
database: 'your_db',
waitForConnections: true,
connectionLimit: 10,
});
app.get('/api/counter', async (req, res) => {
try {
const [rows] = await pool.execute('SELECT value FROM counters WHERE id = ?', ['live_count']);
res.json({ count: rows[0]?.value || 0 });
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Failed to fetch data' });
}
});
app.listen(PORT, () => console.log(`API server running on port ${PORT}`));
✅ 部署建议：使用 AWS EC2（微实例）、Elastic Beanstalk 或 Serverless Aurora Data API（免运维）。
前端 HTML（index.html，可直接托管于 Amplify）
<title>Live Counter</title><h1>Current Count: <span id="count">—</span>
</h1>
<script>
const countEl = document.getElementById('count');
const fetchCount = async () => {
try {
const res = await fetch('https://your-api-domain.com/api/counter');
const data = await res.json();
countEl.textContent = data.count;
} catch (err) {
console.warn('Failed to update count:', err);
}
};
// 首次加载 + 每 5 秒刷新
fetchCount();
setInterval(fetchCount, 5000);
</script>
⚠️ 注意事项与最佳实践
- 绝不暴露数据库凭证：后端必须通过环境变量管理敏感配置，禁止写入代码或前端；
- API 需加基础防护：启用 CORS（仅允许你的 Amplify 域名）、添加速率限制（如 express-rate-limit）；
- 避免轮询滥用：高频请求会增加数据库压力，可考虑 WebSocket（如 Socket.IO）或服务端推送（Server-Sent Events）替代；
- PHP 不适用于 Amplify：正如答案所指出，Amplify 是静态托管平台，不解析 .php 文件——强行重命名只会导致 404 或空白页；
- Firebase 替代方案（无后端开发）：若只需简单实时计数，可改用 Firebase Realtime Database 或 Firestore，前端 SDK 直连并监听变更，完全规避自建后端。
总结
核心逻辑始终是：前端 → HTTP 请求 → 受信后端 → 安全查询 MySQL → 返回 JSON → 前端渲染。选择技术栈应以部署环境为先——Amplify 用户应拥抱“静态前端 + 独立 API 服务”模式，而非尝试绕过架构限制。只要 API 设计合理、权限管控得当，该方案既安全又具备良好的可扩展性。
