[英]How to integrate Express and React to send an email
I am trying to integrate a form made with React.js and a "backend side" to send the email from Express. 我正在尝试整合由React.js和“后端”制成的表单,以从Express发送电子邮件。 I am not sure how to send formatted the form body, or just what method should I use in order to perform the HTTP request.
我不确定如何发送格式化的表单主体,或者我应该使用哪种方法来执行HTTP请求。
I have React.js and Express.js in two different folders. 我在两个不同的文件夹中有React.js和Express.js。 I have setted up
express-mailer
and used Postman to test requests and they work fine. 我设置了
express-mailer
并使用Postman来测试请求,它们可以正常工作。
This is my Express code: 这是我的Express代码:
require('dotenv').config();
const express = require('express');
const logger = require('morgan');
const mailer = require('express-mailer');
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('express-cors');
const server = express();
// Configuration
server.set('PORT', process.env.SERVER_PORT || 5000);
server.set('views', path.join(__dirname, 'views'));
server.set('view engine', 'jade');
server.use(logger('combined'));
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cors({
allowedOrigins: [
'localhost:3000'
]
}));
mailer.extend(server, {
from: process.env.EMAIL_FROM,
host: process.env.EMAIL_HOST,
secureConnection: process.env.EMAIL_SECURE,
port: process.env.EMAIL_PORT,
transportMethod: process.env.EMAIL_METHOD,
auth: {
user: process.env.EMAIL_FROM,
pass: process.env.EMAIL_PASSWORD
}
});
server.post('/contact', (req, res) => {
server.mailer.send('email', {
to: process.env.EMAIL_FROM,
subject: `Contact ${req.body.subject}`,
body: req.body
}, err => {
if (err) {
console.log(err);
res.send({ success: false, message: err });
} else {
res.send({ success: true, message: 'Message sent' });
}
});
});
server.listen(server.get('PORT'), () => {
console.log('Server started on port', server.get('PORT'));
})
And this is my Form code: 这是我的表单代码:
import React, { Component } from 'react';
import {
Container,
Form,
Button,
Alert
} from 'react-bootstrap';
class Contact extends Component {
constructor(props) {
super(props);
this.state = {
modal: {
visible: false,
type: '',
message: ''
}
};
this.sendEmail = this.sendEmail.bind(this);
}
sendEmail(evt) {
evt.preventDefault();
const data = {
name: evt.target.elements.name.value,
email: evt.target.elements.email.value,
subject: evt.target.elements.subject.value,
message: evt.target.elements.message.value
};
fetch('http://localhost:5000/contact', {
method: 'POST',
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => {
if (data.success) {
this.setState({
modal: {
type: 'success'
}
});
} else {
this.setState({
modal: {
type: 'danger'
}
});
}
this.setState({
modal: {
visible: true,
message: data.message
}
});
});
}
render() {
return (
<Container>
<Alert variant={this.state.modal.type} dismissible style={{ display: this.state.modal.visible ? 'visible' : 'none' }}>
{this.state.modal.message}
</Alert>
<Form onSubmit={this.sendEmail}>
<Form.Group controlId="name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Jhon" />
</Form.Group>
<Form.Group controlId="email">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="john@email.com" />
</Form.Group>
<Form.Group controlId="subject">
<Form.Label>Subject</Form.Label>
<Form.Control as="select">
<option>Budget</option>
<option>IT</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="message">
<Form.Label>Message</Form.Label>
<Form.Control as="textarea" placeholder="Message" rows={10} />
</Form.Group>
<Button variant="primary" type="submit">Send</Button>
</Form>
</Container>
);
}
}
export default Contact;
I think I should get the req.body
object somehow sent from React sendEmail()
function to the Express side to process the data and then send the email. 我认为我应该以某种方式从React
sendEmail()
函数发送到Express端的req.body
对象来处理数据,然后发送电子邮件。
So far I get an empty object in my "backend side" but maybe I should use http
for Nodejs, axios
or r2. 到目前为止,我在“后端”中得到一个空对象,但也许我应该对Node.js,
axios
或r2使用http
。 Any ideas? 有任何想法吗?
Looks like your problem is a lack of name
attributes on your html elements. 看来您的问题是html元素上缺少
name
属性。
See this SO post for more details. 有关更多详细信息,请参见此SO帖子 。 But in short:
简而言之:
name is used by the server-side, this is necessary if you plan to process the field.
名称由服务器端使用,如果您打算处理该字段,则这是必需的。 id is only so label elements, when clicked and accessed by screen-readers, can trigger/invoke the form controls ( inputs, selects ).
id只是这样,所以标签元素在被屏幕阅读器单击和访问时可以触发/调用表单控件(输入,选择)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.