阅读量:0
要用PHP搭建一个TodoList应用，你需要遵循以下步骤：
环境准备 安装Apache、PHP和MySQL。可以使用XAMPP集成环境或者手动配置。确保PHP和MySQL运行正常。
创建数据库和数据表 在MySQL中创建一个名为"todolist"的数据库，并创建一个名为"tasks"的数据表，包含id（主键，自增），task_name（任务名称）和status（任务状态）三个字段。
CREATE DATABASE todolist; USE todolist; CREATE TABLE tasks ( id INT AUTO_INCREMENT PRIMARY KEY, task_name VARCHAR(255) NOT NULL, status BOOLEAN DEFAULT 0 ); - 连接数据库 在PHP文件中，创建一个函数来连接到MySQL数据库。
function connectDatabase() { $servername = "localhost"; $username = "root"; $password = ""; // 如果设置了密码，请填写 $dbname = "todolist"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } return $conn; } - 添加任务 创建一个HTML表单，让用户输入任务名称。然后在PHP中处理表单提交，将任务插入到数据库中。
<!-- index.php --> <!DOCTYPE html> <html> <head> <title>TodoList</title> </head> <body> <h1>TodoList</h1> <form action="add_task.php" method="post"> <input type="text" name="task_name" placeholder="添加任务"> <button type="submit">添加</button> </form> </body> </html> // add_task.php <?php require_once 'connect.php'; $task_name = $_POST['task_name']; if (!empty($task_name)) { $conn = connectDatabase(); $stmt = $conn->prepare("INSERT INTO tasks (task_name) VALUES (?)"); $stmt->bind_param("s", $task_name); $stmt->execute(); header('Location: index.php'); } else { echo "任务名称不能为空"; } ?> - 显示任务列表 在index.php中，从数据库查询所有任务并显示在页面上。
// index.php <?php require_once 'connect.php'; $conn = connectDatabase(); $result = $conn->query("SELECT * FROM tasks"); ?> <!DOCTYPE html> <html> <head> <title>TodoList</title> </head> <body> <h1>TodoList</h1> <form action="add_task.php" method="post"> <input type="text" name="task_name" placeholder="添加任务"> <button type="submit">添加</button> </form> <ul> <?php while ($row = $result->fetch_assoc()) : ?> <li><?php echo $row['task_name']; ?></li> <?php endwhile; ?> </ul> </body> </html> - 完成和删除任务 在任务列表旁边添加复选框和删除按钮，用户可以勾选已完成的任务和删除任务。
<!-- index.php --> <ul> <?php while ($row = $result->fetch_assoc()) : ?> <li> <input type="checkbox" name="completed" <?php if ($row['status']) echo 'checked'; ?>> <?php echo $row['task_name']; ?> <a href="delete_task.php?id=<?php echo $row['id']; ?>">删除</a> </li> <?php endwhile; ?> </ul> // delete_task.php <?php require_once 'connect.php'; $id = $_GET['id']; if (!empty($id)) { $conn = connectDatabase(); $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?"); $stmt->bind_param("i", $id); $stmt->execute(); header('Location: index.php'); } else { echo "无效的ID"; } ?> - 更新任务状态 当用户勾选任务时，更新数据库中任务的状态。
<!-- index.php --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script> $(document).ready(function () { $('input[type="checkbox"]').change(function () { var taskId = $(this).closest('li').data('id'); var isCompleted = $(this).is(':checked') ? 1 : 0; $.ajax({ url: 'update_task.php', type: 'POST', data: {id: taskId, status: isCompleted}, success: function (response) { console.log(response); } }); }); }); </script> // update_task.php <?php require_once 'connect.php'; $id = $_POST['id']; $status = $_POST['status']; if (!empty($id)) { $conn = connectDatabase(); $stmt = $conn->prepare("UPDATE tasks SET status = ? WHERE id = ?"); $stmt->bind_param("ii", $status, $id); $stmt->execute(); echo "任务状态更新成功"; } else { echo "无效的ID"; } ?> 现在你已经创建了一个基本的TodoList应用。你可以根据需要进一步优化和完善功能。
