html网页连接数据库-烟消火灭网

前端页面点一下按钮，网页数据就存进了服务器里的连接数据库——这事每天都在发生。但如果你以为HTML文件里能直接写一行 mysql_connect() 就搞定，数据那大概率要卡上半天。网页浏览器只认HTML、连接CSS、数据JavaScript，网页它压根不认识MySQL、连接PostgreSQL这些数据库。数据中间必须有个“翻译”——后端程序。网页

我见过不少新手把数据库账号密码直接写在JavaScript里，连接然后通过Ajax发给一个PHP文件。数据这种做法等于把家门钥匙插在门锁上还贴了张纸条写着“欢迎光临”。网页真正要连数据库，连接流程是数据这样的：浏览器发请求→后端脚本接收→后端连数据库→取数据→返回给前端。HTML只负责展示，连数据库的活儿是后端干的。

一个具体例子：用PHP连MySQL

假设你有个页面要显示用户列表。先写一个HTML骨架：

<!DOCTYPE html> <html> <head><title>用户列表</title></head> <body> <ul id="userList"></ul> <script> fetch('get_users.php') .then(res => res.json()) .then(data => {  const ul = document.getElementById('userList'); data.forEach(user => {  const li = document.createElement('li'); li.textContent = user.name; ul.appendChild(li); }); }); </script> </body> </html>

这个HTML文件本身没碰数据库。它向 get_users.php 发请求，拿回JSON数据再渲染。后端那个PHP文件才是关键：

<?php $host = '127.0.0.1'; $db = 'test_db'; $user = 'web_user'; $pass = 'strong_password_here'; $charset = 'utf8mb4'; $dsn = "mysql:host=$host;dbname=$db;charset=$charset"; $options = [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ]; try {  $pdo = new PDO($dsn, $user, $pass, $options); $stmt = $pdo->query('SELECT id, name FROM users'); $users = $stmt->fetchAll(); header('Content-Type: application/json'); echo json_encode($users); } catch (PDOException $e) {  http_response_code(500); echo json_encode(['error' => '数据库连接失败']); } ?>

PDO是PHP里比较稳妥的数据库抽象层。别用 mysql_* 那些老函数，PHP 7之后已经删了。也别直接拼接SQL字符串，用预处理语句防注入。上面这段代码里，数据库密码写在PHP文件里，这个文件放在服务器上，浏览器访问不到源码——前提是服务器配置正确。我见过有人把 .php 文件当静态文件下载下来，那就是Web服务器没配好，跟代码本身没关系。

Node.js + Express 的做法

如果你用JavaScript全栈，后端可能是这样的：

const express = require('express'); const mysql = require('mysql2/promise'); const app = express(); app.get('/users', async (req, res) => {  const conn = await mysql.createConnection({  host: 'localhost', user: 'web_user', password: 'strong_password_here', database: 'test_db' }); const [rows] = await conn.execute('SELECT id, name FROM users'); await conn.end(); res.json(rows); }); app.listen(3000);

前端HTML还是用fetch请求 /users。Node.js和PHP的差别在于运行方式，连数据库的逻辑是一样的：建立连接、执行查询、关闭连接、返回数据。连接池比每次新建连接更高效，生产环境别用上面这种每次请求都createConnection的写法，用 mysql.createPool()。

几个容易踩的坑

跨域问题。前端页面在 localhost:8080，后端在 localhost:3000，浏览器会拦请求。要么后端加CORS头，要么用Nginx反代到同一个域名下。字符集也要注意，MySQL里用 utf8mb4，别用 utf8，后者存不了emoji。连接超时时间默认可能很短，网络慢的时候调大一点。

还有一点：别在前端代码里留任何数据库凭证。有人觉得“我打包混淆一下就行了”，混淆后的代码照样能还原。凭证只放服务器端，通过环境变量读取，别硬编码。

HTML本身连不了数据库，它只是触发请求的起点。真正干活的是后端那几行代码。理解这个分工，比记住某个具体API重要得多。