Node.js 如何使用react.js前端发送电子邮件？_Node.js_Reactjs_Email_Smtp

Node.js 如何使用react.js前端发送电子邮件？

node.js reactjs email smtp

Node.js 如何使用react.js前端发送电子邮件？,node.js,reactjs,email,smtp,Node.js,Reactjs,Email,Smtp,我已经创建了一个网站并部署了它（使用react js）在我的网站上有一个联系表单，可以将客户信息发送到我的工作电子邮件（myname@comany.com) . 我知道我不能用react js发送电子邮件，因为rereact只处理前端，所以我正在寻找使用NodeEmailer或其他解决方案的解决方案！我该怎么做我尝试了以下教程将react与express链接：[https://medium.com/@maison.moa/setting-up-an-express-backend-server

我已经创建了一个网站并部署了它（使用react js）在我的网站上有一个联系表单，可以将客户信息发送到我的工作电子邮件（myname@comany.com) . 我知道我不能用react js发送电子邮件，因为rereact只处理前端，所以我正在寻找使用NodeEmailer或其他解决方案的解决方案！我该怎么做

我尝试了以下教程将react与express链接：[https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61][1]

我制作了一个用于测试的快速应用程序：文件夹结构：

client ( created with create-react app )
node_modules
config.js
package.json
package_lock.json
server.js

在前端：客户端/src app.js代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';

class App extends Component {
state = {
    data: null
  };

  componentDidMount() {
      // Call our fetch function below once the component mounts
    this.callBackendAPI()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }
    // Fetches our GET route from the Express server. (Note the route we are fetching matches the GET route from server.js
  callBackendAPI = async () => {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if (response.status !== 200) {
      throw Error(body.message) 
    }
    return body;
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
      <Form/>
        <p className="App-intro">{this.state.data}</p>
      </div>
    );
  }
}

export default App;

import React from 'react';
import { Email, Item, A} from 'react-html-email';
export default function InlineLink({name, children}) {
  return (
  <Email title='link'>
    <Item>
       Hello {name}
       <p>helooo</p>
    </Item>
    <Item>
      {children}
    </Item>
  </Email>
)};

import MyEmail from './Email'
import { renderEmail } from 'react-html-email'
import axios from 'axios';
import React, { Component } from 'react';

class Form extends Component {

    resetForm(){

        this.setState({feedback: ''});
    }

    constructor(props) {
        super(props);
        this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

   
  render() {
    return (
        <form className="test-mailing">
        <h1>Let's see if it works</h1>
        <div>
        <textarea
            id="test-mailing"
            name="test-mailing"
            onChange={this.handleChange}
            placeholder="Post some lorem ipsum here"
            required
            value={this.state.feedback}
            style={{width: '100%', height: '150px'}}
        />
        </div>
        <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
    </form>
    );
  }
  handleChange(event) {
    this.setState({feedback: event.target.value})
  };
  handleSubmit(event){

    const messageHtml =  renderEmail(
      <MyEmail name={this.state.name}> {this.state.feedback}</MyEmail>
    );
    
            axios({
                method: "POST", 
                url:"http://localhost:3000/send", 
                data: {
              name: this.state.name,
              email: this.state.email,
              messageHtml: messageHtml
                }
            }).then((response)=>{
                if (response.data.msg === 'success'){
                    alert("Email sent, awesome!"); 
                    this.resetForm()
                }else if(response.data.msg === 'fail'){
                    alert("Oops, something went wrong. Try again")
                }
            })
        }
}
export default Form;

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));

// create a GET route
app.get('/express_backend', (req, res) => {
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});
const nodemailer = require('nodemailer');
const creds = require('./config');

var transport = {
  host: 'smtp.gmail.com', // e.g. smtp.gmail.com
  auth: {
    user: creds.USER,
    pass: creds.PASS
  }
}

var transporter = nodemailer.createTransport(transport)

transporter.verify((error, success) => {
  if (error) {
    console.log(error);
  } else {
    console.log('All works fine, congratz!');
  }
});
app.use(express.json()); app.post('/send', (req, res, next) => {
    const name = req.body.name
    const email = req.body.email
    const message = req.body.messageHtml
  
  
    var mail = {
      from: name,
      to: 'mellitir11@gmail.com',  
      subject: 'Contact form request',
  
      html: message
    }
  
    transporter.sendMail(mail, (err, data) => {
      if (err) {
        res.json({
          msg: 'fail'
        })
      } else {
        res.json({
          msg: 'success'
        })
      }
    })
  })

module.exports = {
    USER: 'mellitir11@gmail.com', 
    PASS: 'my_email_password',
}

config.js代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';

class App extends Component {
state = {
    data: null
  };

  componentDidMount() {
      // Call our fetch function below once the component mounts
    this.callBackendAPI()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }
    // Fetches our GET route from the Express server. (Note the route we are fetching matches the GET route from server.js
  callBackendAPI = async () => {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if (response.status !== 200) {
      throw Error(body.message) 
    }
    return body;
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
      <Form/>
        <p className="App-intro">{this.state.data}</p>
      </div>
    );
  }
}

export default App;

import React from 'react';
import { Email, Item, A} from 'react-html-email';
export default function InlineLink({name, children}) {
  return (
  <Email title='link'>
    <Item>
       Hello {name}
       <p>helooo</p>
    </Item>
    <Item>
      {children}
    </Item>
  </Email>
)};

import MyEmail from './Email'
import { renderEmail } from 'react-html-email'
import axios from 'axios';
import React, { Component } from 'react';

class Form extends Component {

    resetForm(){

        this.setState({feedback: ''});
    }

    constructor(props) {
        super(props);
        this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

   
  render() {
    return (
        <form className="test-mailing">
        <h1>Let's see if it works</h1>
        <div>
        <textarea
            id="test-mailing"
            name="test-mailing"
            onChange={this.handleChange}
            placeholder="Post some lorem ipsum here"
            required
            value={this.state.feedback}
            style={{width: '100%', height: '150px'}}
        />
        </div>
        <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
    </form>
    );
  }
  handleChange(event) {
    this.setState({feedback: event.target.value})
  };
  handleSubmit(event){

    const messageHtml =  renderEmail(
      <MyEmail name={this.state.name}> {this.state.feedback}</MyEmail>
    );
    
            axios({
                method: "POST", 
                url:"http://localhost:3000/send", 
                data: {
              name: this.state.name,
              email: this.state.email,
              messageHtml: messageHtml
                }
            }).then((response)=>{
                if (response.data.msg === 'success'){
                    alert("Email sent, awesome!"); 
                    this.resetForm()
                }else if(response.data.msg === 'fail'){
                    alert("Oops, something went wrong. Try again")
                }
            })
        }
}
export default Form;

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));

// create a GET route
app.get('/express_backend', (req, res) => {
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});
const nodemailer = require('nodemailer');
const creds = require('./config');

var transport = {
  host: 'smtp.gmail.com', // e.g. smtp.gmail.com
  auth: {
    user: creds.USER,
    pass: creds.PASS
  }
}

var transporter = nodemailer.createTransport(transport)

transporter.verify((error, success) => {
  if (error) {
    console.log(error);
  } else {
    console.log('All works fine, congratz!');
  }
});
app.use(express.json()); app.post('/send', (req, res, next) => {
    const name = req.body.name
    const email = req.body.email
    const message = req.body.messageHtml
  
  
    var mail = {
      from: name,
      to: 'mellitir11@gmail.com',  
      subject: 'Contact form request',
  
      html: message
    }
  
    transporter.sendMail(mail, (err, data) => {
      if (err) {
        res.json({
          msg: 'fail'
        })
      } else {
        res.json({
          msg: 'success'
        })
      }
    })
  })

module.exports = {
    USER: 'mellitir11@gmail.com', 
    PASS: 'my_email_password',
}

即使它显示的错误消息是“哎呀，出问题了，再试一次”

[1] ：

Nodemailer可能会帮你解决这个问题，本质上你需要一个支持smtp、node v6或更高版本的电子邮件帐户，并且（这里有一个how-to示例）它支持ssl、Oauth身份验证和DKIM。根据您的具体需要，还有其他选项，如mailgun和mailchimp，它们提供API或带有PHP或Java的后端

将以下代码粘贴到前端，即React（app.js）

import React，{useState，useffect}来自“React”
从“Axios”导入Axios
导入“/App.css”；
函数App（）{
const[frommail，setfrommail]=useState（“”）
const[password，setpassword]=useState（0）
const[tomail，settomail]=useState（“”）
useffect（（）=>{
Axios.get（“http://localhost:3001/read）然后（（回应）=>{
console.log（response.data）
})
},[])
const sendmail=（）=>{
Axios.post（“http://localhost:3001/mail“，{frommail:frommail，password:password，tomail:tomail}）。然后（（响应）=>{
如果（response.data.msg==='success'）{
警报（“发送电子邮件，太棒了！”）；
}else if（response.data.msg=='fail'）{
警报（“哎呀，出了问题，请再试一次”）
}
})
}
返回(
从…起
{setfrommail（e.target.value）}}/>
从邮件密码
{setpassword（e.target.value）}}/>
解决
{settomail（e.target.value）}}/>
);
}
导出默认应用程序；

下面是后端的代码，即节点js

const express = require("express");

const app = express();
const cors=require('cors')
var nodemailer = require('nodemailer');



app.use(express.json());
app.use(cors())



app.post(("/mail"),async (req,res)=>{
  const frommail=req.body.frommail
  const password = req.body.password
  const tomail=req.body.tomail
  var transporter = nodemailer.createTransport({
    service: 'gmail',

    auth: {
      user: frommail,
      pass: password
    }
  });
  
  var mailOptions = {
    from: frommail,
    to: tomail,
    subject: 'Sending Email using Node.js',
    text: `sending mail using Node.js was running successfully. Hope it help you. For more code and project Please Refer my github page`
    // html: '<h1>Hi Smartherd</h1><p>Your Messsage</p>'        
  };
  
  transporter.sendMail(mailOptions, function(error, info){
    if (error) {
      res.json({
        msg: 'fail'
      });
    } 
    else{
      res.json({
        msg: 'success'
      })
    }
  });

})

app.listen(3001, () => {
  console.log("Server is Running");
});

const express=require（“express”）；
常量app=express（）；
const cors=require（'cors'）
var nodeEmailer=require（'nodeEmailer'）；
使用（express.json（））；
app.use（cors（））
app.post（（“/mail”），异步（请求，回复）=>{
const frommail=req.body.frommail
const password=req.body.password
const tomail=req.body.tomail
var transporter=nodeEmailer.createTransport({
服务：“gmail”，
认证：{
用户：frommail，
密码
}
});
var mailpoptions={
发件人：frommail，
致：托梅尔，
主题：“使用Node.js发送电子邮件”，
text:`使用Node.js发送邮件已成功运行。希望它能帮助您。有关更多代码和项目，请参阅我的github页面`
//html:“嗨，Smartherd你的消息”
};
transporter.sendMail（邮件选项，函数（错误，信息）{
如果（错误）{
res.json({
消息：“失败”
});
} 
否则{
res.json({
味精：“成功”
})
}
});
})
app.listen（3001，（）=>{
log（“服务器正在运行”）；
});

最后，请确保您的发件人邮件id具有不太安全的应用程序访问权限：

我使用nodemailer进行测试，我编辑了post check it Please。我看到您使用的是gmail，但缺少一些属性。Gmail SMTP需要端口483/587上的SSL/TLS，所以请继续并将该信息添加到您的传输中。此外，您还需要转到您的gmail帐户安全设置并启用对“不太安全的应用”的访问。在生产应用程序中，您可能需要使用OAuth2身份验证。希望这有帮助。