数据库数据如何动态显示在HTML页面

本文深入剖析了将数据库数据安全、稳定地展示在HTML页面上的核心实践与常见陷阱，涵盖PHP和Node.js两大主流后端环境：PHP中强调必须通过$row['field']精准取值、避免直接echo数组引发错误，并严格校验查询结果与字段名大小写；Node.js则聚焦模板传参的结构一致性、fetch跨域与Content-Type头的精确配置，以及API响应格式与前端解析逻辑的严丝合缝；全文贯穿一条关键原则——SQL注入与XSS防护不是后期补救项，而是从首行代码就必须嵌入的硬性规范，包括参数化查询、HTML转义、DOMPurify净化等实操手段，直击开发者在真实项目中反复踩坑的“最后一公里”问题。

PHP 里用 mysqli_fetch_assoc() 拿数据，别直接 echo 数组

直接 echo $row 会报 Array to string conversion 警告，因为 PHP 不允许把数组当字符串输出。得一层层取字段值。

常见错误是写成：echo $row; 或 print_r($row) 塞进 HTML 正文里——页面会混入大量调试信息，还可能暴露结构。

• 正确做法：循环中用 $row['username']、$row['email'] 这种带键名的方式取值
• 确保 SQL 查询成功再遍历，加 if ($result && mysqli_num_rows($result) > 0) 判断
• 字段名大小写敏感，数据库里是 user_name，代码里写成 $row['UserName'] 就拿不到

Node.js + Express 中 res.render() 渲染模板时传参要解构清楚

用 EJS 或 Pug 时，后端 res.render('list', { users: rows })，前端模板里必须写 ，不能漏掉 users. 这一层。

容易踩的坑是数据库返回的是二维数组（如 [[1,'alice'],[2,'bob']]），但模板默认期待对象数组（[{id:1,name:'alice'}]）。这时候要么在查询时用 rows.map(r => ({id:r[0],name:r[1]})) 转换，要么改 SQL 加字段别名（SELECT id AS user_id, name AS full_name FROM users）。

• Express 默认不处理数据库连接，记得用 mysql2 或 pg 等驱动，别依赖已弃用的 mysql 包
• res.render() 报 Cannot read property 'forEach' of undefined，大概率是没传 users 或传了 null
• 模板里写 是调试手段，上线前删掉，避免 XSS 风险

前端用 fetch 从 API 拿数据，跨域和 Content-Type 得对上

后端 API 返回 JSON，但响应头没设 Content-Type: application/json，前端 response.json() 就会抛 Unexpected token 错误。不是数据错了，是浏览器根本没当成 JSON 解析。

另一个高频问题是本地开发时后端跑在 localhost:3000，前端在 file:// 打开 HTML，fetch 直接被浏览器拦截——这不是代码问题，是协议不一致导致的跨域限制。

• 后端加响应头：res.setHeader('Access-Control-Allow-Origin', '*')（开发用，生产请限定域名）
• fetch 后必须链式调用 .then(r => r.json())，不能省；如果后端返回的是纯 HTML 片段，就该用 r.text()
• HTML 中写 fetch('/api/users').then(...)，路径别写成绝对 URL（如 http://localhost:8000/api/users），否则部署到子路径时会 404

SQL 注入和 XSS 不是“以后再修”，得从第一行代码防起

拼接 SQL 字符串（"SELECT * FROM users WHERE id = " + req.query.id）或者把数据库字段原样 innerHTML = row.name 插进页面，等于把服务器和用户浏览器同时交给攻击者。

参数化查询和 HTML 转义不是可选项。Node.js 用 mysql2 的 query('SELECT * FROM users WHERE id = ?', [id])；前端渲染前用 DOMPurify.sanitize() 或至少 textContent 替代 innerHTML。

• 即使字段内容看起来“只是名字”，也可能含