当我们开发一个Web应用程序时，我们需要使用一些代码来实现各种功能。在本文中，我将介绍如何使用Node.js和Express框架来创建一个简单的Todo应用程序，并演示如何使用React框架构建前端。

  1. 创建后端

首先，让我们从创建后端开始。使用Node.js和Express框架可以轻松创建一个API服务器。下面是一个简单的例子：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let todos = [
    { id: 1, text: 'Buy milk', completed: false },
    { id: 2, text: 'Do laundry', completed: true }
];

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

app.post('/api/todos', (req, res) => {
    const todo = req.body;
    todo.id = todos.length + 1;
    todos.push(todo);
    res.send(todo);
});

app.listen(3000, () => console.log('Server listening on port 3000'));

在这个例子中，我们首先引入了express和body-parser模块。然后，我们创建了一个新的Express实例并将bodyParser.json()中间件添加到应用程序中。该中间件用于解析请求体中的JSON数据。

接下来，我们定义了一个名为todos的数组，并在路由器上定义了两个路由：

  • GET /api/todos: 返回所有待办事项。
  • POST /api/todos: 将一个新的待办事项添加到数组中。
  1. 创建前端

现在我们已经创建了后端，让我们使用React框架来创建前端。为了获取待办事项列表并将其他待办事项添加到列表中，我们可以使用fetchAPI来向后端发送HTTP请求：

import React, { useState, useEffect } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodoText, setNewTodoText] = useState('');

  useEffect(() => {
    fetch('/api/todos')
      .then(response => response.json())
      .then(data => setTodos(data));
  }, []);

  const handleNewTodoChange = (event) => {
    setNewTodoText(event.target.value);
  };

  const handleAddNewTodo = () => {
    fetch('/api/todos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: newTodoText })
    })
      .then(response => response.json())
      .then(todo => setTodos([...todos, todo]));
    
    setNewTodoText('');
  };

  return (
    <div>
      <ul>
        {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
      </ul>

      <input type="text" value={newTodoText} onChange={handleNewTodoChange} />
      <button onClick={handleAddNewTodo}>Add</button>
    </div>
  );
}

export default App;

在上面的代码中，我们首先导入了useState和useEffect hook。然后，我们定义了两个状态：

  • todos: 包含待办事项的数组。
  • newTodoText: 包含文本输入框的当前值。

在useEffect hook中，我们使用fetch API向后端发送请求并将响应中的数据设置为todos状态。我们还在页面加载时运行了这个hook。

我们定义了两个函数来处理用户添加新待办事项的过程：

  • handleNewTodoChange: 当用户输入文本框中的新待办事项时更新状态newTodoText。
  • handleAddNewTodo: 当用户点击“Add”按钮时，向后端发送一个POST请求来添加新待办事项，并在成功响应后将其添加到前端的状态管理器中。

最后，在渲染界面时，我们使用map()函数遍历todos数组并返回每个待办事项的文本。同时，我们在顶部显示带有提交按钮的输入框，并且当用户添加新待办事项时会自动更新列表。

  1. 运行应用程序

现在，我们已经创建了前端和后端代码，让我们将它们合并起来。将上面的两份代码分别保存为文件名分别为server.js和app.jsx。然后，在命令行中运行以下命令：

npm install express body-parser react react-dom

这将安装必要的依赖关系。接下来，请运行以下命令启动服务器：

node server.js

最后，请运行以下命令启动前端：

npm start

这将在浏览器中打开应用程序，您应该能够看到一个基本的待办事项列表并能够添加新的待办事项。

总结

在本文中，我们使用Node.js和Express框架创建了一个简单的Todo API服务器，并使用React框架创建了一个简单的前端。我们学习了如何发送HTTP请求并处理响应数据。希望这篇文章能够帮助您开始了解如何构建完整的Web应用程序。