React and Node.js 示例项目

在这个示例项目中，我们将使用 React 和 Node.js 来构建一个简单的任务管理应用。该应用将允许用户创建、查看、编辑和删除任务。我们将使用 MongoDB 作为我们的数据库。

技术栈

• 前端：React
• 后端：Node.js
• 数据库：MongoDB

前端

首先，我们需要创建一个 React 应用并设置好开发环境。你可以使用 create-react-app 初始化一个新的 React 项目。

npx create-react-app task-manager-app

接下来，我们需要安装一些额外的依赖：

cd task-manager-app
npm install axios react-router-dom

使用 axios 进行与后端 API 的交互，而 react-router-dom 则用于前端路由。

我们将创建以下组件来完成我们的任务管理应用：

1. 任务列表页面：显示所有任务，包括标题、描述和状态。
2. 添加任务页面：允许用户添加新任务。
3. 编辑任务页面：允许用户编辑现有任务的标题、描述和状态。

你可以在以下链接找到这些组件的源代码：

• 任务列表页面
• 添加任务页面
• 编辑任务页面

后端

我们将使用 Express 框架来创建我们的 Node.js 后端。在项目根目录下，运行以下命令来安装 Express 和其他依赖：

npm install express mongoose

接下来，我们创建一个 server.js 文件来设置我们的 Express 应用，并连接到 MongoDB 数据库。

const express = require('express');
const mongoose = require('mongoose');

mongoose.connect('<mongodb_connection_string>', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
  .then(() => console.log('Connected to MongoDB'))
  .catch(error => console.error('Error connecting to MongoDB:', error));

const app = express();

// 添加中间件和路由

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

确保将 <mongodb_connection_string> 替换为你的实际 MongoDB 连接字符串。

在上面的代码中，我们首先连接到 MongoDB 数据库，然后创建一个 Express 应用并在指定的端口上监听。

我们将创建以下路由来处理任务相关的请求：

1. GET /tasks：获取所有任务的列表。
2. POST /tasks：创建一个新任务。
3. PUT /tasks/:id：更新指定 ID 的任务。
4. DELETE /tasks/:id：删除指定 ID 的任务。

你可以在以下链接找到这些路由的源代码：

• 任务路由

确保将上述路由添加到你的 server.js 文件中。

MongoDB 数据库模型

我们将创建一个名为 Task 的简单数据库模型，用于表示任务。

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  status: {
    type: String,
    enum: ['Todo', 'In Progress', 'Done'],
    default: 'Todo',
  },
});

const Task = mongoose.model('Task', taskSchema);

module.exports = Task;

确保将上述代码添加到你的后端项目中。

运行项目

现在，你可以在命令行中运行以下命令来启动前端和后端：

# 前端
cd task-manager-app
npm start

# 后端
node server.js

结论

在本示例项目中，我们使用 React 和 Node.js 创建了一个简单的任务管理应用。通过前端和后端的结合，我们能够实现任务的创建、查看、编辑和删除功能。希望这个示例项目能帮助你熟悉使用 React 和 Node.js 构建全栈应用的基本方法。

请注意，这只是一个简单的示例项目，你可以根据自己的需求进行进一步扩展和修改。