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

HTML怎么做登录注册还能连数据库,简单点教你一步步搞定后台连接

(根据博客园用户“小明的笔记”的分享整理)

想给自己的网站做个登录注册,还能把用户信息存到数据库里,听起来很高级,其实跟着步骤来一点也不难,咱们不用那些听不懂的专业词,就用人话把这事儿说清楚,这里用 PHP 和 MySQL 数据库来举例子,因为它们非常常见,而且简单。

第一步:先搭好舞台——创建数据库和表

你得先有个“仓库”(数据库)来存用户信息,然后在仓库里放一个“货架”(数据表)来放具体的用户名、密码这些。

  1. 打开你的数据库管理工具,phpMyAdmin(很多虚拟主机都自带这个),创建一个新的数据库,名字可以叫 my_website
  2. 在这个数据库里,新建一张表,就叫 users 吧,这张表需要几个“格子”(字段):
    • id:给每个用户一个唯一的号码,通常设置成自动增加,这样每加一个新用户,号码会自动变大。
    • username:用来存用户名,是文本类型。
    • password:用来存密码,非常重要! 一定要用文本类型,但绝对不能明文存储。
    • email:用来存邮箱,是文本类型。

第二步:做个脸面——创建注册和登录的页面

这就是用户能看到和操作的界面了,用 HTML 写表单就行。

HTML怎么做登录注册还能连数据库,简单点教你一步步搞定后台连接

  1. 注册页面(register.html): 这个页面主要就是一个表单,里面有输入框让用户填用户名、密码、邮箱。

    <!DOCTYPE html>
    <html>
    <head>
        <title>注册</title>
    </head>
    <body>
        <h2>用户注册</h2>
        <form action="register.php" method="post"> <!-- 告诉表单,数据提交给谁处理 -->
            <input type="text" name="username" placeholder="用户名" required>
            <input type="password" name="password" placeholder="密码" required>
            <input type="email" name="email" placeholder="邮箱" required>
            <button type="submit">注册</button>
        </form>
    </body>
    </html>

    注意看 <form> 标签里的 action="register.php",意思是当用户点击“注册”按钮后,浏览器会把填写的数据发送给一个叫做 register.php 的文件去处理。method="post" 是一种比较安全的发送数据的方式。

  2. 登录页面(login.html): 这个页面更简单,只需要用户名和密码。

    <!DOCTYPE html>
    <html>
    <head>
        <title>登录</title>
    </head>
    <body>
        <h2>用户登录</h2>
        <form action="login.php" method="post">
            <input type="text" name="username" placeholder="用户名" required>
            <input type="password" name="password" placeholder="密码" required>
            <button type="submit">登录</button>
        </form>
    </body>
    </html>

    同样,数据会提交给 login.php 处理。

    HTML怎么做登录注册还能连数据库,简单点教你一步步搞定后台连接

第三步:让后台动起来——用 PHP 连接数据库和处理数据

这是最关键的一步,PHP 文件就像是后台的“大脑”,负责接收前端页面发来的数据,然后和数据库打交道。

  1. 先写一个连接数据库的文件(db_connection.php): 这样其他地方需要连数据库时,直接引用这个文件就行,不用重复写代码。

    <?php
    $servername = "localhost"; // 数据库地址,通常就是localhost
    $username = "root";        // 你的数据库用户名
    $password = "your_password"; // 你的数据库密码
    $dbname = "my_website";    // 数据库名
    // 创建连接
    $conn = new mysqli($servername, $username, $password, $dbname);
    // 检查连接是否成功
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }
    // echo "连接成功"; // 测试时可以取消注释看看连上没有
    ?>

    记得把 your_password 换成你数据库的真实密码。

    HTML怎么做登录注册还能连数据库,简单点教你一步步搞定后台连接

  2. 处理注册的逻辑(register.php): 这个文件要干几件事:接收表单数据、检查用户名是否已存在、把新用户信息安全地存进数据库。

    <?php
    // 引入数据库连接文件
    include 'db_connection.php';
    // 获取从注册表单POST过来的数据
    $username = $_POST['username'];
    $plain_password = $_POST['password']; // 先拿到明文密码
    $email = $_POST['email'];
    // **重要:对密码进行加密!** 绝对不能直接存明文密码。
    $hashed_password = password_hash($plain_password, PASSWORD_DEFAULT);
    // 检查用户名是否已经存在
    $check_sql = "SELECT id FROM users WHERE username = ?";
    $stmt = $conn->prepare($check_sql);
    $stmt->bind_param("s", $username); // "s" 代表参数是字符串类型
    $stmt->execute();
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        echo "用户名已存在!";
    } else {
        // 用户名不存在,插入新用户
        $insert_sql = "INSERT INTO users (username, password, email) VALUES (?, ?, ?)";
        $stmt = $conn->prepare($insert_sql);
        $stmt->bind_param("sss", $username, $hashed_password, $email); // 三个都是字符串,所以是"sss"
        if ($stmt->execute()) {
            echo "注册成功!";
            // 通常这里会跳转到登录页面
            // header('Location: login.html');
        } else {
            echo "注册失败: " . $conn->error;
        }
    }
    $stmt->close();
    $conn->close();
    ?>

    这里用了 password_hash 来加密密码,这是目前PHP推荐的安全做法,还用了 prepare 语句来防止SQL注入攻击,这是一种常见的黑客手段。

  3. 处理登录的逻辑(login.php): 这个文件负责验证用户输入的用户名和密码是否和数据库里存的一致。

    <?php
    // 引入数据库连接
    include 'db_connection.php';
    // 获取登录表单数据
    $username = $_POST['username'];
    $input_password = $_POST['password'];
    // 根据用户名从数据库查找用户信息
    $sql = "SELECT id, username, password FROM users WHERE username = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows == 1) {
        // 找到了这个用户
        $user = $result->fetch_assoc();
        // **重要:验证密码**
        if (password_verify($input_password, $user['password'])) {
            echo "登录成功!欢迎, " . $user['username'];
            // 通常这里会启动一个Session,记录用户登录状态,然后跳转到其他页面
            // session_start();
            // $_SESSION['user_id'] = $user['id'];
            // $_SESSION['username'] = $user['username'];
            // header('Location: welcome.php');
        } else {
            echo "密码错误!";
        }
    } else {
        echo "用户名不存在!";
    }
    $stmt->close();
    $conn->close();
    ?>

    这里用 password_verify 函数来比对用户输入的密码和数据库里加密后的密码是否匹配。

最后总结一下流程:

  1. 用户打开 register.html,填写信息。
  2. 点击提交,数据发送给 register.php
  3. register.php 连上数据库,加密密码,把新用户信息存进去。
  4. 用户打开 login.html,输入用户名和密码。
  5. 点击提交,数据发送给 login.php
  6. login.php 连上数据库,找到对应用户,验证密码是否正确。

这样,一个最基础的、能连接数据库的登录注册功能就完成了,这只是一个起点,你还可以加入邮箱验证、密码强度检查、记住登录状态(Session)、前端样式美化等更多功能,希望这个一步步的讲解能帮你搞定它!

(参考思路来源于W3School和部分PHP入门教程的常见实践)