如何将数据库的信息显示在html上

3次阅读

php中需用$row[‘field’]取值而非echo $row;node.js模板传参要解构清晰;fetch需设content-type和cors头;sql注入与xss须从首行代码防范。

如何将数据库的信息显示在html上

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() 渲染模板时传参要解构清楚

EJSPug 时,后端 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 默认不处理数据库连接,记得用 mysql2pg 等驱动,别依赖已弃用的 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 用 mysql2query('SELECT * FROM users WHERE id = ?', [id]);前端渲染前用 DOMPurify.sanitize() 或至少 textContent 替代 innerHTML

  • 即使字段内容看起来“只是名字”,也可能含 <script></script>javascript:alert(1)
  • 后端返回的 JSON 如果带 HTML 字符串(如 {"bio":"<b>Admin</b>"}),前端决定是否渲染为 HTML,而不是默认信任
  • 本地开发时关掉浏览器的 XSS Auditor(chrome 已移除),别靠它兜底

事情说清了就结束。真正卡住人的,往往不是怎么连数据库,而是哪一步少转义、哪个 header 没配、哪次 fetch 忘了 catch 错误。

text=ZqhQzanResources