写给Pythoner的前端进阶指南（九）实战三：一个简单的任务管理系统

写给Pythoner的前端进阶指南系列：

在前端进阶系列的前几篇中，我们深入学习了前端只是，并完成了一些简单的项目。这篇文章将引领你进入一个更具实战性的阶段——开发一个简单的任务管理系统。在这个项目中，你不仅可以巩固前端基础，还能够学习如何将前端与后端（尤其是 Python）结合，开发出一个完整的 Web 应用。

项目概述

任务管理系统是一个常见的前端项目，主要用于记录和管理日常任务。我们将在这个系统中实现以下功能：

添加新任务
查看任务列表
标记任务为已完成
删除任务
使用本地存储（LocalStorage）保存任务数据

通过构建这个项目，你将掌握前端开发中的一些核心概念，如 DOM 操作、事件处理、数据存储等。同时，这个项目也为后端开发者（特别是 Pythoner）提供了一个良好的实践平台，后续可以将这个前端与 Python 后端（如 Flask 或 Django）结合，进一步扩展功能。

技术栈

HTML：构建页面的基本结构
CSS：定义页面的样式和布局
JavaScript：实现动态交互功能
LocalStorage：在浏览器中存储数据
JSON：任务数据的存储格式

第一步：设计页面结构

首先，我们需要设计页面的基本结构。该结构包括一个输入框用于输入任务内容，一个按钮用于添加任务，以及一个列表区域显示所有任务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>任务管理系统</h1>
        <input type="text" id="task-input" placeholder="请输入任务...">
        <button id="add-task-btn">添加任务</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

解释：

<input>：用于输入新任务。
<button>：点击时将新任务添加到任务列表。
<ul>：用于展示任务列表。

第二步：为页面添加样式

接下来，为页面添加一些基本的样式，确保其视觉效果清晰简洁。

body {
    
    
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

.container {
    
    
    text-align: center;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    
    
    font-size: 24px;
    margin-bottom: 20px;
}

input[type="text"] {
    
    
    padding: 8px;
    width: 80%;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    
    
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    
    
    background-color: #45a049;
}

ul {
    
    
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

li {
    
    
    padding: 10px;
    margin: 5px 0;
    background-color: #f1f1f1;
    border-radius: 4px;
}

.completed {
    
    
    text-decoration: line-through;
    color: #888;
}

button.delete {
    
    
    background-color: #f44336;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

样式要点：

页面采用了简洁的设计，任务列表项显示为可点击的条目。
完成的任务通过加上 completed 类添加删除线。
使用 LocalStorage 保证数据在页面刷新后仍能保留。

第三步：实现任务管理功能

我们将通过 JavaScript 实现任务的增删改查（CRUD）操作，并使用 LocalStorage 存储任务数据。

document.addEventListener("DOMContentLoaded", function () {
    
    
    const taskInput = document.getElementById("task-input");
    const addTaskButton = document.getElementById("add-task-btn");
    const taskList = document.getElementById("task-list");

    // 从 LocalStorage 获取任务列表
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

    // 渲染任务列表
    function renderTasks() {
    
    
        taskList.innerHTML = "";
        tasks.forEach((task, index) => {
    
    
            const li = document.createElement("li");
            li.classList.add(task.completed ? "completed" : "");

            li.innerHTML = `
                ${
      
      task.name} 
                <button class="delete" οnclick="deleteTask(${
      
      index})">删除</button>
                <button class="toggle" οnclick="toggleTask(${
      
      index})">${
      
      task.completed ? "未完成" : "完成"}</button>
            `;

            taskList.appendChild(li);
        });
    }

    // 添加新任务
    addTaskButton.addEventListener("click", function () {
    
    
        const taskName = taskInput.value.trim();
        if (taskName) {
    
    
            tasks.push({
    
     name: taskName, completed: false });
            taskInput.value = "";
            saveTasks();
            renderTasks();
        }
    });

    // 切换任务完成状态
    window.toggleTask = function (index) {
    
    
        tasks[index].completed = !tasks[index].completed;
        saveTasks();
        renderTasks();
    };

    // 删除任务
    window.deleteTask = function (index) {
    
    
        tasks.splice(index, 1);
        saveTasks();
        renderTasks();
    };

    // 保存任务到 LocalStorage
    function saveTasks() {
    
    
        localStorage.setItem("tasks", JSON.stringify(tasks));
    }

    // 初始渲染
    renderTasks();
});

代码解析：

renderTasks()：渲染任务列表并根据任务的状态（已完成或未完成）给任务项添加不同的样式。
addTaskButton.addEventListener("click", ...)：点击按钮时将新任务添加到任务数组中，并保存到本地存储。
toggleTask(index)：切换任务的完成状态，已完成的任务会显示删除线，并改变按钮文本。
deleteTask(index)：删除选中的任务，并实时更新任务列表。
saveTasks()：将当前任务列表保存到 LocalStorage，确保数据在页面刷新后仍然存在。

总结

到此，一个简单的任务管理系统就完成了！这个项目不仅帮助你熟悉了前端开发中的基本概念，还展示了如何使用 JavaScript 操作 DOM、处理用户输入和使用本地存储保存数据。

对于 Python 开发者而言，这是一个良好的实践案例。你可以将这个前端与 Python 后端（如 Flask 或 Django）结合，利用 RESTful API 与数据库进行数据交互，从而实现数据的持久化和跨平台同步。

希望这篇文章对你有所帮助！如果你有任何问题或改进建议，欢迎留言讨论。祝你在前端开发的道路上越走越远，成为更强大的全栈开发者！