你真的不得不佩服ChatGPT的能力，这段时间确实爱不释手，自己也做了很多有趣的小工具，比如骗子QQ公示、小轻一言、音乐播放器、资源库、知乎热榜、新闻热门等页面。

今天就主要谈谈我的得意之作——小轻世界畅聊，一起来看看被大佬鄙视过的系统到底是怎么创作出来的。

一、界面

登录注册

登录界面中包含登录和注册按钮，只需要输入用户名和密码，没有其他的验证，聊天完全匿名。

登录后直接跳转到聊天系统，这个界面会自动查看最新消息，如果想看历史消息可以直接滑动滑块。我们在发送消息时，也会自动定位到最新消息，但如果滑动滑块或者滚动滚轮将会变成手动定位。

聊天界面对方的内容是显示在左边，自己的消息在右边，并且有显示发送时间，消息条也有颜色区分。

唯一缺陷是在定位消息时会先自动滚动到首条消息，再滑动到最新一条。

点击聊天页面顶部的管理按钮可以进入后台管理系统。

管理主页

用户管理

留言板

以上就是所有的界面了，我们先看明白界面，就懂得我们需要做的界面有哪些。

二、编写页面

首先我先确定好用什么框架写这个系统，效率会高很多。在layui和bootstrap中我选择了后者，因为后者的界面我更喜欢，大家也可以使用自己喜欢的框架编写。

数据库

为了避免每个页面引用数据库信息，所以我们引入config.php文件。

<?php
  // 数据库配置
  $db_host = 'localhost'; // 数据库主机
  $db_name = 'root'; // 数据库名
  $db_user = 'username'; // 数据库用户名
  $db_pass = 'password'; // 数据库密码
?>

我们就可以直接在后面需要引入数据库的页面加入这个代码即可

<?php
session_start();
include 'config.php';
?>

值得注意的是，我们在设计数据库时，要先确定需要哪几个表，哪几个参数。

messages表中有user_id、message、created_at，分别对应的是用户ID、用户留言内容、留言时间。

users表中有username、password、register_time、messages_count，分别对应的是用户名、用户密码、注册时间、消息数量。、

另外，这些参数我们需要告诉GPT并让其判断使用什么类型的数据去储存它，以免调用或储存时出错。

登录注册

登录界面我直接在index.php中编写，然后验证成功之后就直接跳转到chat.php登录页面。

<?php
session_start();
include 'config.php';


// 如果用户已经登录，自动跳转到聊天页面
if (isset($_SESSION['user'])) {
    header("Location: chat.php");
    exit();
}


$error_message = '';


if ($_POST && isset($_POST['username']) && isset($_POST['password'])) {
    $username = trim($_POST['username']); // 去除用户名前后的空格
    $password = sha1($_POST['password']); // 使用哈希加密用户密码
    $register_time = date('Y-m-d H:i:s');
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);


    // 检查该用户名是否已经存在
    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username LIMIT 1");
    $stmt->bindParam(':username', $username);
    $stmt->execute();
    if ($stmt->fetch()) {
        $error_message = "用户名已经存在";
    } else {
        // 将新用户插入到 users 表
        $stmt = $pdo->prepare("INSERT INTO users (username, password, register_time, messages_count) VALUES (:username, :password, :register_time, 0)");
        $stmt->bindParam(':username', $username);
        $stmt->bindParam(':password', $password);
        $stmt->bindParam(':register_time', $register_time);
        $stmt->execute();
    }
}


// 检查登录信息并跳转到聊天页面
if ($_POST && isset($_POST['login-username']) && isset($_POST['login-password'])) {
    $username = $_POST['login-username'];
    $password = sha1($_POST['login-password']); // 使用哈希加密用户密码
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username AND password = :password LIMIT 1");
    $stmt->bindParam(':username', $username);
    $stmt->bindParam(':password', $password);
    $stmt->execute();
    $user = $stmt->fetch();
    if ($user) {
        $_SESSION['user'] = $user;
        header("Location: chat.php");
        exit();
    } else {
        $error_message = "用户名或密码错误";
    }
}
?>

查看以上代码就知道，我使用的是比较简单的哈希加密。

本来没想着加密，我想着有些人可能会输入一些比较隐私的密码，比如银行卡密码、QQ密码或者各种个人常用密码做登录密码，这样会导致密码泄露。

我让ChatGPT帮我解密密码，它给我开始的答案是哈希加密比较安全。

而后ChatGPT不断提醒我使用加盐哈希函数进行加密，我信了它的邪！由于在测试时已经有部分人注册了账户，避免我在两种加密模式下转换密码导致原密码信息丢失，所以我全程忽视它关于加密方面的提示！

上述页面比较简单，直接跟GPT对话，要求写什么样的页面，它就会按照要求去编写。

其中遇到任何错误，只需要将代码和错误信息告诉系统，它就会告诉你哪里出问题了，该怎么修改。后面我会把我遇到的一些问题整理出来，供大家参考。

聊天界面

这个聊天界面(chat.php)的编写才是这个系统的精髓，我前后测试并修改了100多次，大家请注意反复阅读学习。

首先我们需要做一个容器，将所有的消息堆放到容器中。这里我直接让ChatGPT帮我做一个可以聊天的界面，界面就直接做好了。

但是对于这个界面的话，大家也能发现有个问题是对方和自己发的消息并不能很好的区分，能不能和微信QQ一样做成左右分栏。

使用GPT通过对用户消息的颜色和位置的CSS设置，我们可以很快可以设成以下样式：

由于每次发信息，自己发的消息可以直接显示，但是无法实时获取别人的消息，这样就无法正常沟通。

接下来我们需要做的是，将消息实时显示，我们继续向GPT提问。

获取消息

我们引入get_messages.php文件用于提取最新消息，并判断滑块是否在底部，保证看到的内容都是最新的，下面代码就是引用get_messages.php的脚本，还可以处理滑块刷新后回位的问题。

<script>
    var messages = document.getElementById("messages");
    var isAutoScroll = true; // 是否自动滚动
    messages.addEventListener("scroll", function() {
      if (messages.scrollTop + messages.clientHeight >= messages.scrollHeight) {
        // 如果滑块在底部，将 isAutoScroll 设置为 true，并移除样式
        isAutoScroll = true;
        messages.classList.remove("no-auto-scroll");
      } else {
        // 否则，将 isAutoScroll 设置为 false，并添加样式
        isAutoScroll = false;
        messages.classList.add("no-auto-scroll");
      }
    });


    function updateMessages() {
      $.ajax({
        type: "GET",
        url: "get_messages.php",
        dataType: "html",
        success: function(response) {
          var shouldScrollToBottom = isAutoScroll; // 根据 isAutoScroll 判断是否自动滚动
          var wasAtBottom = messages.scrollTop + messages.clientHeight >= messages.scrollHeight;
          messages.innerHTML = response;


          if (shouldScrollToBottom) {
            // 如果应该自动滚动，并且之前在底部，滚动到底部
            messages.scrollTop = messages.scrollHeight;
          } else if (wasAtBottom) {
            // 如果之前在底部，滚动到底部
            messages.scrollTop = messages.scrollHeight;
          }
        }
      });
    }


    setInterval(updateMessages, 1000);
</script>

这里的效果是，收到消息后会刷新，而刷新后的滑块不是在最底部的话，系统会自自动划到最底部，这中间会有一秒的反应时间。如果在这一秒内滑动了滑块，则滑块不会滑动到最底部，这是便于用户翻阅历史消息。

另外，这个页面的登录后账号无法退出登陆（注销），所以我加入了logout.php注销页面。

注销页面

这个代码很简单，ChatGPT给的代码是：

<?php
  session_start();
  session_destroy();
  header("Location: index.php");
?>

这样的话，点击退出按钮即可跳转到登录界面（index.php）。

我们需要在前端加一个退出按钮，为了美观，还使用了font-awesome图标库，这样设计出来就比较人性化了。大家注意看我的系统也能发现，我所有的图标都是使用的这个图标库，当然大家也可以自行设计图标。

管理页面

现在我们还缺一个管理系统，本来我没想着做的，但是在测试系统时发了很多垃圾内容，想着清理掉，弄个管理页面方便些，也想着后期管理用户和消息很清晰，就做了。

管理页面，我做了两个单页，一个是用户管理，一个是消息管理。

用户管理（users.php）完整代码：

<?php


session_start();


include 'config.php';


try {
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);
} catch(PDOException $e) {
    die("连接数据库失败: " . $e->getMessage());
}


$stmt = $pdo->query("SELECT id, username, register_time, messages_count FROM users");
if (!$stmt) {
    $error_info = $pdo->errorInfo();
    die("查询用户失败！错误信息：" . $error_info[2]);
}


$users = $stmt->fetchAll(PDO::FETCH_ASSOC);


if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["delete_user"])) {
    $stmt = $pdo->prepare("DELETE FROM users WHERE id = ?");
    $stmt->execute([$_POST["delete_user"]]);
    header("Location: users.php");
}


?>


<!DOCTYPE html>
<html>
  <head>
    <title>用户管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container mt-4">
      <h1>用户管理</h1>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
                <th class="col-md-3">用户名</th>
                <th class="col-md-3">创建时间</th>
                <th class="col-md-3">消息数</th>
                <th class="col-md-3">操作</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($users as $user) { ?>
            <tr>
              <td><?php echo htmlspecialchars($user["username"]); ?></td>
              <td><?php echo htmlspecialchars($user["register_time"]); ?></td>
              <td><?php echo htmlspecialchars($user['messages_count']); ?></td>
              <td>
                <form method="POST">
                  <input type="hidden" name="delete_user" value="<?php echo $user["id"]; ?>">
                  <button type="submit" onclick="return confirm('确定要删除此用户吗？');" class="btn btn-danger btn-sm">删除</button>
                </form>
              </td>
            </tr>
          <?php } ?>
        </tbody>
      </table>
    </div>
  </body>
</html>

消息管理（messages.php）完整代码：

<?php


include 'config.php';


$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);
$stmt = $pdo->query("SELECT messages.id, messages.message, messages.created_at, users.username FROM messages JOIN users ON messages.user_id = users.id");
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);


if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["delete_message"])) {
    $stmt = $pdo->prepare("DELETE FROM messages WHERE id = ?");
    $stmt->execute([$_POST["delete_message"]]);
    header("Location: messages.php");
}


?>


<!DOCTYPE html>
<html>
  <head>
    <title>留言板</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container mt-4">
      <h1>留言板</h1>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th class="col-md-1">用户名</th>
            <th class="col-md-8">留言内容</th>
            <th class="col-md-2">日期时间</th>
            <th class="col-md-1">操作</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($messages as $message) { ?>
            <tr>
              <td><?php echo htmlspecialchars($message["username"]); ?></td>
              <td><?php echo htmlspecialchars($message["message"]); ?></td>
              <td><?php echo htmlspecialchars($message["created_at"]); ?></td>
              <td>
                <form method="POST">
                  <input type="hidden" name="delete_message" value="<?php echo $message["id"]; ?>">
                  <button type="submit" onclick="return confirm('确定要删除此留言吗？');" class="btn btn-danger btn-sm">删除</button>
                </form>
              </td>
            </tr>
          <?php } ?>
        </tbody>
      </table>
    </div>
  </body>
</html>

感觉两个页面去管理网站好像有点浪费，想着用选项卡的方式去切换页面会不会好些，使用GPT改写后效果还可以。

图示用户管理和留言板是将所有的内容都显示出来的，没有进行分页，这里告诉GPT要学会自己分页了。

以下内容是我通过多次调试之后得到的代码：

// 定义每页显示的记录数和分页栏中最多显示的页码数
    $records_per_page = 10;
    $max_page_links = 5;


    // 处理用户列表的搜索和分页
    $page = isset($_GET["user_page"]) ? (int)$_GET["user_page"] : 1;
    $search = isset($_GET["user_search"]) ? trim($_GET["user_search"]) : "";
    $sql = "SELECT COUNT(*) FROM users";
    if (!empty($search)) {
      $sql .= " WHERE username LIKE :search";
    }
    $stmt = $pdo->prepare($sql);
    if (!empty($search)) {
      $stmt->bindValue(":search", "%$search%", PDO::PARAM_STR);
    }
    $stmt->execute();
    $num_users = (int)$stmt->fetchColumn();
    $num_pages = ceil($num_users / $records_per_page);
    $page = max(1, min($page, $num_pages));
    $offset = ($page - 1) * $records_per_page;
    $sql = "SELECT id, username, register_time, messages_count FROM users";
    if (!empty($search)) {
      $sql .= " WHERE username LIKE :search";
    }
    $sql .= " LIMIT $offset, $records_per_page";
    $stmt = $pdo->prepare($sql);
    if (!empty($search)) {
      $stmt->bindValue(":search", "%$search%", PDO::PARAM_STR);
    }
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);


    // 处理留言列表的搜索和分页
    $page2 = isset($_GET["message_page"]) ? (int)$_GET["message_page"] : 1;
    $search2 = isset($_GET["message_search"]) ? trim($_GET["message_search"]) : "";
    $sql = "SELECT COUNT(*) FROM messages JOIN users ON messages.user_id = users.id";
    if (!empty($search2)) {
      $sql .= " WHERE messages.message LIKE :search";
    }
    $stmt = $pdo->prepare($sql);
    if (!empty($search2)) {
      $stmt->bindValue(":search", "%$search2%", PDO::PARAM_STR);
    }
    $stmt->execute();
    $num_messages = (int)$stmt->fetchColumn();
    $num_pages2 = ceil($num_messages / $records_per_page);
    $page2 = max(1, min($page2, $num_pages2));
    $offset2 = ($page2 - 1) * $records_per_page;
    $sql = "SELECT messages.id, messages.message, messages.created_at, users.username FROM messages JOIN users ON messages.user_id = users.id";
    if (!empty($search2)) {
      $sql .= " WHERE messages.message LIKE :search";
    }
    $sql .= " ORDER BY messages.created_at DESC LIMIT $offset2, $records_per_page";
    $stmt = $pdo->prepare($sql);
    if (!empty($search2)) {
      $stmt->bindValue(":search", "%$search2%", PDO::PARAM_STR);
    }
    $stmt->execute();
    $messages = $stmt->fetchAll(PDO::FETCH_ASSOC);


    // 生成用户管理的搜索框和分页栏
    $search_form = '<form method="GET" class="mb-3"><div class="input-group">';
    $search_form .= '<input type="text" class="form-control" name="user_search" placeholder="搜索用户名">';
    $search_form .= '<button type="submit" class="btn btn-primary">搜索</button></div></form>';
    $paging_bar = '<nav><ul class="pagination">';
    if ($page > 1) {
      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=1&user_search=' . urlencode($search) . '">首页</a></li>';
      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . ($page - 1) . '&user_search=' . urlencode($search) . '">上一页</a></li>';
    }
    $start_page = max(1, $page - floor($max_page_links / 2));
    $end_page = min($num_pages, $page + floor($max_page_links / 2));
    if ($end_page - $start_page < $max_page_links - 1) {
      if ($start_page == 1) {
        $end_page = min($num_pages, $start_page + $max_page_links - 1);
      } else {
        $start_page = max(1, $end_page - $max_page_links + 1);
      }
    }
    for ($i = $start_page; $i <= $end_page; $i++) {
      $paging_bar .= '<li class="page-item' . ($i == $page ? ' active' : '') . '"><a class="page-link" href="?user_page=' . $i . '&user_search=' . urlencode($search) . '">' . $i . '</a></li>';
    }
    if ($page < $num_pages) {
      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . ($page + 1) . '&user_search=' . urlencode($search) . '">下一页</a></li>';
      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . $num_pages . '&user_search=' . urlencode($search) . '">末页</a></li>';
    }
    $paging_bar .= '</ul></nav>';


    // 生成留言板的搜索框和分页栏（与用户管理基本相同，不作过多解释）
    $search_form2 = '<form method="GET" class="mb-3"><div class="input-group">';
    $search_form2 .= '<input type="text" class="form-control" name="message_search" placeholder="搜索留言内容">';
    $search_form2 .= '<button type="submit" class="btn btn-primary">搜索</button></div></form>';
    $paging_bar2 = '<nav><ul class="pagination">';
    if ($page2 > 1) {
      $paging_bar2 .= '<li class="page-item"><a class="page-link" href="?message_page=1">首页</a></li>';
      $paging_bar2 .= '<li class="page-item' . ($page2 == 1 ? ' disabled' : '') . '"><a class="page-link" href="?message_page=' . ($page2 - 1) . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">上一页</a></li>';
    }
    $start_page2 = max(1, $page2 - floor($max_page_links / 2));
    $end_page2 = min($num_pages2, $page2 + floor($max_page_links / 2));
    if ($end_page2 - $start_page2 < $max_page_links - 1) {
      if ($start_page2 == 1) {
        $end_page2 = min($num_pages2, $start_page2 + $max_page_links - 1);
      } else {
        $start_page2 = max(1, $end_page2 - $max_page_links + 1);
      }
    }
    for ($i = $start_page2; $i <= $end_page2; $i++) {
      $paging_bar2 .= '<li class="page-item' . ($i == $page2 ? ' active' : '') . '"><a class="page-link" href="?message_page=' . $i . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">' . $i . '</a></li>';
    }
    if ($page2 < $num_pages2) {
      $paging_bar2 .= '<li class="page-item' . ($page2 == $num_pages2 ? ' disabled' : '') . '"><a class="page-link" href="?message_page=' . ($page2 + 1) . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">下一页</a></li>';
      $paging_bar2 .= '<li class="page-item"><a class="page-link" href="?message_page=' . $num_pages2 . '">末页</a></li>';
    }
    $paging_bar2 .= '</ul></nav>';

需要注意的是，代码中我进行了多个页面的页码定义，这样能够保证不会影响其他页面的翻页，否则在用户页面翻到第二页，消息页面也会跟着翻到第二页。

包括管理页面的操作按钮都是告诉GPT后让它帮我加的，另外我还加了搜索框，以便快速检索内容。接着在右上角加了跳转到首页的按钮，如果登录了就会跳转到聊天界面。

在使用管理界面时，一定要做好加密工作。GPT给我的答案是先做一个管理登录界面（admin-login.php），然后再检测设定的密码，如果通过则打开管理页面（admin.php）。

<?php


session_start();


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["password"];


    // 检查用户名和密码是否正确
    if ($username === "这里输入账号名" && $password === "这里输入密码") {
        $_SESSION["is_admin"] = true;  // 将管理员标记为已登录状态
        header("Location: admin.php");  // 跳转到用户管理 & 留言板页面
        exit;
    } else {
        $error_msg = "用户名或密码错误！";
    }
}


?>


<!DOCTYPE html>
<html>
  <head>
    <title>管理员登录_小轻世界聊天系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1.0>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        max-width: 600px;
        margin: 0 auto;
      }
</style>
  </head>
  <body>
    <div class="container mt-4">
      <h1>管理员登录</h1>
      <?php if (isset($error_msg)) { ?>
        <div class="alert alert-danger" role="alert">
          <?php echo $error_msg; ?>
        </div>
      <?php } ?>
      <form method="POST">
        <div class="mb-3">
          <label for="username" class="form-label">用户名：</label>
          <input type="text" name="username" id="username" class="form-control" required>
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码：</label>
          <input type="password" name="password" id="password" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
  </body>
</html>

当我们直接访问管理页面（admin.php）时，会直接弹出管理登录页面（admin-login.php）。

管理入口我用同样的方式，在前端加了这个按钮，然后整体排版了下。

因为这个项目只是为了测试GPT能力，所以以上管理页面的加密功能并不能完全保证安全性，仅供参考。

我还用layui做了另一个管理页面，感兴趣的可以让GPT给你定制，这里不给大家提供相应代码了。

其他优化

1.自适应页面

2.设置输入框占位符、登录页面图标、登录注册错误提示、注册成功提示。

3.管理页面显示有些问题，所以提出问题，让GPT一一排除解决。

4.在管理页面加了一个首页，用于查看统计信息。

三、疑难杂症

在设计这个系统的时候，会有无数的问题，并不会像以上设计流程那么轻松以下我列举一些比较棘手的问题。

1.在使用哈希加密密码时，如果加密解密过程没有设置好，会导致无法登陆，原密码也会丢失，而且数据加密后，可能直接用原密码登录会显示错误。我测试用给定的代码对密码进行加密后，147369的哈希值是错误的，正确加密参数应该是d7c6cfe4f5c5d7b7c3a7a9f5a7a2d5d7b7c3a7a9，但数据库里别保存的是fa4f71ec157b3cd857d85a461e339adbbfe8f65b，需要多次排查；

2.注册时需要有判重功能，保证数据唯一性，另外我也遇到过注册时会显示两条同样的注册信息产生，也可以直接告知GPT优化；

3.登录注册页面的提示不应直接使用脚本弹窗，而是使用块级元素进行展示，这样显示更加好看；

4.消息自动滑动到底部这个功能是通过多次提问去优化的；

5.为了保证数据实时显示，同时不让页面直接刷新，也需要不断优化才能得到相应结果；

6.因为每次在管理页面切换选项卡的页码时，会自动跳转到首页，需要优化这个；

问题太多，不胜枚举，大多问题我也忘了，大家在测试时，可以跟我评论交流。