HTML本身不能直接连接SQL数据库，所有操作必须由后端完成；前端仅负责表单收集、fetch请求和页面渲染，直连会暴露凭据并违反浏览器安全机制。
HTML 本身不能直接连接 SQL 数据库——所有数据库操作必须由后端完成，前端只负责展示和交互。 这不是限制，而是安全底线。试图在 HTML 或浏览器 JavaScript 里硬写连接字符串、执行 SELECT，等于把数据库账号密码暴露给任何人。
为什么不能用 fetch + MySQL 连接字符串直连
浏览器环境不支持原生 MySQL 协议；mysql:// 或 jdbc:mysql:// 这类 URL 在前端 JS 里毫无意义。常见错误现象包括：
Failed to execute 'fetch' on 'Window': Invalid URL- 控制台报
net::ERR_CONNECTION_REFUSED（因浏览器禁止直连数据库端口如 3306） - 即使伪造成功，也会触发 CORS 或预检失败（数据库服务默认不带
Access-Control-Allow-Origin）
根本原因：SQL 数据库监听的是 TCP 端口（如 MySQL 默认 3306），而浏览器只允许发起 HTTP(S) 请求（端口 80/443），且受同源策略严格约束。
正确的前后端分工方式
前端 HTML/JS 只做三件事：收表单、发请求、填页面。后端才是数据库操作的唯一出口。典型链路如下：
- 用户在 HTML 表单输入查询条件 → 触发
fetch("/api/query", { method: "POST", body: JSON.stringify({sql: "SELECT ..."}) }) - 后端（如 Python Flask）收到请求 → 校验权限 → 使用
mysql-connector-python或pymysql执行cursor.execute(sql) - 后端将结果转成 JSON（注意过滤敏感字段，不返回
password、token等）→ 返回状态码 200 + 数据 - 前端用
response.json()解析，再用document.getElementById("table").innerHTML = ...或 React 渲染
关键点：/api/query 是你定义的代理路由，不是数据库地址；SQL 语句应尽量受限（例如只允许 SELECT，禁用 INSERT/UPDATE/DROP），生产环境务必加白名单或参数化查询。
Docker 部署时的网络配置坑
本地开发常忽略容器网络隔离，导致“后端连得上 MySQL，但前端 fetch 不通 API”。常见配置错误：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- MySQL 容器暴露了
3306，但没设MYSQL_ROOT_HOST=%或对应用户 host 为%→ 后端容器无法认证 - Flask 容器启动时绑定
127.0.0.1:5000，导致同 Docker network 内其他容器访问不到（应改用0.0.0.0:5000） - 前端 HTML 通过
http://localhost:3000访问，但 fetch 请求发到了http://localhost:5000/api/query→ 实际是宿主机 localhost，不是容器间通信，需统一走 Docker service 名（如http://backend:5000/api/query）并配好 nginx 反向代理
验证方法：进前端容器执行 curl -v http://backend:5000/health，能通才说明网络层 OK；再查后端日志是否收到请求，排除 CORS 或路径错误。
EXPLAIN 可视化这类功能怎么落地
仪表盘要显示 EXPLAIN 结果的 type、rows、key 等字段，不能靠前端解析原始文本。正确做法是后端执行：
cursor.execute("EXPLAIN " + user_sql)
result = cursor.fetchall()
# 转成标准字典列表，例如：
# [{"id": 1, "select_type": "SIMPLE", "type": "range", "rows": 124, "key": "idx_created_at"}]
再传给前端。注意两点：
- MySQL 8.0+ 的
EXPLAIN FORMAT=JSON返回嵌套结构更全，但解析成本高；普通EXPLAIN的二维结果已够用 - 别把
EXPLAIN结果直接当 HTML 表格渲染——type=ALL要标红，rows > 10000要预警，这些逻辑放前端做，但阈值规则建议由后端返回标记字段（如"warning_level": "high"），避免前端硬编码业务规则
真正容易被忽略的，是 EXPLAIN 对未命中索引的查询会触发全表扫描——如果仪表盘本身被大量用户并发使用，又不做查询频次限制或缓存，可能反成数据库负担源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
