PHP+jQuery+CSS3 网址收藏夹 - 添加、删除、锁定、搜索功能实现
使用 PHP+jQuery+CSS3 构建一个简单实用的网址收藏夹
本教程将带你一步步使用 PHP、jQuery 和 CSS3 构建一个功能齐全的网址收藏夹，并提供详细的代码示例和解释，帮助你轻松完成项目。
1. HTML 页面设计
首先，我们需要创建 HTML 页面，包含一个用于显示网址信息的表格，以及添加、删除、锁定、密码解锁、搜索等功能的按钮和输入框。表格的列包括网址名、URL 和状态等信息。
<!DOCTYPE html>
<html>
<head>
<title>网址收藏夹</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>网址收藏夹</h1>
<form>
<label for="name">网址名：</label>
<input type="text" id="name" name="name" required><br>
<label for="url">URL：</label>
<input type="url" id="url" name="url" required><br>
<label for="status">状态：</label>
<select id="status" name="status">
<option value="正常">正常</option>
<option value="异常">异常</option>
<option value="未知">未知</option>
</select><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="添加">
<button id="delete">删除</button>
<button id="lock">锁定</button>
<button id="unlock">解锁</button>
<input type="text" id="search" placeholder="搜索">
</form>
<table>
<thead>
<tr>
<th>网址名</th>
<th>URL</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<!-- 网址信息通过PHP读取txt文件动态生成 -->
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
2. PHP 处理表单数据
PHP 主要负责处理用户提交的表单数据，我们将使用本地 txt 文件来保存收藏的网址信息。
文件名：add.php
<?php
// 过滤用户输入
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
$url = filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL);
$status = filter_input(INPUT_POST, 'status', FILTER_SANITIZE_STRING);
$password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);
// 检查URL是否合法
if (!$url) {
echo 'URL不合法';
exit;
}
// 保存网址信息到txt文件
$file = fopen('data.txt', 'a');
fwrite($file, "$name $url $status $password
");
fclose($file);
// 动态添加网址信息到表格
echo "<tr>
";
echo "<td>$name</td>
";
echo "<td><a href="$url" target="_blank">$url</a></td>
";
echo "<td class="status">$status</td>
";
echo "<td><input type="checkbox"></td>
";
echo "</tr>
";
?>
3. jQuery 处理用户操作
jQuery 主要负责处理用户的操作，例如点击添加按钮时弹出对话框，输入网址名和URL以及状态等信息，然后将其提交给 PHP 文件处理。可以使用 jQuery 的 ajax 方法实现异步提交表单数据，避免页面刷新。
文件名：main.js
$(document).ready(function() {
// 添加网址
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'add.php',
data: $(this).serialize(),
success: function(response) {
$('tbody').append(response);
$('form')[0].reset();
}
});
});
// 删除网址
$('#delete').click(function() {
$.ajax({
type: 'POST',
url: 'delete.php',
data: $('input[type="checkbox"]:checked').serialize(),
success: function(response) {
$('input[type="checkbox"]:checked').parent().parent().remove();
}
});
});
// 锁定网址
$('#lock').click(function() {
$.ajax({
type: 'POST',
url: 'lock.php',
data: $('input[type="checkbox"]:checked').serialize(),
success: function(response) {
$('input[type="checkbox"]:checked').parent().siblings('.status').text(response);
}
});
});
// 解锁网址
$('#unlock').click(function() {
var password = prompt('请输入密码');
$.ajax({
type: 'POST',
url: 'unlock.php',
data: {password: password, ids: $('input[type="checkbox"]:checked').serialize()},
success: function(response) {
if (response == 'success') {
$('input[type="checkbox"]:checked').parent().siblings('.status').text('正常');
} else {
alert('密码错误');
}
}
});
});
// 搜索网址
$('#search').keyup(function() {
var keyword = $(this).val();
$('tbody tr').hide();
$('tbody tr:contains("' + keyword + '")').show();
});
});
4. CSS3 美化页面样式
CSS3 主要用于美化页面样式，例如使用表格样式和动态效果等。可以使用 CSS3 的 transition 和 animation 属性实现动态效果，也可以使用 CSS 预处理器或者前端框架来简化样式编写过程，并提高兼容性。
文件名：style.css
table {
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type="submit"], button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover, button:hover {
background-color: #3e8e41;
}
input[type="text"], input[type="url"], select, input[type="password"] {
padding: 8px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="checkbox"] {
margin: 10px;
}
#search {
float: right;
width: 200px;
height: 30px;
margin-top: -32px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.hide {
display: none;
}
5. 保证代码安全和可维护性
保存网址信息时需要考虑安全性问题，可以使用 PHP 的过滤函数对用户输入进行过滤和验证，防止注入攻击等。在使用文件操作函数时，需要确保文件的读写权限和路径等设置正确，避免出现错误。
在编写代码时需要注意代码的可读性和可维护性，可以使用代码规范和注释来提高代码质量和可维护性。可以使用 PHP 的函数和类来组织代码，避免出现冗余代码和难以维护的代码结构。
6. 实现搜索功能
搜索功能中可以使用 jQuery 实现模糊搜索，可以使用 jQuery 的 keyup 事件实现实时搜索，并使用 jQuery 的选择器筛选符合条件的网址信息并显示出来。在处理大量数据时需要注意性能问题，可以考虑使用后端的搜索引擎或者数据库来提高搜索效率。
7. 其他 PHP 文件代码
文件名：delete.php
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要删除的网址ID
$ids = $_POST['id'];
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要删除的网址，则将其从txt文件中删除
if (in_array($id, $ids)) {
unset($file[$key]);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
?>
文件名：lock.php
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要锁定的网址ID
$ids = $_POST['id'];
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要锁定的网址，则将其状态设置为锁定
if (in_array($id, $ids)) {
$data = explode(" ", $line);
$data[2] = '锁定';
$file[$key] = implode(" ", $data);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
// 返回锁定后的状态
echo '锁定';
?>
文件名：unlock.php
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要解锁的网址ID
$ids = $_POST['id'];
// 获取密码
$password = $_POST['password'];
// 检查密码是否正确
if ($password != '123456') {
echo '密码错误';
exit;
}
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要解锁的网址，则将其状态设置为正常
if (in_array($id, $ids)) {
$data = explode(" ", $line);
$data[2] = '正常';
$file[$key] = implode(" ", $data);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
// 返回解锁成功信息
echo 'success';
?>
总结
通过以上步骤，我们成功地使用 PHP、jQuery 和 CSS3 构建了一个简单实用的网址收藏夹。你可以根据自己的需求对代码进行修改和扩展，例如添加更多功能，例如分类、标签等，并使用数据库来存储网址信息，提高数据安全性 and 性能。
希望本教程对你有所帮助。
原文地址: https://www.cveoy.top/t/topic/mQox 著作权归作者所有。请勿转载和采集!