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

在本教程中，我们将从零开始构建一个简单的Todo应用程序，涵盖前端界面和后端API。我们将使用React构建用户界面，Node.js和Express来创建服务器端API，并使用MongoDB作为我们的数据库。

第一步：设置开发环境

1. 安装Node.js和npm

   • 下载并安装Node.js：https://nodejs.org/
   • 安装完成后，在命令行运行 node -v 和 npm -v 以确保安装成功。

2. 安装MongoDB

   • 下载并安装MongoDB：https://www.mongodb.com/try/download/community

第二步：创建后端API

1. 创建项目文件夹

   mkdir todo-app
   cd todo-app
   

2. 初始化Node.js项目

   npm init -y
   

3. 安装依赖

   npm install express mongoose cors
   

4. 创建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:27017/todo', {
      useNewUrlParser: true,
      useUnifiedTopology: true,
   }).then(() => console.log('MongoDB connected'))
     .catch(err => console.log(err));
   
   const TodoSchema = new mongoose.Schema({
      text: 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 todo = new Todo({
         text: req.body.text,
         completed: false
      });
      await todo.save();
      res.json(todo);
   });
   
   app.listen(5000, () => {
      console.log('Server listening on port 5000');
   });
   

第三步：构建前端应用

1. 创建React应用

   npx create-react-app client
   cd client
   

2. 安装Axios用于HTTP请求

   npm install axios
   

3. 构建Todo组件

   • 打开 src/App.js 并替换为以下代码：

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function App() {
      const [todos, setTodos] = useState([]);
      const [text, setText] = useState('');
   
      useEffect(() => {
         axios.get('http://localhost:5000/todos')
            .then(response => setTodos(response.data))
            .catch(error => console.error('Error fetching data:', error));
      }, []);
   
      const addTodo = () => {
         axios.post('http://localhost:5000/todos', { text })
            .then(response => setTodos([...todos, response.data]))
            .catch(error => console.error('Error adding todo:', error));
         setText('');
      };
   
      return (
         <div className="App">
            <h1>Todo List</h1>
            <input
               type="text"
               value={text}
               onChange={e => setText(e.target.value)}
               placeholder="Add a new todo"
            />
            <button onClick={addTodo}>Add</button>
            <ul>
               {todos.map(todo => (
                  <li key={todo._id}>{todo.text}</li>
               ))}
            </ul>
         </div>
      );
   }
   
   export default App;
   

第四步：运行应用程序

1. 启动后端服务器

   node server.js
   

2. 启动前端开发服务器

   • 在 client 目录下运行：

   npm start
   

3. 访问应用程序

   • 打开浏览器访问 http://localhost:3000

通过完成以上步骤，我们成功创建了一个简单的Todo应用程序，结合了React前端和Node.js后端，并使用MongoDB进行数据存储。您可以根据需要扩展和自定义此应用程序。

---

编辑：一起学习网