前端利用emailjs发送邮件
创始人
2024-05-28 10:45:29

最近有一个需求,前端发送一个form表单到一个邮箱,找了一圈发现emailjs还不错就使用他了。

首先emailjs官网注册一个账号

注册完之后创建一个邮件服务(我这里使用的是谷歌邮箱)

链接谷歌邮箱账户 然后创建服务

接下来就要创建一个邮件的模版

模版可以是里面的变量是用{{}}包裹起来的 to Eamil 是设置收邮件的邮箱

到此为止服务就差不多了,现在开始看api

安装

这里有案例

我这里用的是send方法

import { send } from '@emailjs/browser';
const formRef = ref()
const submit = ()=>{formRef.value.validate((valid, fields) => {if (valid) {let loadingInstance = ElLoading.service({lock: true,text: 'Loading',background: 'rgba(0, 0, 0, 0.7)',})send(serviceID, templateID, templatePrams, publicKey).then(function(response) {ElMessage.info('發送成功!')loadingInstance.close()}, function(error) {ElMessage.error('發送失敗!')loadingInstance.close()})}})

我们来重点说一下这几个参数 serviceID, templateID, templatePrams, publicKey

serviceID

templateID

templatePrams 就是一个包含key和value的对象,而在上面提到的邮件模版中的{{}}中的内容对应这里的对象的key,解析出来后邮件的内容就是对应的value了。

publicKey

最后我们看一下收到的邮件

相关内容

热门资讯

输赢皆历练 平局亦华章——20... 君临江之湄,我倚山之隈。同汇一江楚,山水两相随。公元221年,孙权在鄂州建都立业,取“以武而昌”之意...
良庆区综合行政执法局精细治理护... 良庆区综合行政执法局围绕市政设施运行、市容环境整洁有序的重点,扎实推进楼宇亮化、市容秩序、环境卫生和...
杂技节14日精彩预告|金菊绽放... 转自:濮阳发布预告/ 金菊绽放龙都,杂技盛会启幕!9月13日—19日,第十二届中国杂技金菊奖全国杂技...
【场面】足不出沪,一站式领略全... (来源:上观新闻)2026年9月13日,第37届上海旅游节分会场路演活动在BFC外滩金融中心北区广场...
浦银理财张文桥:科技确定性对冲... 21世纪经济报道记者 杨梦雪9月12日,由21世纪经济报道主办、浦发银行联合主办的“2026资产管理...