我用ChatGPT做开发之云盘资源分享系统
原创
前言
我的电影群人越来越多，虽然我已经在群内已经设置了相关的机器人回复，但取资源的可能还是不能很快找到相应的资源。另外，也有其他需要分享的人，不同的人可能求同一个资源，消息一多，就被淹没了。
为了保证大家能够及时找到合适的资源，甚至可以不通过群内关键词获取资源，我使用ChatGPT开发了这个资源库，这个资源库和网上大多数的资源一样，是可以进行搜索和发资源的，但是这个资源库的作用是，去除更多不需要的功能，打造极简且易于管理的系统。
图片
话不多说，讲讲它的功能：
1.免登陆投稿功能，直接解析资源为XX云盘；
2.支持单个和批量投稿，保证效率；
3.支持精确搜索功能；
4.备注可以注明资源相关介绍，保证准确；
5.免登陆前端管理系统，可以对资源进行修改和删除工作；
6.支持去重功能，保证上传的资源名称和链接不会有重复；
图片
在页面上，可以看到，网站使用的是bootstrap样式搭建的，极简样式，几乎没有任何的自建样。再者使用了页码和前端修改功能，可能对于新手用户来说还是比较麻烦的，但是看了我上期《我用ChatGPT做开发之小轻世界聊天系统》就知道，其实页码功能不是最难的，前端修改功能才是多难的。
前端修改功能，需要加一个弹窗，检测修改的链接是否为真实链接，还要对其查重等等，其中的逻辑比较麻烦，在后面我会一点点给大家讲到，这里会从零开始，教新手怎么去开发这样的系统。
一、界面
网站需要这几个页面：
- index.php(首页)
- tougao.php（单个投稿）
- resources.php（批量投稿）
- edit.php（编辑）
- delete.php（删除）
- config.php（数据库信息）
图片
图片
二、开发页面
为了开发成本更低，我们确定使bootstrap样式开发页面，开发更省心。
因为几乎每个页面都会加载数据库，以保证数据的上传和下载。
数据库
同样，我们直接问ChatGPT如何分离数据库信息，以方便在其他页面调用数据库文件，系统会给出这个代码：
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
mysqli_set_charset($conn, "utf8");;然后我们就可以在其他页面中这样引入这个文件了：
<?phprequire_once 'config.php';现在的数据库是没有任何设置的，我们需要询问ChatGPT，自己需要哪些内容，并告诉这些内容的用途，比如“我需要一个数据库。用于存放资源名、资源链接、资源备注，请给出完整SQL代码”。
图片
自己需要先在服务器中创建一个数据库，并打开数据库的phpMyAdmin管理页面 ，输入相关的代码：
CREATE TABLE resources (
id INT AUTO_INCREMENT PRIMARY KEY,
resource_name VARCHAR(255),
resource_link VARCHAR(255),
resource_remark VARCHAR(255)
);其中resources是数据表名，是可以自定义的。
首页
我们要确定整个页面展示资源名、资源链接、资源备注、资源设置这几个参数，ChatGPT给出这个代码：
<table class="table">
<thead>
<tr>
<th scope="col">资源名称</th>
<th scope="col">链接</th>
<th scope="col">备注</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>资源1</td>
<td><a href="链接1">链接1</a></td>
<td>备注1</td>
<td>操作1</td>
</tr>
<tr>
<td>资源2</td>
<td><a href="链接2">链接2</a></td>
<td>备注2</td>
<td>操作2</td>
</tr>
<!-- 添加更多行 -->
</tbody>
</table>这个是表格的样式，数据也是示例数据，我们需要的是，将表格链接到数据库，以展示动态数据。
现在已经有数据库的参数、表格样式，把已有信息告诉ChatGPT，并要求其完成数据对接：
图片
我们调整后index.php代码为：
<?php
require_once 'config.php';
// 查询资源信息
$sql = "SELECT * FROM resources";
$result = mysqli_query($conn, $sql);
// 检查查询结果
if (mysqli_num_rows($result) > 0) {
// 输出表头
echo '
<table class="table">
<thead>
<tr>
<!-- <th scope="col">#</th> -->
<th scope="col">资源名称</th>
<th scope="col">链接</th>
<th scope="col">备注</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>';
// 输出每行数据
while ($row = mysqli_fetch_assoc($result)) {
echo '
<tr>
<!-- <th scope="row">' . $row['id'] . '</th> -->
<td>' . $row['resource_name'] . '</td>
<td><a href="' . $row['resource_link'] . '">' . $row['resource_link'] . '</a></td>
<td>' . $row['resource_remark'] . '</td>
<td>操作</td>
</tr>';
}
// 输出表尾
echo '
</tbody>
</table>';
} else {
echo "没有找到资源信息";
}
// 关闭数据库连接
mysqli_close($conn);
?>但是我的习惯一般是前后端分离，就是会将后端查询和前端展示内容做个代码分离，这样方便我们去查阅问题所在。
<?php
require_once 'config.php';
$result = mysqli_query($conn, $sql);
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>首页 - 资源库</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">资源名称</th>
<th scope="col">链接</th>
<th scope="col">备注</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td><?php echo $row["resource_name"]; ?></td>
<td><?php echo $row["resource_link"]; ?></td>
<td><?php echo $row["resource_remark"]; ?></td>
<td class="col-1">待定</td>
</tr>
<?php } ?>
</tbody>
</table>
<body>
</html>这就是简单的雏形了，这里我们需要上传一条数据看看是否能够展示出来。
接下来我们来开发投稿页面。
投稿页面
用同样的方法，直接告诉ChatGPT你的需求，“需要用bootstrap样式只做一个表单，用于提交resource_name、resource_link、resource_remark数据。
这里比较简单，对接好数据库就行，下面是我自己的资源库投稿页面部分代码：
图片
我的投稿页面加入了查重和检测网址的功能，投稿完成后自动跳转到主页（index.php）。
检测网址的代码如下：
<script>
function checkInput() {
var input = document.getElementsByName("resource_link")[0].value;
var submitBtn = document.getElementById("submitBtn");
if (isValidUrl(input)) {
submitBtn.disabled = false;
submitBtn.style.opacity = 1.0;
} else {
submitBtn.disabled = true;
submitBtn.style.opacity = 0.5;
}
}
function isValidUrl(url) {
return url.match(/(ftp|http|https):\/\/[^\s]+/g);
}
</script>现在我们可以测试一下是否能提交，如果能提交，则主页会直接展示数据库的内容。
编辑与删除
在主页列表中，直接设置编辑按钮，以便管理员可以直接修改数据。这里需要引入的是编辑（edit.php）和删除（delete.php）页面。
需要先对这两个页面进行设置，才能在列表中对其调用。这两个页面是可以直接通过询问ChatGPT获取到的，基本不需要调试，拿着就可以用，如果有任何报错，携带源码后加入保存内容，如源码+“为什么会出现空白，请修改”。
编辑（edit.php）：
<?php
require_once 'config.php';
// 校验密码
$password = $_POST['password'];
if ($password !== '这里设置密码') {
echo 'password_error';
exit();
}
// 获取 POST 数据
$id = $_POST['id'];
$name = $_POST['resource_name'];
$yunurl = $_POST['resource_url'];
$tips = $_POST['resource_remark'];
// 检查是否为合法的链接
if (!filter_var($resource_url, FILTER_VALIDATE_URL)) {
die("错误：不是有效的链接！");
}
// 先查询该条记录是否存在
$sql_query = "SELECT * FROM resources WHERE id='$id'";
$result = mysqli_query($conn, $sql_query);
if ($result && mysqli_num_rows($result) > 0) {
// 检查是否与现有记录完全匹配
$sql_check = "SELECT * FROM resources WHERE (resource_name='$resource_name' OR resource_url='$resource_url') AND id!='$id'";
$result_check = mysqli_query($conn, $sql_check);
if ($result_check && mysqli_num_rows($result_check) > 0) {
echo 'similar_record';
exit();
}
// 更新该条记录
$sql_update = "UPDATE resources SET name='$resource_name', resource_url='$resource_url', resource_remark='$resource_remark' WHERE id='$id'";
if (mysqli_query($conn, $sql_update)) {
echo 'success';
} else {
echo 'failed';
}
} else {
// 检查是否存在相同链接或者名称的记录
$sql_check = "SELECT * FROM resources WHERE (resource_name='$resource_name' OR resource_url='$resource_url')";
$result_check = mysqli_query($conn, $sql_check);
if ($result_check && mysqli_num_rows($result_check) > 0) {
echo 'similar_record';
exit();
}
// 插入新纪录
$sql_insert = "INSERT INTO resources (resource_name, resource_url, resource_remark) VALUES ('$resource_name', '$resource_url', '$resource_remark')";
if (mysqli_query($conn, $sql_insert)) {
echo 'success';
} else {
echo 'failed';
}
}
$conn->close();
?>其中这个插入代码是有查重功能的，按需可以增删。
删除（delete.php）：
<?php
require_once 'config.php';
// 获取POST数据
$id = $_POST['id'];
$password = $_POST['password'];
if ($password === '这里设置密码') {
// 先查询该条记录是否存在
$sql_query = "SELECT * FROM resources WHERE id='$id'";
$result = mysqli_query($conn, $sql_query);
if ($result && mysqli_num_rows($result) > 0) {
// 删除该条记录
$sql_delete = "DELETE FROM resources WHERE id='$id'";
if (mysqli_query($conn, $sql_delete)) {
echo 'success';
} else {
echo 'failed';
}
} else {
echo 'record_not_found';
}
} else {
echo 'password_error';
}
$conn->close();
?>其中 ，password是需要自己设置的，也就是说，我们是通过直接设置密码来验证的，并不是数据库，验证密码通过后就可以直接对数据进行删除操作。
在操作按钮处调用这俩页面，需要设置一个窗口，并设置相关的按钮，完成这个操作。可以直接让ChatGPT直接为我们设置一个按钮，点击后弹出这个输入内容的弹窗，底下加入编辑和删除、取消功能，如图设计：
图片
批量投稿
批量投稿页面使用的是文本框中按格式填写去识别数据的，一行一个资源，数据用英文逗号隔开“,”，备注设置的是非必要内容。
图片
这部分需要长时间多次调试才能设置成功，ChatGPT并不能直接给出正确的结果，需要不断优化和调试。
以下是我的资源库批量投稿的完整代码，数据与上述举例的数据库命名并不对应，所以需要自行修改统一，此页面并非必须，只是我觉得这样上传资源方便些！
<?php
require_once 'config.php';
// 检测连接
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$resources = $_POST["resources"];
// 解析资源列表
$resourceList = explode(PHP_EOL, $resources);
$insertValues = [];
$keys = [];
foreach ($resourceList as $resource) {
$data = explode(',', trim($resource));
if (count($data) >= 2 && count($data) <= 3) {
$name = $conn->real_escape_string(trim($data[0]));
$url = $conn->real_escape_string(trim($data[1]));
if (!filter_var($url, FILTER_VALIDATE_URL)) {
$response = array('status' => 'error', 'msg' => '链接格式错误：' . $url);
echo json_encode($response);
exit;
}
$tips = count($data) === 3 ? "'" . $conn->real_escape_string(trim($data[2])) . "'" : 'NULL';
// 查重
$checkSql = "SELECT COUNT(*) AS count FROM lianjie WHERE name = '$name' AND yunurl = '$url'";
$checkResult = $conn->query($checkSql);
if ($checkResult->num_rows > 0) {
while ($row = $checkResult->fetch_assoc()) {
$count = intval($row["count"]);
if ($count > 0) { // 已存在相同记录
echo json_encode(array('status' => 'error', 'msg' => '已存在相同资源：' . $resource));
exit;
}
}
}
array_push($insertValues, "('$name', '$url', $tips)");
} else {
// 提示参数不正确
echo json_encode(array('status' => 'error', 'msg' => '参数格式错误'));
exit;
}
}
// 执行插入操作
if (!empty($insertValues)) {
$sql = "INSERT INTO lianjie (name, yunurl, tips) VALUES " . implode(',', $insertValues) . " ON DUPLICATE KEY UPDATE tips = VALUES(tips)";
if ($conn->query($sql) === FALSE) {
echo json_encode(array('status' => 'error'));
} else {
echo json_encode(array('status' => 'success'));
}
} else {
echo json_encode(array('status' => 'empty'));
}
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>批量添加资源</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<h2 class="text-center mb-4">批量添加资源</h2>
<form id="resourceForm">
<div class="form-group">
<label for="resources">资源列表（每行一条，格式：“名称,链接,[备注]”）</label>
<textarea class="form-control" id="resources" rows="10"></textarea>
</div>
<div class="row">
<div class="col-sm-12 text-center d-flex justify-content-between">
<button type="button" class="btn btn-secondary mt-3 mr-2" onclick="location.href='tougao'">返回单个投稿</button>
<button type="submit" class="btn btn-primary mt-3" id="submitBtn">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function() {
$('#resourceForm').on('submit', function(event) {
event.preventDefault();
$('#submitBtn').attr('disabled', true);
$.ajax({
url: 'resources.php',
type: 'post',
dataType: 'json',
data: { resources: $('#resources').val().trim() },
success: function(response) {
if (response.status === 'success') {
alert('成功添加资源');
location.reload();
} else if (response.status === 'empty') {
alert('没有需要添加的资源');
} else {
alert(response.msg);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert('提交失败，请稍后再试');
},
complete: function() {
$('#submitBtn').attr('disabled', false);
}
});
});
});
</script>
</body>
</html>至此，所有页面的开发已经完成，现在就是对一些页面的优化了，比如数据量比较多之后，该如何设置页码，如何加入搜索功能，还有一些细节需要优化。下面我们继续和ChatGPT一起开发！
三、细节优化
页码
页码的设置相信大家在前面的小轻世界畅聊的例子中已经学会了，这里也简单讲讲吧，这里的页码设置是没有其他页码系统混淆，所以比较方便。
首先要在后端处理每页显示的资源多少：
// 分页相关
$pageSize = 10; // 每页显示的记录数
$page = isset($_GET['page']) ? (int) $_GET['page'] : 1; // 当前页码，默认为1
$start = ($page - 1) * $pageSize; // 每页显示记录的起始位置另外展示三页页码，其他页码直接用“…”代替，设置上/下一页。
<?php if ($count > $pageSize) { ?>
<div class="pagination justify-content-center">
<ul class="pagination">
<?php
$totalPage = ceil($count / $pageSize); // 总页数
$pagePrev = $page - 1; // 上一页页码
$pageNext = $page + 1; // 下一页页码
// 处理上一页按钮
if ($page == 1) {
echo '<li class="page-item disabled"><a class="page-link" href="#"><</a></li>';
} else {
echo '<li class="page-item"><a class="page-link" href="?page=' . $pagePrev . '&q=' . $q . '"><</a></li>';
}
// 处理中间的页码按钮
for ($i = 1; $i <= $totalPage; $i++) {
if ($i == $page) {
echo '<li class="page-item active"><a class="page-link" href="#">' . $i . '</a></li>';
} else {
if ($i >= $page-1 && $i <= $page+1 || $i == 1 || $i == $totalPage) {
echo '<li class="page-item"><a class="page-link" href="?page=' . $i . '&q=' . $q . '">' . $i . '</a></li>';
} else if ($i == $page-2 || $i == $page+2) {
echo '<li class="page-item"><span class="page-link">...</span></li>';
}
}
}
// 处理下一页按钮
if ($page == $totalPage) {
echo '<li class="page-item disabled"><a class="page-link" href="#">></a></li>';
} else {
echo '<li class="page-item"><a class="page-link" href="?page=' . $pageNext . '&q=' . $q . '">></a></li>';
}
?>
</ul>
</div>
<?php } ?>搜索
接下来需要设置搜索页面：
<form class="d-flex mb-4" action="" method="get">
<input class="form-control mr-2" type="search" placeholder="输入资源名称" aria-label="Search" name="q" style="width: 200px;">
<button class="btn btn-outline-secondary" type="submit">搜索</button>
</form>当然别忘了对后端数据进行处理，否则搜索不到结果。
// 判断是否有搜索关键词
if (isset($_GET['q'])) {
$q = $_GET['q'];
// 查询符合条件的总记录数
$sqlCount = "SELECT COUNT(*) as count FROM lianjie WHERE name LIKE '%$q%'";
$countResult = mysqli_query($conn, $sqlCount);
$countRow = mysqli_fetch_assoc($countResult);
$count = $countRow['count'];
// 查询符合条件的数据
$sql = "SELECT * FROM lianjie WHERE name LIKE '%$q%' ORDER BY id DESC LIMIT $start, $pageSize";
} else {
// 查询总记录数
$sqlCount = "SELECT COUNT(*) as count FROM lianjie";
$countResult = mysqli_query($conn, $sqlCount);
$countRow = mysqli_fetch_assoc($countResult);
$count = $countRow['count'];
// 查询当前页数据
$sql = "SELECT * FROM lianjie ORDER BY id DESC LIMIT $start, $pageSize";
}以上就是本期教程的全部内容，看到这里我相信很多人是真的喜欢代码，喜欢编程。在开发程序过程中我们会遇到各式各样的问题，就像资源库这个项目一样，我花很长时间对其进行调试，包括这个批量投稿的页面除了bug也是前几天才修复好。还好的是，有了ChatGPT能帮我们去解决，相当于请了一个老师，可视化可沟通编程，关键还没脾气。
自我用ChatGPT开发以来，已经有两月，除去之前说的音乐试听网、骗子网、小轻一言等，我这段时间开发了某音解析、元气壁纸解析、新版资源网等，我还会继续做下去，如果对ChatGPT开发感兴趣的可以持续关注我，有不懂的可以在评论区留言。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录