Как создать контактную форму с ReactJS и отправить значения через API - Express

Question

Я пытаюсь создать контактную форму с ReactJS и отправляю подробности на мою электронную почту. Сначала я создаю контактную форму в своем приложении. js

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

class Contact extends Component {

    state = {
        name: '',
        message: '',
        email: '',
        sent: false,
        buttonText: 'Send Message'
    }

    formSubmit = (e) => {
        e.preventDefault()

        this.setState({
            buttonText: '...sending'
        })

        let data = {
            name: this.state.name,
            email: this.state.email,
            message: this.state.message
        }

        axios.post("localhost:4000/api/v1/", data)
        .then( res => {
            this.setState({ sent: true }, this.resetForm())
        })
        .catch( () => {
          console.log('Message not sent')
        })
      }

      resetForm = () => {
        this.setState({
            name: '',
            message: '',
            email: '',
            buttonText: 'Message Sent'
        })
    }

    render() {
        return(
          <form className="contact-form" onSubmit={ (e) => this.formSubmit(e)}>
          <label class="message" htmlFor="message-input">Your Message</label>
          <textarea onChange={e => this.setState({ message: e.target.value})} name="message" class="message-input" type="text" placeholder="Please write your message here" value={this.state.message} required/>

          <label class="message-name" htmlFor="message-name">Your Name</label>
          <input onChange={e => this.setState({ name: e.target.value})} name="name" class="message-name" type="text" placeholder="Your Name" value={this.state.name}/>

          <label class="message-email" htmlFor="message-email">Your Email</label>
          <input onChange={(e) => this.setState({ email: e.target.value})} name="email" class="message-email" type="email" placeholder="your@email.com" required value={this.state.email} />

          <div className="button--container">
              <button type="submit" className="button button-primary">{ this.state.buttonText }</button>
          </div>
        </form>
        );
    }
}

export default Contact;

После того, как я создаю js файл для API. Имя файла: API. js

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

const app = express();

const port = 4000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

app.listen(port, () => {
  console.log('We are live on port 4444');
});


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

app.post('/api/v1/:user/:pass', (req,res) => {
  const params = req.params;
  console.log(params)
  var data = req.body;

var smtpTransport = nodemailer.createTransport({
  service: 'Gmail',
  port: 465,
  auth: {
    user: 'pizhevsoft@gmail.com',
    pass: 'pass123'
  }
});

var mailOptions = {
  from: data.email,
  to: 'pizhevsoft@gmail.com',
  subject: 'TEST',
  html: `<p>${data.name}</p>
          <p>${data.email}</p>
          <p>${data.message}</p>`
};

smtpTransport.sendMail(mailOptions,
(error, response) => {
  if(error) {
    res.send(error)
  }else {
    res.send('Success')
  }
  smtpTransport.close();
});
})

Когда я пытаюсь запустить приложение. js в консоли узла, я пишу node App.js в консоли, но получаю эту ошибку:

Blagovests-MacBook-Pro:my-app pizhev$ node App.js
internal/modules/cjs/loader.js:979
  throw err;
  ^

Error: Cannot find module '/Users/pizhev/Downloads/my-app/App.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
    at Function.Module._load (internal/modules/cjs/loader.js:859:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Можно привести пример .. Спасибо ..:)

Answer 1

1. Для первого:

Вы должны запустить файл app.js и в консоли node.js вы увидите что-то вроде We are live on port 4000. Это твой бэк-энд API работает. Затем замените ваш axios.post('API_URI', data) на axios.post("localhost:4000/api/v1/", data) или любую другую ссылку на ваш метод и проверьте в консоли вашего веб-сервера, получает ли он запрос POST от вашего интерфейса.

Второе:

Вы не используете params для вашего API-маршрута, это должно быть что-то вроде (если я правильно понимаю:

app.post('/api/v1/:user/:pass', (req,res) => {
  const params = req.params;
  console.log(params) //will give you access to user and password.

Итак, когда вы go to: localhost:4000/api/v1/test/pass123. У вас будет доступ к данным пользователя и пароля в вашем var smtpTransport, но, как упоминалось выше, лучше хранить конфиденциальные данные в файле .env.

Answer 2

URI, который вы должны передать ax ios - это URL API Так что в вашем случае это будет localhost:4000/api/v1, потому что это путь, который вы ему присвоили.

app.post(' >> /api/v1 <<', (req,res) => {

---

Тогда для адреса электронной почты и пароля я не слишком уверен, так как я не знаком с smtpTransport, но Я предполагаю, что это адрес электронной почты / пароль вашего поставщика услуг. В вашем случае кажется (на основе вашего кода), что будет вашим логином Gmail. Я бы рекомендовал использовать пакет dotenv для создания переменных среды. Более подробную информацию об этом можно найти ЗДЕСЬ

var smtpTransport = nodemailer.createTransport({
  service: 'Gmail',
  port: 465,
  auth: {
    user: process.env.EMAIL,
    pass: process.env.EMAIL_PASSWORD
  }
});