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

云开发的云函数能够让我们无需购买和管理服务器，就能够实现一些前端做不了，必须在服务端做的复杂操作，让我们大大降低了运维成本。本篇将会为您讲解，如何在前端主流框架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: '云开发 ',
        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的最新动态。

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