你真的不得不佩服ChatGPT的能力，这段时间确实爱不释手，自己也做了很多有趣的小工具，比如骗子QQ公示、小轻一言、音乐播放器、资源库、知乎热榜、新闻热门等页面。
今天就主要谈谈我的得意之作——小轻世界畅聊，一起来看看被大佬鄙视过的系统到底是怎么创作出来的。
一、界面
登录注册
登录界面中包含登录和注册按钮，只需要输入用户名和密码，没有其他的验证，聊天完全匿名。
登录后直接跳转到聊天系统，这个界面会自动查看最新消息，如果想看历史消息可以直接滑动滑块。我们在发送消息时，也会自动定位到最新消息，但如果滑动滑块或者滚动滚轮将会变成手动定位。
聊天界面对方的内容是显示在左边，自己的消息在右边，并且有显示发送时间，消息条也有颜色区分。
唯一缺陷是在定位消息时会先自动滚动到首条消息，再滑动到最新一条。
点击聊天页面顶部的管理按钮可以进入后台管理系统。
管理主页
用户管理
留言板
以上就是所有的界面了，我们先看明白界面，就懂得我们需要做的界面有哪些。
二、编写页面
首先我先确定好用什么框架写这个系统，效率会高很多。在layui和bootstrap中我选择了后者，因为后者的界面我更喜欢，大家也可以使用自己喜欢的框架编写。
数据库
为了避免每个页面引用数据库信息，所以我们引入config.php文件。
我们就可以直接在后面需要引入数据库的页面加入这个代码即可
值得注意的是，我们在设计数据库时，要先确定需要哪几个表，哪几个参数。
messages表中有user_id、message、created_at，分别对应的是用户ID、用户留言内容、留言时间。
users表中有username、password、register_time、messages_count，分别对应的是用户名、用户密码、注册时间、消息数量。、
另外，这些参数我们需要告诉GPT并让其判断使用什么类型的数据去储存它，以免调用或储存时出错。
登录注册
登录界面我直接在index.php中编写，然后验证成功之后就直接跳转到chat.php登录页面。
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的脚本，还可以处理滑块刷新后回位的问题。
这里的效果是，收到消息后会刷新，而刷新后的滑块不是在最底部的话，系统会自自动划到最底部，这中间会有一秒的反应时间。如果在这一秒内滑动了滑块，则滑块不会滑动到最底部，这是便于用户翻阅历史消息。
另外，这个页面的登录后账号无法退出登陆（注销），所以我加入了logout.php注销页面。
注销页面
这个代码很简单，ChatGPT给的代码是：
这样的话，点击退出按钮即可跳转到登录界面（index.php）。
我们需要在前端加一个退出按钮，为了美观，还使用了font-awesome图标库，这样设计出来就比较人性化了。大家注意看我的系统也能发现，我所有的图标都是使用的这个图标库，当然大家也可以自行设计图标。
管理页面
现在我们还缺一个管理系统，本来我没想着做的，但是在测试系统时发了很多垃圾内容，想着清理掉，弄个管理页面方便些，也想着后期管理用户和消息很清晰，就做了。
管理页面，我做了两个单页，一个是用户管理，一个是消息管理。
用户管理（users.php）完整代码：
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");
}
?>
用户管理
用户管理
用户名
创建时间
消息数
操作
消息管理（messages.php）完整代码：
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");
}
?>
留言板
留言板
用户名
留言内容
日期时间
操作
感觉两个页面去管理网站好像有点浪费，想着用选项卡的方式去切换页面会不会好些，使用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 = '';
$paging_bar = '';
// 生成留言板的搜索框和分页栏（与用户管理基本相同，不作过多解释）
$search_form2 = '';
$paging_bar2 = '';需要注意的是，代码中我进行了多个页面的页码定义，这样能够保证不会影响其他页面的翻页，否则在用户页面翻到第二页，消息页面也会跟着翻到第二页。
包括管理页面的操作按钮都是告诉GPT后让它帮我加的，另外我还加了搜索框，以便快速检索内容。接着在右上角加了跳转到首页的按钮，如果登录了就会跳转到聊天界面。
在使用管理界面时，一定要做好加密工作。GPT给我的答案是先做一个管理登录界面（admin-login.php），然后再检测设定的密码，如果通过则打开管理页面（admin.php）。
管理员登录_小轻世界聊天系统
管理员登录
当我们直接访问管理页面（admin.php）时，会直接弹出管理登录页面（admin-login.php）。
管理入口我用同样的方式，在前端加了这个按钮，然后整体排版了下。
因为这个项目只是为了测试GPT能力，所以以上管理页面的加密功能并不能完全保证安全性，仅供参考。
我还用layui做了另一个管理页面，感兴趣的可以让GPT给你定制，这里不给大家提供相应代码了。
其他优化
1.自适应页面
2.设置输入框占位符、登录页面图标、登录注册错误提示、注册成功提示。
3.管理页面显示有些问题，所以提出问题，让GPT一一排除解决。
4.在管理页面加了一个首页，用于查看统计信息。
三、疑难杂症
在设计这个系统的时候，会有无数的问题，并不会像以上设计流程那么轻松以下我列举一些比较棘手的问题。
1.在使用哈希加密密码时，如果加密解密过程没有设置好，会导致无法登陆，原密码也会丢失，而且数据加密后，可能直接用原密码登录会显示错误。我测试用给定的代码对密码进行加密后，147369的哈希值是错误的，正确加密参数应该是d7c6cfe4f5c5d7b7c3a7a9f5a7a2d5d7b7c3a7a9，但数据库里别保存的是fa4f71ec157b3cd857d85a461e339adbbfe8f65b，需要多次排查；
2.注册时需要有判重功能，保证数据唯一性，另外我也遇到过注册时会显示两条同样的注册信息产生，也可以直接告知GPT优化；
3.登录注册页面的提示不应直接使用脚本弹窗，而是使用块级元素进行展示，这样显示更加好看；
4.消息自动滑动到底部这个功能是通过多次提问去优化的；
5.为了保证数据实时显示，同时不让页面直接刷新，也需要不断优化才能得到相应结果；
6.因为每次在管理页面切换选项卡的页码时，会自动跳转到首页，需要优化这个；
问题太多，不胜枚举，大多问题我也忘了，大家在测试时，可以跟我评论交流。