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

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

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

1.创建云开发环境

打开云开发控制台地址：https://console.cloud.tencent.com/tcb，点击新建云开发环境

创建云开发环境

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

保存环境ID

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

开启匿名登录

2.创建项目

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

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

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

创建vue项目

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

运行Vue

自此初始创建完成

3.在Vue中安装tcb-js-sdk

点击依赖再点击安装依赖

安装sdk

搜索tcb-js-sdk即可安装

安装

在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实例

4.在云函数中使用实现邮件的发送

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

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

获取api_key

编写云函数

'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';
    const api_key = '7aa7bf7e23105b1726efa09a409768fc-468bde97-aeddf80e'
    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 + 'n' + '编号：' + Math.ceil(Math.random()*100), //详细内容
    };
    mg.messages().send(data, function(error, body) {
        console.log(body)
    });
};

在控制台新建云函数，运行环境选择NodeJs 10.15

新建云函数

新建云函数2

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

新建依赖

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代码

5.项目演示

发送邮件测试

success

检查邮箱，成功接收邮件

success_mail

演示站点：https://mail.enlovejin.cn/ Demo

开源地址：https://gitee.com/12300/cloudbase_mail

欢迎在下方评论区留言或在微信开放社区进入云开发专区与我们交流。

点击阅读原文进入社区官网，了解云开发的更多信息。

☁

更多云开发CloudBase出品

点击下方图片即可了解

△ 云开发数据库已支持回档到最长14天内的任意时刻

由于公众号推送规则更改，请多多分享、点赞和“在看”，以及时获取云开发Cloudbase的最新动态。

点击在看让更多人发现精彩

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