广州微信开发（我用ChatGPT做开发之小轻世界聊天系统）

你真的不得不佩服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.因为每次在管理页面切换选项卡的页码时，会自动跳转到首页，需要优化这个；

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