发布一个简单的react表单- node、axios、nodemailer、backend、postman

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

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      await axios.post('http://localhost:5000/submit', formData);
      alert('Form submitted successfully!');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Name" required />
      <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Email" required />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

const express = require('express');
const axios = require('axios');
const nodemailer = require('nodemailer');
const app = express();
app.use(express.json());

app.post('/submit', async (req, res) => {
  const { name, email } = req.body;

  // 发送邮件
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'your-email@gmail.com',
      pass: 'your-password'
    }
  });

  const mailOptions = {
    from: 'your-email@gmail.com',
    to: 'recipient@example.com',
    subject: 'New Form Submission',
    text: `Name: ${name}, Email: ${email}`
  };

  await transporter.sendMail(mailOptions);

  res.status(200).send('Form submitted successfully!');
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});