index.html 无法直接连接数据库，必须通过后端服务中转；前端用 fetch 调用 api，后端连接数据库并返回 json；切勿硬编码数据库凭证，需处理 cors 和安全防护。
index.html 不能直接连数据库
浏览器里的 index.html 是纯静态文件，运行在用户本地（或 CDN 缓存节点），没有权限、也没有能力直连 MySQL/PostgreSQL 等后端数据库。所谓“调用数据库”，实际是前端发请求 → 后端服务查库 → 返回数据给前端。跳过这层服务，任何 JS 脚本（包括 fetch 或 XMLHttpRequest）都拿不到数据库内容。
必须加一层后端服务来中转
常见做法是写一个轻量 API 接口，比如用 Node.js + Express、Python + Flask、PHP 或 Java Spring Boot，监听某个路径（如 /api/users），收到请求后连接数据库、执行查询、返回 JSON。前端 index.html 通过 fetch('/api/users') 获取结果。
- Node.js 示例：用
mysql2包连接 MySQL，app.get('/api/data', ...)处理 GET 请求 - 注意不要把数据库账号密码硬编码在前端代码里——哪怕你藏在 JS 里，用户 F12 就能看见
- 接口需处理 CORS，否则浏览器会拦截跨域请求；开发时可用
res.header('Access-Control-Allow-Origin', '*')临时放开（上线必须限制域名） - 若用 SQLite，也得由后端读取文件，不能让前端 JS 直接打开
db.sqlite（浏览器沙箱禁止）
如果真想“零后端”，只能换存储方式
不部署服务的前提下，可考虑替代方案，但本质已不是“调用数据库”：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把数据预生成为 JSON 文件（如
data.json），放在同目录下，用fetch('./data.json')加载——适合内容极少且不常更新的场景 - 用浏览器内置的
localStorage或IndexedDB存少量结构化数据，但这是客户端存储，和服务器数据库完全无关 - 第三方 BaaS（如 Supabase、Firebase）提供托管 API，你只需配好规则，前端用 SDK 调用
supabase.from('users').select()——仍算后端，只是不用自己搭
常见错误：在 HTML 里写 PHP/Python 代码
有人把 <?php echo $row['name']; ?> 直接塞进 index.html，发现页面源码原样输出——因为 .html 后缀默认不被 PHP 解析。要么改后缀为 index.php，要么配置 Web 服务器（如 Nginx）让 .html 也走 PHP 解析器。但这已不属于“HTML 调用数据库”，而是服务端模板渲染，且暴露逻辑到前端易出安全问题。
真正难的不是写几行 fetch，而是设计权限校验、防 SQL 注入、控制并发、处理连接池——这些都在后端。别被“前端调接口”这个动作骗了，数据库那头的活儿，一个都省不掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
