使用 React.js + Express.js 发送电子邮件
Posted
技术标签:
【中文标题】使用 React.js + Express.js 发送电子邮件【英文标题】:Send an Email Using React.js + Express.js 【发布时间】:2016-08-29 06:35:21 【问题描述】:我在 ES6 中使用 React.js 构建了一个 Web 应用程序。我目前想创建一个基本的“联系我们”页面并想发送一封电子邮件。我是 React 的新手,只是发现我实际上无法使用 React 本身发送电子邮件。我正在使用nodemailer
和express-mailer
关注本教程,但在将示例代码与我的 React 文件集成时遇到了一些困难。具体来说,调用node expressFile.js
有效,但我不知道如何将其链接到我的 React 前端。
Nodemailer:https://github.com/nodemailer/nodemailer
快递员:https://www.npmjs.com/package/express-mailer
我的表单的 React 组件如下。我将如何编写一个 Express 文件,以便从我的 React 组件中的 contactUs()
方法调用它?谢谢!
import React from 'react';
import
Col,
Input,
Button,
Jumbotron
from 'react-bootstrap';
class ContactView extends React.Component
contactUs()
// TODO: Send the email here
render()
return (
<div>
<Input type="email" ref="contact_email" placeholder="Your email address"/>
<Input type="text" ref="contact_subject" placeholder="Subject"/>
<Input type="textarea" ref="contact_content" placeholder="Content"/>
<Button onClick=this.contactUs.bind(this) bsStyle="primary" bsSize="large">Submit</Button>
</div>
)
;
export default ContactView;
【问题讨论】:
【参考方案1】:点击按钮后,向您的 express 服务器执行 ajax POST 请求,即“/contactus”。 /contactus 可以从 post 数据中获取 email、主题和内容并发送到 mail 函数。
在反应中:
$.ajax(
url: '/contactus',
dataType: 'json',
cache: false,
success: function(data)
// Success..
.bind(this),
error: function(xhr, status, err)
console.error(status, err.toString());
.bind(this)
);
在 express 中在 express post 处理程序中添加 nodemailer 代码:
app.post('/contactus', function (req, res)
// node mailer code
);
【讨论】:
通过代码示例提供更详细的答案将有助于 OP 感谢您的建议,这听起来会奏效!这也可能是一个愚蠢的问题,但现在,当我编译我的应用程序时,我只运行npm start
。如何让我的 express 服务器同时运行?
你用 node: node expressFile.js 启动 express 服务器【参考方案2】:
@ryan-jenkin 完全正确。
或者,如果您没有/想要 jQuery 作为依赖项,您可以使用原生的fetch api。另外,我通常会设置我的表单,使每个输入都有一个状态,然后在字符串化的 blob 中使用该状态。
客户端(反应):
handleSubmit(e)
e.preventDefault()
fetch('/contactus',
method: 'POST',
headers:
'Accept': 'application/json',
'Content-Type': 'application/json',
,
body: JSON.stringify(
email: this.state.email,
// then continue this with the other inputs, such as email body, etc.
)
)
.then((response) => response.json())
.then((responseJson) =>
if (responseJson.success)
this.setState(formSent: true)
else this.setState(formSent: false)
)
.catch((error) =>
console.error(error);
);
render()
return (
<form onSubmit=this.handleSubmit >
<input type="text" name="email" value=this.state.email />
// continue this with other inputs, like name etc
</form>
)
【讨论】:
使用 react-router 会使这个过程复杂化吗?我有一个反应路由器,从客户端获取,并在我的快递服务器上有一个帖子,但仍然收到 404 找不到路由。 @布莱克脸以上是关于使用 React.js + Express.js 发送电子邮件的主要内容,如果未能解决你的问题,请参考以下文章
express.js 和 react.js cookie 保存到浏览器但不工作?
如何通过 Express JS 服务器使 React JS 和 Socket IO 连接在一起?
如何为 api 部署 node js express js,为前端部署 react js,为管理员部署 angular