我的电影群人越来越多,虽然我已经在群内已经设置了相关的机器人回复,但取资源的可能还是不能很快找到相应的资源。另外,也有其他需要分享的人,不同的人可能求同一个资源,消息一多,就被淹没了。
为了保证大家能够及时找到合适的资源,甚至可以不通过群内关键词获取资源,我使用ChatGPT开发了这个资源库,这个资源库和网上大多数的资源一样,是可以进行搜索和发资源的,但是这个资源库的作用是,去除更多不需要的功能,打造极简且易于管理的系统。
话不多说,讲讲它的功能:
1.免登陆投稿功能,直接解析资源为XX云盘;
2.支持单个和批量投稿,保证效率;
3.支持精确搜索功能;
4.备注可以注明资源相关介绍,保证准确;
5.免登陆前端管理系统,可以对资源进行修改和删除工作;
6.支持去重功能,保证上传的资源名称和链接不会有重复;
在页面上,可以看到,网站使用的是bootstrap样式搭建的,极简样式,几乎没有任何的自建样。再者使用了页码和前端修改功能,可能对于新手用户来说还是比较麻烦的,但是看了我上期《我用ChatGPT做开发之小轻世界聊天系统》就知道,其实页码功能不是最难的,前端修改功能才是多难的。
前端修改功能,需要加一个弹窗,检测修改的链接是否为真实链接,还要对其查重等等,其中的逻辑比较麻烦,在后面我会一点点给大家讲到,这里会从零开始,教新手怎么去开发这样的系统。
网站需要这几个页面:
为了开发成本更低,我们确定使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 删除。