构建一个简单的Todo应用程序：从设计到实现

在这篇文章中，我们将通过构建一个简单的Todo应用程序来了解Web应用程序的基本开发过程。这将包括从UI设计到前端和后端实现，最终部署一个简单的Web应用程序。

功能概述

我们的Todo应用程序将实现以下功能：

• 添加新的Todo任务
• 显示所有待办任务
• 标记任务为已完成
• 删除任务

技术栈

• 前端：HTML, CSS, JavaScript (使用React)
• 后端：Node.js (使用Express框架)
• 数据库：内存数据库（为了简单起见）

前端实现

首先，我们将创建前端应用程序。

第一步：创建React应用

使用Create React App命令行工具初始化一个新的React项目。

npx create-react-app todo-app
cd todo-app

第二步：构建UI组件

在src目录下，创建一个新的文件TodoApp.js。这个文件将包含我们的主要组件。

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() === '') return;
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo('');
  };

  const toggleTodo = index => {
    const updatedTodos = todos.map((todo, i) =>
      i === index ? { ...todo, completed: !todo.completed } : todo
    );
    setTodos(updatedTodos);
  };

  const deleteTodo = index => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={e => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(index)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

第三步：在主文件中使用组件

打开src/index.js，并导入和使用TodoApp组件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoApp from './TodoApp';

ReactDOM.render(
  <React.StrictMode>
    <TodoApp />
  </React.StrictMode>,
  document.getElementById('root')
);

后端实现

接下来，我们将实现一个简单的后端来支持我们的应用。

第一步：初始化Node.js项目

在项目的根目录下，创建一个server目录并进入，然后初始化Node.js项目。

mkdir server
cd server
npm init -y

第二步：安装Express

安装Express框架以处理HTTP请求。

npm install express

第三步：创建服务器

在server目录下，创建一个文件index.js并添加以下代码：

const express = require('express');
const app = express();
const PORT = 5000;

app.use(express.json());

let todos = []; // Simple in-memory database

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.post('/api/todos', (req, res) => {
  const { text } = req.body;
  const newTodo = { text, completed: false };
  todos.push(newTodo);
  res.json(newTodo);
});

app.patch('/api/todos/:index', (req, res) => {
  const { index } = req.params;
  const { completed } = req.body;
  if (todos[index]) {
    todos[index].completed = completed;
    res.json(todos[index]);
  } else {
    res.status(404).send('Todo not found');
  }
});

app.delete('/api/todos/:index', (req, res) => {
  const { index } = req.params;
  if (todos[index]) {
    todos.splice(index, 1);
    res.status(204).send();
  } else {
    res.status(404).send('Todo not found');
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

结论

到此为止，我们已经创建了一个可以在本地运行的完整的Todo应用程序，涵盖了从前端到后端的所有基本部分。您可以通过运行React开发服务器（npm start）和Node.js服务器来启动应用程序。

后续步骤

• 将后端持久化到数据库（例如MongoDB）
• 添加用户身份验证功能
• 部署到云服务（如Heroku, Vercel）

通过这个项目，我们了解了如何使用现代Web技术栈构建一个简单的Web应用程序。希望您通过这次实践获得了一些有价值的学习体验！

---

编辑：一起学习网