网站常见结构有那些,网络营销管理系统,南阳锐诚网站建设,重庆工程信息网官网首页你不需要使用任何后端语言#xff0c;如 PHP 或 Python。此外#xff0c;你甚至不需要Node.js!有很多方法可以读取这些数据。你可以将你的表单与数据库(如MySQL)连接#xff0c;然后从数据库中读取传入的信息。好吧#xff0c;这是一个选择#xff0c;但是我认为这对于你的…你不需要使用任何后端语言如 PHP 或 Python。此外你甚至不需要Node.js!有很多方法可以读取这些数据。你可以将你的表单与数据库(如MySQL)连接然后从数据库中读取传入的信息。好吧这是一个选择但是我认为这对于你的非技术客户来说可能会很麻烦。你不需要使用任何后端语言你需要的只是一个简单的 EmailJS 库。本文将介绍下面两个重要功能配置 EmailJS 帐户使用JS发送电子邮件我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。在我的项目中使用了Webpack我在 src 文件夹存放源码dist 存放最终发布版本的代码使用 npm run dev 可以把项目跑起来。提供项目完整代码真实可运行。需要的可以点击我的头像私信关键字emailjs。项目完整代码项目界面步骤1用HTML创建表单首先需要做的当然是创建一个HTML表单。注意你不必设置 required 或 max 等验证属性因为稍后preventDefault() 函数将在你的提交事件上运行它将取消这些属性的工作。表单中最重要的事情是为每个输入设置 name 属性这在后面会用到的。我的简单表格如下所示src/html/index.html步骤2注册emailjs要配置电子邮件您必须注册emailjs服务。不用担心使用此网站非常友好你不会花很多时间在该网站上。注册emailjs服务https://dashboard.emailjs.com/account/create登录后将询问你有关电子邮件服务的信息。它放置在个人电子邮件服务区域中就我而言我选择了Gmail。点击 Connect account 连接Gmail。连接Gmail此时会弹出Gmail的授权窗口在请求权限对话框中点击允许。连接 Gmail 帐户后点击“Add Service”按钮。成功添加后可以看到如下界面。例如如果你连接上你的xyzgmail.com账户你未来收到的邮件就会从这个账户发出。所以不要担心让Gmail代你发送电子邮件——这正是你所需要的步骤3创建你的邮件模板创建你的邮件模板经过上面的步骤你已经成功地连接了您的 Gmail帐户在你的仪表板中应该可以看到点击左侧的导航进入邮件模板设置页面。然后单击“Create a new template”按钮创建新模板界面非常友好所以创建它不会有任何问题。你可以选择模板的名称和ID我设置为“my-amazing-template”。创建新模板你现在必须指定传入的电子邮件应该是什么样的。将使用来自于表单中的 name 属性作为变量插入到 {{{ }}} 符号中。不要忘记在 To email(收件人)部分中放置一个电子邮件地址这里我们读取我们输入的收件人变量。插入变量这是我的简单模板它使用了4个变量分别来自于我的HTML表单我还指定了一个收发邮件的主题。步骤4保存你的API密钥好吧这部分没有什么特别的。 Emailjs共享授权API密钥这些密钥将在发送电子邮件期间使用。当然放置这些密钥的最佳位置是 .env 配置文件。但由于我的工作对象是简单的静态文件不想做服务器配置的工作所以我会把它们保存在 apikeys 文件中以后再导入。你的 USER_ID 位于Account API Keys中。并且你的 TEMPLATE_ID 位于模板标题的下方。这是我的 src/js/apikeys.js 的示例配置。export default {USER_ID :user_DPUd-rest-of-my-id,TEMPLATE_ID:my_amazing_template}步骤5发送邮件现在是该项目的最后也是最重要的部分了现在我们必须使用javascript发送电子邮件。首先你必须下载emailjs软件包。npm i emails-com之后转到你的 src/js/main.js 文件并导入你的库和apikey。import emailjs from emailjs-comimport apiKeys from ./apikeys现在是时候在 src/js/main.js 中编写发送电子邮件功能了。const sendEmail 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.jsconst form document.querySelector(.form)form.addEventListener(submit,sendEmail)如前所述由于使用了 preventDefault() 函数因此无法进行属性验证你必须使用JS自己进行验证和清除输入。仅此而已最后让我们使用 npm run dev 测试一下我填写页面上的表单并发送。我的163邮箱收到了电子邮件内容正是根据我们的模板和表单数据渲染出来的。通过上图可以看出所有的变量的值都填充到了正确的位置上。结束通过本文的介绍你会发现用 JS 发送邮件并非难事。使用 emailjs你可以简单的方式发送电子邮件。我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件相信本文对你有帮助。如果对你有所启发和帮助可以点个关注、收藏、转发也可以留言讨论这是对作者的最大鼓励。作者简介Web前端工程师全栈开发工程师、持续学习者。私信回复大礼包送某网精品视频课程网盘资料准能为你节省不少钱
