html页面无法直接连接数据库，因其仅为静态标记语言且浏览器禁止前端javascript直连数据库；必须通过后端api（如node.js+express）作为中间层，由后端完成数据库操作并返回json数据。
HTML 页面本身不能直接连接数据库。 它只是静态标记语言，没有执行能力，更不支持数据库驱动、网络请求或认证逻辑。所有“HTML 连数据库”的想法，本质是混淆了前端和后端职责。
为什么 fetch 或 XMLHttpRequest 不能直连 MySQL/PostgreSQL？
浏览器出于安全限制（同源策略、CORS、无凭证暴露风险），禁止前端 JavaScript 直接建立到数据库服务器的 TCP 连接。即使你把 mysql://user:pass@host:3306/db 写进 JS，运行时会报 NetworkError 或 TypeError: Failed to fetch —— 不是因为写错了 URL，而是浏览器压根不许发这种包。
常见错误现象：
- 控制台报
ERR_CONNECTION_REFUSED或net::ERR_FAILED - 用
node-fetch在本地 Node 脚本里能通，但塞进 HTML 的<script></script>就失败 - 误以为装个
mysql2浏览器版就能用（实际该包只运行在 Node.js 环境）
真正可行的路径：用后端 API 做中间层
你需要一个轻量后端服务（哪怕只有 1 个接口），接收 HTML 页面发来的 fetch 请求，查数据库，再把 JSON 返回给前端。这个后端可以是：
立即学习“前端免费学习笔记（深入）”；
MTTSHOP包包免费商城系统
下载
一款非常包包、衣服、鞋子类网站，页面干净清洁、一目了然，mttshop打造精致、简单、易用、免费的商城。 系统要求：IIS5.1以后，必须安装.net 3.5 安装步骤： 1、下载完成后，直接解压文件mttshop.rar 2、附加数据库：解压后的可以找一个叫db的文件夹，解压后直接附加就可以，支持SQL 2000、2005、2008 3、配置web.config文件，找到key=&qu
- Node.js +
express+pg（PostgreSQL）或mysql2（MySQL） - Python +
Flask+psycopg2/pymysql - PHP +
mysqli或PDO（直接配在 Apache/Nginx 下）
关键点：
- HTML 页面只跟你的后端地址通信，比如
fetch('/api/users')，而不是fetch('mysql://...') - 后端代码里才出现数据库连接配置，如
process.env.DB_HOST、pool.query(...) - 必须做输入校验和 SQL 参数化（防注入），不能把用户输入拼进
SELECT * FROM users WHERE name = '${name}'
最简可跑示例（Node.js + Express）
假设你已有 Node 环境，建一个 server.js：
const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
<p>const pool = mysql.createPool({
host: 'localhost',
user: 'your_user',
password: 'your_pass',
database: 'testdb'
});</p><p>app.use(express.json());
app.get('/api/users', async (req, res) => {
try {
const [rows] = await pool.execute('SELECT id, name FROM users');
res.json(rows);
} catch (err) {
res.status(500).json({ error: err.message });
}
});</p><p>app.listen(3000);然后 HTML 中这样调用：
<script>
fetch('http://localhost:3000/api/users')
.then(r => r.json())
.then(data => console.log(data));
</script>注意：
- 前后端需同源（或后端配好
Access-Control-Allow-Origin），否则跨域失败 -
localhost:3000是后端地址，不是数据库地址；数据库连接完全在 Node 进程内完成 - 别把
your_pass硬编码进前端或 Git 提交 —— 后端要用环境变量管理
最容易被忽略的是权限收敛：后端 API 必须按需暴露最小字段集，且每个接口明确限定 HTTP 方法、参数格式和数据范围。数据库账号也不该有 DROP TABLE 权限。这事关安全，不是“先跑起来再说”的环节。
