如何使用REACTJS，NODEJS，EXPRESSJS和MONGODB的API来做POST数据？

mkdir my-api-project
cd my-api-project
npm init -y

npm install express mongoose body-parser

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

const app = express();

// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

// 使用body-parser中间件来解析JSON请求体
app.use(bodyParser.json());

// 定义数据模型
const DataSchema = new mongoose.Schema({
  name: String,
  value: String
});

const DataModel = mongoose.model('Data', DataSchema);

// 创建POST路由来接收数据
app.post('/api/data', (req, res) => {
  const newData = new DataModel(req.body);
  newData.save((err, data) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).send(data);
    }
  });
});

// 设置服务器监听端口
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

npx create-react-app client

import React, { useState } from 'react';

function Api() {
  const [name, setName] = useState('');
  const [value, setValue] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch('/api/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name, value }),
    });

    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      console.error('Error:', response.statusText);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" placeholder="Value" value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Api;

node server.js

cd client
npm start