构建一个简单的Todo应用程序：从前端到后端全面指南

在本教程中，我们将创建一个简单的Todo应用程序，涵盖前端和后端的基本功能。我们的目标是帮助您理解如何构建一个完整的Web应用程序。

第一步：设置后端

我们将使用Node.js和Express.js来设置我们的后端。首先，确保您已经安装了Node.js和npm。

1. 初始化项目

   mkdir todo-app
   cd todo-app
   npm init -y
   

2. 安装必要的包

   npm install express mongoose cors
   

3. 设置Express服务器

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

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   mongoose.connect('mongodb://localhost/todoapp', { useNewUrlParser: true, useUnifiedTopology: true });
   
   const TodoSchema = new mongoose.Schema({
       task: String,
       completed: Boolean
   });
   
   const Todo = mongoose.model('Todo', TodoSchema);
   
   app.get('/todos', async (req, res) => {
       const todos = await Todo.find();
       res.json(todos);
   });
   
   app.post('/todos', async (req, res) => {
       const newTodo = new Todo({
           task: req.body.task,
           completed: false
       });
       await newTodo.save();
       res.json(newTodo);
   });
   
   app.listen(5000, () => {
       console.log('Server is running on port 5000');
   });
   

   在上述代码中，我们设置了一个基本的Express服务器，并建立了MongoDB连接，定义了Todo模型。

第二步：设置前端

我们将使用React来构建前端界面。确保您在项目的根目录下。

1. 创建React应用

   npx create-react-app client
   cd client
   npm install axios
   

2. 设置React组件

   在 src 目录中，编辑 App.js 文件：

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function App() {
       const [tasks, setTasks] = useState([]);
       const [task, setTask] = useState('');
   
       useEffect(() => {
           axios.get('http://localhost:5000/todos')
               .then(res => setTasks(res.data))
               .catch(err => console.error(err));
       }, []);
   
       const addTask = () => {
           if (task) {
               axios.post('http://localhost:5000/todos', { task })
                   .then(res => setTasks([...tasks, res.data]))
                   .catch(err => console.error(err));
               setTask('');
           }
       };
   
       return (
           <div className="App">
               <h1>Todo List</h1>
               <input
                   type="text"
                   value={task}
                   onChange={(e) => setTask(e.target.value)}
                   placeholder="Add a new task"
               />
               <button onClick={addTask}>Add</button>
               <ul>
                   {tasks.map((t, index) => (
                       <li key={index}>{t.task}</li>
                   ))}
               </ul>
           </div>
       );
   }
   
   export default App;
   

   在这个组件中，我们使用 useState 和 useEffect 钩子管理应用状态，并使用axios从后端获取和发送数据。

第三步：运行应用程序

1. 启动后端服务器

   在项目的根目录（todo-app）中运行：

   node server.js
   

2. 启动前端开发服务器

   在 client 目录中运行：

   npm start
   

这样做会启动React开发服务器，并自动在您的浏览器中打开应用程序。现在，您可以在应用程序中添加任务，并在页面上查看它们。

通过完成这几个步骤，您将获得一个简单但完整的Todo应用程序。这个项目涵盖了Web开发的多个方面，包括服务器设置、API开发、前端开发和状态管理，为您进一步深入学习打下了基础。

---

编辑：一起学习网