您不需要使用任何后端语言，如PHP或Python。另外，您甚至不需要Node.js！有很多方法可以读取这些数据。您可以将表单与数据库（如MySQL）连接，然后从数据库中读取传入的信息。好吧，这是一个选项，但我认为这对您的非技术客户来说可能是个麻烦。您不需要使用任何后端语言，您只需要一个简单的EmailJS库。本文将涵盖以下两个重要功能：配置EmailJS帐户使用JS发送电子邮件我将向您展示如何通过5个步骤从头开始构建电子邮件发件人。我在我的项目中使用了Webpack，我将源代码存放在src文件夹中，dist存放最终发布版本的代码，并使用npmrundev来运行项目。提供项目完整代码，真实可运行。需要的可以点我头像私信关键字：emailjs。完整的项目代码项目界面第一步，用HTML创建表单首先要做的当然是创建一个HTML表单。请注意，您不必设置诸如required或max之类的验证属性，因为稍后，preventDefault()函数将在您的提交事件上运行，这将取消这些属性的工作。表单中最重要的是为每个input设置name属性，后面会用到。我的简单表单如下所示：src/html/index.html第2步，注册emailjs要配置电子邮件，您必须注册emailjs服务。别担心，这个网站非常人性化，您不会花很多时间在上面。注册emailjs服务：https://dashboard.emailjs.com/account/create登录后，系统会询问您的电子邮件服务。它位于个人电子邮件服务区，在我的例子中我选择了Gmail。单击连接帐户以连接到Gmail。连接Gmail时，会弹出Gmail授权窗口，在请求权限对话框中点击允许。连接Gmail帐户后，单击“添加服务”按钮。添加成功后，可以看到如下界面。例如，如果您链??接您的xyz@gmail.com帐户，您以后的电子邮件将从该帐户发送。所以不用担心让Gmail为您发送电子邮件-这正是您所需要的！Step3,CreateyouremailtemplateCreateyouremailtemplate经过以上步骤，你已经成功连接了你的Gmail账户，在Youshouldseeitinyourdashboard中，点击左侧导航进入邮件模板设置页面。然后点击“Createanewtemplate”按钮创建一个新模板，界面非常友好，创建起来不会有任何问题。您可以选择模板的名称和ID，我将其设置为“my-amazing-template”。创建新模板您现在必须指定传入电子邮件的外观。将使用表单中的名称属性作为插入到{{{}}}符号中的变量。不要忘记在Toemail部分输入一个电子邮件地址，这里我们读取我们输入的收件人变量。插入变量这是我的简单模板，它使用我的HTML表单中的4个变量，我还指定了用于发送和接收电子邮件的主题。第4步，保存您的API密钥好的，这部分没什么特别的。Emailjs共享将在发送电子邮件期间使用的授权API密钥。当然，放置这些密钥的最佳位置是.env配置文件。但是由于我使用的是简单的静态文件并且不想进行服务器配置工作，所以我会将它们保存在apikeys文件中并稍后导入它们。您的USER_ID位于帐户>API密钥中。并且您的TEMPLATE_ID位于模板标题下方。这是我的src/js/apikeys.js的示例配置。exportdefault{USER_ID:'user_DPUd-rest-of-my-id',TEMPLATE_ID:'my_amazing_template'}第五步，发送邮件！现在是项目的最后也是最重要的部分，现在我们必须使用javascript发送电子邮件。首先，您必须下载emailjs包。在npmiemails-com之后，转到您的src/js/main.js文件并导入您的库和apikey。importemailjsfrom'emailjs-com'importapiKeysfrom'./apikeys'现在是时候在src/js/main.js中编写发送电子邮件功能了。constsendEmail=e=>{e.preventDefault()emailjs.sendForm('gmail',apiKeys.TEMPLATE_ID,e.target,apiKeys.USER_ID).then(result=>{console.log(result.text)},error=>{console.log(error.text)})}很简单。如您所见，sendForm函数有4个参数。第一个参数：您的电子邮件的ID，在以下位置。第二个参数：TEMPLATE_ID来自你的apikey文件。第三个参数：表单提交中的事件对象e。第四个参数：USER_ID来自你的apikey文件。最后，找到表单并添加一个提交事件监听器。//src/js/main.jsconstform=document.querySelector('.form')form.addEventListener('submit',sendEmail)如前所述，由于使用了preventDefault()函数，因此无法进行属性验证，您必须使用JS自己进行验证和清理输入。就这些，让我们最后用npmrundev测试一下，我在页面上填写表格并发送。我的163邮箱收到了邮件，内容是根据我们的模板和表单数据渲染出来的。从上图可以看出，所有变量的值都填在了正确的位置。看完本文的介绍，你会发现用JS发邮件并不难。使用emailjs，您可以以简单的方式发送电子邮件。我相信您未来的用户会很高兴收到来自他们网页上的表单填写数据的t-mail，我相信这篇文章会对您有所帮助。
