当前位置：首页 > 问答 > 正文

网页怎么简单连数据库，教你一步步搞定连接过程

称怜
问答
2026-01-05 18:43:36
8

，比如用户留言、商品列表，或者是从服务器实时获取的数据，那就必须学会怎么让网页和数据库“说上话”，这听起来好像是程序员高手才能做的事，但其实只要跟着步骤来，你也能一步步搞定，咱们今天就用最直白的方式,把这个过程讲清楚。

你得明白一个关键点：网页（通常是运行在用户浏览器上的HTML、CSS和JavaScript）是不能直接连接到你的数据库的，为什么呢？因为那样太危险了，如果你的网页里直接写了数据库的用户名和密码，那么任何一个打开网页的人都能看到这些信息，然后就可以随意修改、删除你的数据,这简直就是开门揖盗。

正确的做法是引入一个“中间人”，这个中间人就是你的网站服务器，整个流程是这样的：用户的浏览器向你的网站服务器发出一个请求，我想看最新的10条留言”；网站服务器收到请求后，自己跑去数据库里取出这10条数据；网站服务器把数据整理成网页能看懂的格式（比如JSON），再发送回用户的浏览器；浏览器收到数据，把它漂亮地展示在网页上，这样一来，你的数据库密码和地址只保存在你自己控制的服务器上,安全多了。

（参考来源：W3Schools关于客户端-服务器模型的解释,以及各种Web开发入门指南中强调的安全性原则）

我们一步步来看这个“中间人”——服务器端——需要做什么，这里我们用一个非常常见的组合来举例：PHP语言和MySQL数据库，主要是因为它们应用广泛，例子好找,学起来也相对简单。

第一步：准备工作——你得有个数据库

在你开始写代码之前，数据库得先准备好，这通常是在你的网站托管服务商（也叫虚拟主机）的控制面板里完成的，很多服务商都提供像“MySQL数据库”这样的功能,你需要做三件事：

创建一个数据库：就相当于建立一个仓库。
创建一个用户：并给这个用户设置一个强壮的密码,这个用户就是专门用来让服务器登录数据库的。
给用户授权：让你刚创建的这个用户有权限管理你刚创建的那个数据库。

做完这三步，请务必记下四样东西：数据库服务器的地址（通常是localhost或者一串主机名）、数据库名、用户名和密码，这四样是后面连接的关键,缺一不可。

（参考来源：常见虚拟主机服务商如cPanel、Plesk等提供的数据库管理向导）

第二步：在服务器端编写连接代码（以PHP为例）

在你的网站目录下，创建一个新的PHP文件，比如叫做 connect.php,我们将用PHP内置的MySQLi扩展来连接数据库。

网页怎么简单连数据库，教你一步步搞定连接过程

是连接数据库的代码：

<?php
$servername = "localhost"; // 你的数据库服务器地址，通常是localhost
$username = "你的数据库用户名";   // 替换成你创建的那个用户名
$password = "你的数据库密码";     // 替换成你设置的那个强壮密码
$dbname = "你的数据库名";       // 替换成你创建的数据库的名字
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error); // 如果失败，就报错并停止执行
}
echo "数据库连接成功！"; // 如果看到这行字，说明连接成功了
?>

把上面代码中的中文部分换成你第一步记下来的真实信息，然后把这个文件上传到你的网站服务器，在浏览器里访问这个文件的网址（www.yoursite.com/connect.php），如果页面上显示“数据库连接成功！”，那么恭喜你，最基础的一步已经完成了！如果报错,请仔细检查那四个信息是否填写正确。

（参考来源：PHP官方手册中MySQLi扩展的入门指南）

第三步：执行SQL查询，获取数据

连接上了，接下来就可以让服务器向数据库“问问题”了，这个“问问题”的语言就是SQL，假设你的数据库里有一个叫 messages 的表，里面存着留言的标题（title）和内容（content）,我们想把这些数据都取出来。

在刚才的 connect.php 文件里，在连接成功的代码后面,继续写：

网页怎么简单连数据库，教你一步步搞定连接过程

$sql = "SELECT id, title, content FROM messages"; // 这是一条SQL查询语句，意思是从messages表里选择id、title和content这三列的数据
$result = $conn->query($sql); // 让连接对象执行这条SQL语句，并把结果保存在$result变量里
if ($result->num_rows > 0) { // 判断一下结果里是不是有数据
    // 如果有数据，就循环输出每一条数据
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - 标题: " . $row["title"]. " 内容：" . $row["content"]. "<br>";
    }
} else {
    echo "0 结果"; // 如果表是空的，就显示这个
}

第四步：把数据变成网页能用的格式

上面第三步的例子是直接把数据用 echo 打印出来了，这通常不是我们最终想要的，更常见的做法是，服务器把数据整理成一种结构化的格式（比如JSON）,然后由网页的JavaScript来接收并处理。

我们可以新建一个PHP文件，比如叫 get_data.php，里面包含连接数据库和执行查询的代码，但最后不直接 echo,而是这样：

... // 前面的连接数据库和查询代码和上面一样
$data = array(); // 创建一个空数组来存放数据
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row; // 把每一行数据都塞进数组里
    }
}
// 设置HTTP响应头，告诉浏览器返回的是JSON格式的数据
header('Content-Type: application/json');
// 把PHP数组转换成JSON字符串，并输出
echo json_encode($data);
$conn->close(); // 最后别忘了关闭数据库连接

第五步：在网页上用JavaScript获取数据

在你的HTML网页里，你就可以用JavaScript（比如使用fetch API）来向这个 get_data.php 文件请求数据了。

fetch('get_data.php') // 向get_data.php发起请求
  .then(response => response.json()) // 将响应解析为JSON
  .then(data => {
    // 到这里，data就是你从数据库里取出来的数据组成的JavaScript数组了
    console.log(data); // 可以在浏览器控制台看看数据
    // 然后你就可以用JavaScript动态地把这些数据插入到网页的HTML元素里，比如创建一个列表来显示
    const listElement = document.getElementById('message-list');
    data.forEach(message => {
      const listItem = document.createElement('li');
      listItem.textContent = `【${message.title}】 ${message.content}`;
      listElement.appendChild(listItem);
    });
  })
  .catch(error => console.error('出错啦:', error));

这样，一个完整的“网页请求 -> 服务器处理 -> 查询数据库 -> 返回数据 -> 网页展示”的流程就完成了。

网页连接数据库的核心就是通过服务器脚本（如PHP）作为安全的中间桥梁，你只要按部就班：准备数据库、写连接代码、执行查询、处理结果，最后在网页上动态展示，就能搞定这个看似复杂的过程，多练习几次,你就会发现它其实并没有想象中那么神秘。