# cloudbase_mail

**Repository Path**: oneexecom/cloudbase_mail

## Basic Information

- **Project Name**: cloudbase_mail
- **Description**: Vue使用云开发的云函数发送email
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-09-23
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 如何在Vue中使用云开发的云函数，实现邮件发送

------
![logo](https://images.gitee.com/uploads/images/2020/0623/221320_1b55e0b6_606443.png)

云开发的云函数能够让我们无需购买和管理服务器，就能够实现一些前端做不了，必须在服务端做的复杂操作，让我们大大降低了运维成本。**本篇将会为您讲解，如何在前端主流框架Vue中使用云开发的云函数**。

通过本篇您将可以学习到：

> * 如何创建云开发环境
> * 如何在Vue中使用云开发
> * 如何在Vue中利用云开发的云函数，实现邮件的发送

## $\color{#2263f9}{1.创建云开发环境}$
打开云开发控制台地址：https://console.cloud.tencent.com/tcb/env/index，点击新建云开发环境

![创建云开发环境](https://images.gitee.com/uploads/images/2020/0623/221320_c1efb7fb_606443.png)

创建后进入控制台首页，复制环境ID保存，后续前端调用云函数需要用到

![保存环境ID](https://images.gitee.com/uploads/images/2020/0623/221320_2a1251d3_606443.png)

创建完成后，点击登录授权，开启匿名登录

![开启匿名登录](https://images.gitee.com/uploads/images/2020/0623/221320_3b9301e7_606443.png)

------

## $\color{#2263f9}{2.创建 Vue项目}$

首先，Vue CLI需要 Node.js 8.9或更高版本 (推荐 8.11.0+)，下载地址：http://nodejs.cn/，安装后即可进行创建

```
npm install -g @vue/cli # 安装Vue
vue ui #需要以管理员权限运行
```

这时会以图形化界面将你引导至项目创建的流程

![创建vue项目](https://images.gitee.com/uploads/images/2020/0623/221320_e7f8b87a_606443.png)

创建完成后点击任务-运行Vue服务

![运行Vue](https://images.gitee.com/uploads/images/2020/0623/221320_f5a2da4f_606443.png)

自此初始创建完成

------

## $\color{#2263f9}{3.在Vue中安装tcb-js-sdk}$

点击依赖再点击安装依赖

![安装sdk](https://images.gitee.com/uploads/images/2020/0623/221320_0c4b3b9b_606443.png)

搜索tcb-js-sdk即可安装

![安装](https://images.gitee.com/uploads/images/2020/0623/221320_9dec20bb_606443.png)

在Vue项目的main.js中导入tcb-js-sdk，需要注意的是，要将env换为之前保存环境Id

```
import tcb from 'tcb-js-sdk'
const app = tcb.init({
        env: 'share-195a54' // 需要更换为自己的环境Id，如我的是：share-195a54
    })
Vue.prototype.$app = app // 在原型上添加上tcb-js-sdk实例
```

------

## $\color{#2263f9}{4.在云函数中使用mailgun实现邮件的发送}$

> mailgun是一个开发人员的电子邮件服务,具有强大的API功能,能够轻松发送,接收和跟踪电子邮件。  
官网地址:https://www.mailgun.com/

需要注册后获取api_key，注册过程这里就不再赘述了，注册后在该页面获取api_key

![获取api_key](https://images.gitee.com/uploads/images/2020/0623/221320_c9d9009f_606443.png)

编写云函数
```
'use strict';

exports.main = async(event, context) => {
    /* data格式
    {
        addressee: 'xxxx@xx.xx', // 收件人地址
        subject: 'xxxx', // 邮件主题
        text: 'xxxxxx' // 正文

    }
     */
    const mailgun = require("mailgun-js");
    const DOMAIN = 'sandbox249ed5376daa44a2baabd83d3cb2bf9b.mailgun.org'; // domain地址
    const api_key = '7aa7bf7e23105b1726efa09a409768fc-468bde97-*****'; //mailgun提供的api_key
    const mg = mailgun({ apiKey: api_key, domain: DOMAIN });
    const data = {
        from: '云开发 <me@sandbox249ed5376daa44a2baabd83d3cb2bf9b.mailgun.org>',
        to: event.addressee, // 如果有多个收件人以逗号分隔："xxx1@qq.com, xxx2@qq.com"
        subject: event.subject, // 主题
        text: event.text, //详细内容
    };
    mg.messages().send(data, function(error, body) {
        console.log(body)
    });
};
```
在控制台新建云函数，运行环境选择NodeJs 10.15

![新建云函数](https://images.gitee.com/uploads/images/2020/0623/221320_c458a9d1_606443.png)

![新建云函数2](https://images.gitee.com/uploads/images/2020/0623/221320_b9eb996e_606443.png)

点击云函数、函数代码中新建**package.json**，点击保存并安装依赖

![新建依赖](https://images.gitee.com/uploads/images/2020/0623/221320_0f23950d_606443.png)

package.json的内容

```
{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {},
    "author": "",
    "license": "ISC",
    "dependencies": {
        "tcb-admin-node": "latest",
        "mailgun-js": "^0.22.0"
    }
}
```

自此云函数的部署已经完成，只需要我们前端去进行简单的调用


### 回到我们的Vue

在Vue中创建一个简单地邮件发送函数，在前端代码中绑定按钮点击事件，触发后首先进行匿名登录，登录后进行邮件的发送，发送成功后输出成功提示

```
async send_email() {
      // 匿名登陆
      await this.$app
        .auth({
          persistence: "session"
        })
        .anonymousAuthProvider()
        .signIn()
        .then(res => {
          console.log(res); // 登录成功
        })
        .catch(err => {
          console.log(err); // 登录失败
        });

      // 调用云函数发送邮件
      await this.$app
        .callFunction({
          name: "send_email",
          data: {
            addressee: this.addressee, // 收件人地址
            subject: this.subject, // 邮件主题
            text: this.text // 正文
          }
        })
        .then(res => {
          this.$message.success("发送成功！");
          console.log(res);
        })
        .catch(err => {
          this.$message.error("发送失败！");
          console.log(err);
        });
    }
```

HTML调用的代码

![html代码](https://images.gitee.com/uploads/images/2020/0623/221320_31ca6f22_606443.png)


## $\color{#2263f9}{5.项目演示}$

发送邮件测试

![success](https://images.gitee.com/uploads/images/2020/0623/221321_384e966b_606443.png)

检查邮箱，成功接收邮件

![success_mail](https://images.gitee.com/uploads/images/2020/0623/221321_6a539af9_606443.png)

演示站点：<https://mail.enlovejin.cn/>  
Demo开源地址：<https://gitee.com/12300/cloudbase_mail>

------











### 如何使用？

## 初始化项目
```
npm install

```

### 运行项目
```
npm run serve
```