使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用

作者:J.sky · 发表于:
2024-11-04T09:22:09.467325Z
· 更新于:
2024-11-04T09:46:14.307784Z
· Tag: next.js react tailweind.css

演示

一、项目构建构思

（一）功能设计

  1. 任务管理
    • 用户能够添加新的待办任务，包括任务标题和描述。
    • 针对每个任务，用户可进行编辑，编辑功能应允许修改任务标题和描述。
    • 用户可以删除不再需要的任务。
    • 每个任务能被标记为已完成或未完成，方便用户跟踪任务进度。
  2. 任务列表展示
    • 以清晰、美观的列表形式展示所有待办任务，已完成和未完成的任务有明显的视觉区分。
    • 可以按照任务创建时间、完成状态等进行排序，便于用户查看。
  3. 数据存储与持久化
    • 使用本地存储（localStorage）来保存任务数据，确保用户刷新页面后数据不会丢失。

（二）技术选型与架构设计

  1. Next.js
    • 作为项目的核心框架，利用其服务器端渲染（SSR）和静态生成（SSG）能力，提高应用的性能和 SEO。
    • Next.js 的路由系统方便实现不同页面和功能的导航（虽然本项目暂不需要多页面，但为后续扩展考虑）。
  2. Tailwind CSS
    • 用于快速搭建应用的用户界面，通过其丰富的实用类来设置样式，使页面布局和设计更加简洁高效。
  3. 组件化设计
    • 将应用划分为多个组件，如任务输入组件、任务列表组件、任务项组件等，提高代码的可维护性和复用性。每个组件负责特定的功能和展示逻辑。

二、项目创建过程

（一）项目初始化

  1. 创建 Next.js 项目：

    npx create-next-app todo-app-with-edit

    然后进入项目目录：

    cd todo-app-with-edit

  2. 安装 Tailwind CSS：

    npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

    在tailwind.config.js中配置内容路径：

    module.exports = {
content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
    extend: {},
},
plugins: [],
};

    在styles/globals.css中导入 Tailwind 基础样式：

    @tailwind base;
@tailwind components;
@tailwind utilities;

（二）创建组件

  1. 任务输入组件（components/TaskInput.js）

    // 导入 React 和 useState 钩子
import React, { useState } from 'react';

const TaskInput = ({ onAddTask }) => {
// 状态来存储任务标题和描述
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    // 检查标题是否为空
    if (title.trim()!== '') {
    // 创建新的任务对象
    const newTask = {
        id: Date.now(),
        title,
        description,
        completed: false
    };
    onAddTask(newTask);
    setTitle('');
    setDescription('');
    }
};

return (
    <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md">
    <h2 className="text-2xl font-bold mb-4">Add New Task</h2>
    <input
        type="text"
        placeholder="Task Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="w-full border border-gray-300 p-2 rounded mb-4"
    />
    <textarea
        placeholder="Task Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        className="w-full border border-gray-300 p-2 rounded mb-4"
    />
    <button
        type="submit"
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
    >
        Add Task
    </button>
    </form>
);
};

export default TaskInput;

  2. 任务项组件（components/TaskItem.js）

    import React, { useState } from 'react';

const TaskItem = ({ task, onToggleComplete, onEditTask, onDeleteTask }) => {
const [isEditing, setIsEditing] = useState(false);
const [editedTitle, setEditedTitle] = useState(task.title);
const [editedDescription, setEditedDescription] = useState(task.description);

const handleEditToggle = () => {
    setIsEditing(!isEditing);
};

const handleSave = () => {
    const updatedTask = {
    ...task,
    title: editedTitle,
    description: editedDescription
    };
    onEditTask(updatedTask);
    setIsEditing(false);
};

return (
    <div className="bg-white p-4 rounded shadow-md mb-4">
    {isEditing? (
        <>
        <input
            type="text"
            value={editedTitle}
            onChange={(e) => setEditedTitle(e.target.value)}
            className="w-full border border-gray-300 p-2 rounded mb-2"
        />
        <textarea
            value={editedDescription}
            onChange={(e) => setEditedDescription(e.target.value)}
            className="w-full border border-gray-300 p-2 rounded mb-2"
        />
        <button
            onClick={handleSave}
            className="bg-green-500 text-white px-4 py-2 rounded mr-2"
        >
            Save
        </button>
        <button
            onClick={handleEditToggle}
            className="bg-gray-500 text-white px-4 py-2 rounded"
        >
            Cancel
        </button>
        
    ) : (
        <>
        <h3 className={`text-xl font-bold ${task.completed? 'line-through' : ''}`}>{task.title}</h3>
        <p className="text-gray-700">{task.description}</p>
        <button
            onClick={() => onToggleComplete(task.id)}
            className={`${task.completed? 'bg-green-500' : 'bg-yellow-500'} text-white px-4 py-2 rounded mt-2 mr-2`}
        >
            {task.completed? 'Completed' : 'Mark as Completed'}
        </button>
        <button
            onClick={handleEditToggle}
            className="bg-blue-500 text-white px-4 py-2 rounded mt-2 mr-2"
        >
            Edit
        </button>
        <button
            onClick={() => onDeleteTask(task.id)}
            className="bg-red-500 text-white px-4 py-2 rounded mt-2"
        >
            Delete
        </button>
        
    )}
    </div>
);
};

export default TaskItem;

  3. 任务列表组件（components/TaskList.js）

    import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onToggleComplete, onEditTask, onDeleteTask }) => {
return (
    <div className="container mx-auto px-4">
    {tasks.map(task => (
        <TaskItem key={task.id} task={task} onToggleComplete={onToggleComplete} onEditTask={onEditTask} onDeleteTask={onDeleteTask} />
    ))}
    </div>
);
};

export default TaskList;

（三）页面组件（pages/index.js）

import React, { useState, useEffect } from 'react';
import TaskInput from '../components/TaskInput';
import TaskList from '../components/TaskList';

const HomePage = () => {
const [tasks, setTasks] = useState([]);

useEffect(() => {
    // 从本地存储获取任务数据
    const storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    setTasks(storedTasks);
}, []);

const addTask = (newTask) => {
    setTasks([...tasks, newTask]);
};

const toggleComplete = (taskId) => {
    setTasks(tasks.map(task => {
    if (task.id === taskId) {
        return {
        ...task,
        completed:!task.completed
        };
    }
    return task;
    }));
};

const editTask = (updatedTask) => {
    setTasks(tasks.map(task => {
    if (task.id === updatedTask.id) {
        return updatedTask;
    }
    return task;
    }));
};

const deleteTask = (taskId) => {
    setTasks(tasks.filter(task => task.id!== taskId));
};

useEffect(() => {
    // 将任务数据保存到本地存储
    localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);

return (
    <div className="min-h-screen bg-gray-100">
    <TaskInput onAddTask={addTask} />
    <TaskList tasks={tasks} onToggleComplete={toggleComplete} onEditTask={editTask} onDeleteTask={deleteTask} />
    </div>
);
};

export default HomePage;

三、部署上线（以 Vercel 为例）

（一）准备工作

  1. 确保项目在本地运行无误，包括所有功能都正常工作，没有报错。检查添加、编辑、删除任务以及标记任务完成等功能是否都能正常执行，同时检查本地存储的数据是否正确保存和读取。
  2. 检查项目中是否有敏感信息（如 API 密钥等），如果有，确保妥善处理，避免泄露。

（二）连接 Vercel

  1. 注册并登录 Vercel。
  2. 在 Vercel 控制台，点击“New Project”（新建项目）按钮。
  3. 选择“Import Git Repository”（导入 Git 仓库）选项。如果你的项目已经托管在 Git 平台（如 GitHub、GitLab、Bitbucket 等），Vercel 会自动检测到你的仓库并列出。选择你的todo - app - with - edit项目仓库。

（三）配置项目

  1. Vercel 会自动识别项目为 Next.js 框架。
  2. 在“Project Settings”（项目设置）中，可以设置项目名称等基本信息。
  3. 如果有需要，可以在“Build & Development Settings”（构建和开发设置）中配置构建命令等。一般情况下，Next.js 项目默认的构建命令npm install && npm run build就可以正常工作。

（四）部署项目

  1. 点击“Deploy”（部署）按钮，Vercel 会开始克隆仓库、安装依赖、构建项目。
  2. 在部署过程中，可以在控制台查看构建日志和部署进度。部署完成后，Vercel 会提供一个访问 URL，通过这个 URL 就可以在线访问你的可编辑和删除的 ToDo 待办事项应用了。

这样，我们就完成了一个具有添加、编辑和删除功能的 ToDo 待办事项应用的构建和部署。用户可以方便地管理自己的任务列表，并且数据在本地存储中得以持久化保存。

项目仓库地址：https://github.com/bosichong/todo-app

相关文章：