简体繁体 English

从Create-React-App联系表单发送电子邮件

[英]Sending an email from Create-React-App contact form

原文 2017-08-17 00:14:47 6 1 javascript/ node.js/ reactjs

I am working on a website that I used create-react-app to create. 我正在使用create-react-app创建的网站上工作。 I need to make a contact page where the information entered will be sent to a specified email. 我需要建立一个联系页面，其中输入的信息将被发送到指定的电子邮件。

After doing some research I discovered this is going to require me to setup some back-end. 在做了一些研究之后，我发现这需要我设置一些后端。 I am very unfamiliar with back-end programming. 我对后端编程非常不熟悉。 I know about nodejs and am somewhat capable of setting up a basic server using that, but I have no clue how to connect it to the react site, or if I even need a node server (just mentioned it because I found Nodemailer ). 我知道nodejs并且有点能够使用它来设置基本服务器，但我不知道如何将它连接到react站点，或者我甚至需要一个节点服务器（刚才提到它因为我找到了Nodemailer ）。

What's a good back-end setup I should use? 我应该使用什么是好的后端设置？ All I need to use it for is sending an input field's value to a specific email. 我需要使用它来将输入字段的值发送到特定的电子邮件。

I'm sorry this is such a noob/vague question, I am just looking for some direction on what to start researching and learning. 对不起，这是一个这样一个菜鸟/模糊的问题，我只是在寻找开始研究和学习的方向。 I don't expect a detailed answer on the purpose and precise operations of a back-end server, just some helpful guidance or somewhere to start learning! 我不希望有关后端服务器的目的和精确操作的详细答案，只是一些有用的指导或开始学习的地方！

Any help is really appreciated! 任何帮助真的很感激！

1 个解决方案

I can think of two options to connect to the back-end to send an email. 我可以想到连接到后端发送电子邮件的两个选项。

API: You create an endpoint on your backend (ie https://yourdomain.com/api/sendemail ). API：您在后端创建端点（即https://yourdomain.com/api/sendemail ）。 Using expressjs, or some other server side library, you create that endpoint to receive a POST request. 使用expressjs或其他服务器端库，您可以创建该端点以接收POST请求。 ( https://expressjs.com/en/starter/basic-routing.html ) You then use the front-end (fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch ) to call the endpoint with the data needed in the email and in turn the endpoint calls your send email function with Nodemailer or whatever. （ https://expressjs.com/en/starter/basic-routing.html ）然后使用前端（fetch： https ： //developer.mozilla.org/en-US/docs/Web/API/Fetch_API / Using_Fetch ）使用电子邮件中所需的数据调用端点，然后端点通过Nodemailer或其他任何方式调用您的发送电子邮件功能。
Form Submit: The other option is similar to the first in that it sends a POST request with the form data to the back-end. 表单提交：另一个选项类似于第一个选项，它将带有表单数据的POST请求发送到后端。 This requires that the server send back a new page and your browser will then reload. 这要求服务器发回新页面，然后您的浏览器将重新加载。 Where as the first option can be done without a page reload. 哪里可以在没有页面重新加载的情况下完成第一个选项。