者 | Mateusz Iwaniuk

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 php 或 python 这种后端语言，你甚至不需要用到 node.js！你需要的就是一个简单的EmailJS 库。

本文将介绍下面两个重要功能:

• 配置 emailjs 帐户

• 使用 JS 发送电子邮件

请注意，在我的项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性，因为稍后，preventDefault 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性，后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personal email service）。在我的例子中，我选择了 gmail。

然后，你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的！

连接完 gmail 账户后，点击添加服务（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。界面非常友好，所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import 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 文件,

事件对象来自你的表单提交

USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form=document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

?我们想研发一个机器学习框架，6 个月后失败了
?生产型机器学习已经没那么困难了？
?视频 | 你不知道的"开源"60年秘史
?GitHub标星10,000+，Apache项目ShardingSphere的开源之路
?阿里技术专家告诉你，如何画出优秀的架构图？
?加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

一篇文章我给大家说明了如何从零开始搭建一个node的服务端框架，我们用到了Egg框架。Egg框架我不再过多介绍，如果有小伙伴想了解，可以回去看我以前写的文章，会有相关的介绍。这次我将在上次搭建的框架上进行延伸，讲一下如果用Egg框架连接数据库，并且实现对数据的增删查改。接下来我们直接进入主题。

安装数据库插件

我本次选用的数据库是MySQL。所以我们安装Egg官方的数据库插件即可，首先我们安装插件 egg-mysql 。我们在项目根目录打开命令提示符，输入命令行：npm i --save egg-mysql 。回车等待插件下载安装完成。

npm i --save egg-mysql

配置插件

命令行下载安装插件完成后，我们下一步的工作就是在项目中开启并配置egg-mysql插件。具体操作如下：

首先我们要在项目中开启数据库。找到项目中的/config/plugin.js文件我们需要在里面添加几行代码，如下所示。

//开启数据库插件
  mysql : {
    enable: true,
    package: 'egg-mysql',
  }

然后我们还要在 config/config.default.js 中配置各个环境的数据库连接信息。具体配置如下。

//添加数据库连接信息
  config.mysql={
    // 单数据库信息配置
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: 'root',
      // 密码
      password: '123456',
      // 数据库名
      database: 'testdb',
    },
    // 是否加载到 app 上，默认开启
    app: true,
    // 是否加载到 agent 上，默认关闭
    agent: false,
  };

到此步骤我们的数据库插件已经安装完成并且配置好了。那我们怎么实现数据的增删查改呢？大家请继续往下看。

数据操作-新增用户

首先我们看一下怎么新增数据。我们在mysql的testdb实例中新建一个user空表。如下图所示。

我们的egg框架也遵循MVC的架构所以我们一般会在service层里面写我们逻辑处理的代码，而controller层则是获取前端数据，回传数据的控制层。所以我们操作数据库的代码是写在service文件夹里面的。

我们在app/service文件夹里面新建一个user.js文件。在里面写个新增用户的方法，该方法就是把数据存到数据库中。具体代码如下。

const Service=require('egg').Service;

class UserService extends Service {

  //新增用户data是有controller层传递过来的数据记录。
  async addUser(data) {

    const {ctx, app}=this;
    let result={};
    try {
      data.id=0;//定义id=0，因为数据库已经设置id为主键，并且自增。所以只需要赋值0即可。
      // 在 user 表中，插入前端提交上来的数据记录
      const info=await app.mysql.insert('user', data); 
  
      //插入成功后。
      if(info.affectedRows===1){
        //给前端返回一个Json的对象
        result={
          state: 0, //自定义的状态码
          msg: "添加成功", //返回的消息
          data: info.insertId, //新增的记录的id
        }
      }

    } catch (err) {
      //插入数据失败的返回结果
      result={
        state: 1, 
        msg: err,
        data: null,
      }
    }
    
    return result
  }
};
module.exports=UserService;

然后我们在app/controller文件夹里新建一个user.js文件。在这里我们需要获取前端提交上来的数据，并且将数据处理的结果返回给前端。具体代码如下。

'use strict';

const Controller=require('egg').Controller;
/**
 * @Controller 用户管理
 */
class UserController extends Controller {

  /**
  * @summary 新增用户
  * @router post /user/add
  * @request body userAddRequest 
  * @response 200 
  */
  async addUser() {
    const { ctx }=this;

    //通过ctx.request.body的方式，可以获取到前端post方式提交上来的数据
    const data=ctx.request.body;

    //调用service层的addUser方法。并且返回相应的结果
    const userInfo=await ctx.service.user.addUser(data);
    
    //向前端接口响应数据。
    ctx.body=userInfo;
  }

}

module.exports=UserController;

最后我们定义一个路由，让前端请求访问此路由。框架会监听路由是否被访问，如果被访问了则会调用我们定义在controller层的新增用户的方法。我们在app/router.js文件中添加如下代码，即可完成路由的定义。

//新增用户路由
  router.post('/user/add', controller.user.addUser);

完成这步骤后，我们一个新增用户的功能就已经完成了。接下里我们就测试一下它的实际效果。我们运行命令：npm run dev。启动项目，然后打开网页http://127.0.0.1:7001，可以直接在swagger-ui.html页面中进行测试。结果如下图所示。

经过测试，数据已经添加完成。所以数据库连接也是正常的。

本次分享暂时先告一段落。请各位小伙伴抬起你们发财的小手，点个赞呗。下次我将会进行和大家分享对数据查改删的方法。关注我！！！更多精彩分享不迷路。

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload=function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload=function(){
  alert("test1");
};

window.onload=function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
}); 

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为 ：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script=document.createElement('script');
    script.type="text/javascript";
    if (typeof(callback) !="undefined") {
        if (script.readyState) {
            script.onreadystatechange=function() {
                if (script.readyState=="loaded" || script.readyState=="complete") {
                    script.onreadystatechange=null;
                    callback();
                }
            }
        } else {
            script.onload=function() {
                callback();
            }
        }
    }
    script.src=url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－