当前位置: 首页 > news >正文

前端利用emailjs发送邮件

最近有一个需求,前端发送一个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

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

相关文章:

前端利用emailjs发送邮件

最近有一个需求,前端发送一个form表单到一个邮箱,找了一圈发现emailjs还不错就使用他了。首先emailjs官网注册一个账号注册完之后创建一个邮件服务(我这里使用的是谷歌邮箱)链接谷歌邮箱账户 然后创建服务接下来就要创建一个邮件的…...

16 Nacos服务端服务注册源码分析

Nacos服务端服务注册源码分析 服务端调用接口 我们已经知道客户端在注册服务的时候实际上是调用的NamingService.registerInstance这个方法来完成实例的注册,而且在最后我们也告诉了大家实际上从本质上讲服务注册就是调用的对应接口nacos/v1/ns/instance&#xff…...

Spring Boot2中如何优雅地个性化定制Jackson

概述 本文的编写初衷,是想了解一下Spring Boot2中,具体是怎么序列化和反序列化JSR 310日期时间体系的,Spring MVC应用场景有如下两个: 使用RequestBody来获取JSON参数并封装成实体对象;使用ResponseBody来把返回给前…...

2023年全国最新食品安全管理员精选真题及答案11

百分百题库提供食品安全管理员考试试题、食品安全员考试预测题、食品安全管理员考试真题、食品安全员证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 101.婴幼儿配方乳粉的产品配方应当经()部门注册。…...

【脚本】用于得到某个文件/文件夹所有文件的存储大小(MB单位)

知识点 来自在线转换换算网页:在线文件大小(bit,bytes,KB,MB,GB,TB)转换换算 电脑中存储常用的单位: 1Byte(Byte 字节) 8Bit 1KB (Kilobyte 千字节) 1024Byte 1MB (Megabyte,兆字节,简称“兆”) 1024KB 1GB (Gigabyte&am…...

19- CNN进行Fashion-MNIST分类 (tensorflow系列) (项目十九)

项目要点 Fashion-MNIST总共有十个类别的图像。代码运行位置 CPU: cputf.config.set_visible_devices(tf.config.list_physical_devices("CPU"))fashion_mnist keras.datasets.fashion_mnist # fashion_mnist 数据导入训练数据和测试数据拆分: x_valid, x_train…...

【正点原子FPGA连载】第二十二章IP封装与接口定义实验 摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南

1)实验平台:正点原子MPSoC开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id692450874670 3)全套实验源码手册视频下载地址: http://www.openedv.com/thread-340252-1-1.html 第二十二章IP封装…...

【ElasticSearch8.X】学习笔记(二)

【ElasticSearch8.X】学习笔记四、基础操作4.1、索引操作4.1.1、创建索引4.1.2、查询指定索引4.1.3、查询所有索引4.1.4、 删除索引4.2、文档操作4.2.1、创建文档4.2.2、查询文档4.2.3、修改文档4.2.4、删除文档4.2.5、查询所有文档4.3、数据搜索4.3.1、匹配查询文档4.3.2、匹配…...

Ubuntu22.04安装、配置、美化、软件安装、配置开发环境

Ubuntu22.04安装、配置、美化、软件安装、配置开发环境 一、Ubuntu、Windows11(10)双系统安装 因为ubuntu的安装网上的教程特别多了,所以这里不做赘述,推荐使用小破站这个up主的教程:Windows 和 Ubuntu 双系统从安装到…...

企业电子招投标采购系统之系统的首页设计

​​ 功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为…...

Python爬虫-阿里翻译_csrf

前言 本文是该专栏的第37篇,后面会持续分享python爬虫干货知识,记得关注。 笔者在前面有介绍过百度翻译的案例,感兴趣的同学,可往前翻阅查看(JS逆向-百度翻译sign)。而本文,笔者要介绍的是阿里翻译,相对于百度翻译的参数被逆向需要花点时间,阿里相对于易上手。 下面…...

C语言实现三子棋【详解+全部源码】

大家好,我是你们熟悉的恒川 今天我们用C语言来实现三子棋 实现的过程很难,但我们一定要不放弃 三子棋1. 配置运行环境2. 三子棋游戏的初步实现2.1 建立三子棋分布模块2.2 创建一个名为board的二维数组并进行初始化2.3 搭建棋盘3. 接下来该讨论的事情3.1 …...

双指针法将时间复杂度从 O(n^2) 优化到 O(n)

[1] 什么是双指针法 双指针法(Two Pointers)是一种常见的算法技巧,常用于数组和链表等数据结构中。 双指针法的基本思想是维护两个指针,分别指向不同的位置,通过它们的移动来解决问题。在某些情况下,使用双…...

【SpringBoot系列】 Spring中自定义Session管理,Spring Session源码解析

系列文章:Spring Boot学习大纲,可以留言自己想了解的技术点 目录 系列文章:Spring Boot学习大纲,可以留言自己想了解的技术...

【上位机入门常见问题】SQLServer2019 安装指导

SQLServer2019 安装指导 这里要说一下SQLServer的版本问题,首先说纵向的高低版本,如果大家跟我学习,我教给大家的是T-SQL编程的方法,而不是直接操作菜单的方法,所以,我们学习中只要使用SQLServer2012或以上…...

RabbitMQ第一讲

目录 一、RabbitMQ-01 1.1 MQ概述 1.2 MQ的优势和劣势 1.2.1 优势 1.2.2 劣势 1.2.3 MQ应用场景 1.2.4 常用的MQ产品 1.3 RabbitMQ的基本介绍 1.3.1 AMQP介绍 1.3.2 RabbitMQ基础架构 1.3.3 RabbitMQ的6种工作模式 ​编辑 1.4 AMQP和JMS 1.4.1 AMQP 1.4.2 JMS …...

华为机试题:HJ100 等差数列(python)

文章目录(1)题目描述(2)Python3实现(3)知识点详解1、input():获取控制台(任意形式)的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方…...

数据推荐 | 人体行为识别数据集

人体行为识别任务旨在通过对人体姿态进行分析,识别出人体的具体动作,为人体行为预测、突发事件处理、智能健身、智能看护等领域提供技术支持。 图片 图片 人体行为识别数据标注方式 人体行为数据通用的标注方式包括人体关键点标注和动作标签标注&#…...

667真题分析 | 2023年667真题简要分析和答题思路参考

2023年667真题简要分析和答题思路参考 文章目录 2023年667真题简要分析和答题思路参考前言1. 名词解释2. 简答题3. 分析题3.1 答题框架(套路)3.2 答题框架实战3.2.1 图书情报档案事业如何在文化自信、文化强国中发挥自己的地位和作用3.2.2 高校图书馆如何发挥空间资源的功能和…...

配置 Docker 使用 GPU

准备工作 首先你需要准备一台拥有GPU的实例,在这里我将使用阿里云的竞价实例来做演示,因为它对于短期使用GPU更加划算。 注意,本篇文章将教你手动进行GPU驱动的配置,所以在购买时选择系统的时候不要选择自动安装GPU驱动。 具体关…...

「并发编程实战」常见的限流方案

「并发编程实战」常见的限流方案 文章目录「并发编程实战」常见的限流方案一、概述二、计数器限流方案三、时间窗口限流方案四、令牌桶限流方案五、漏桶限流方案六、高并发限流算法小结文章参考: 追忆四年前:一段关于我被外企CTO用登录注册吊打的不堪往事…...

IO 复习

IO 把电脑硬盘中的数据读到程序中,称为输入,进行数据的read操作 把程序往外部设备写数据,称为输出,进行数据的write操作 File类 一个File对象可以表示计算机硬盘上的一个文件或目录(文件夹) 可以获取文件信息,创建文件,删除文件 但是不能对文件中的数据进行读写操作 一些…...

什么是项目管理

项目管理(简称PM),就是将知识、技能、工具与技术应用于项目活动,以满足项目的要求。项目管理通过合理运用与整合特定项目所需的项目管理过程得以实现。项目管理使组织能够有效且高效地开展项目 “现代管理,项目就是一切…...

什么是入站营销?如何向合适的受众推销

没有什么比入站营销更有效地优先考虑客户体验了。 入站营销可为您的客户在他们需要的时间和地点准确提供他们想要的东西。它以最有机的方式在您的行业中建立信任、忠诚和权威。 什么是入站营销? 入站营销是一种商业方法,可提供优质内容和量身定制的客户…...

Qt 崩溃 corrupted double-linked list Aborted

文章目录摘要1 使用全局静态变量2 不取第一个和最后一个数3 将数据计算放到同一线程计算4 替换槽函数5 修改传值为const6 神奇的环境因素7 更神奇的板子差异8 另一个细节Aborted最后关键字: Qt、 Aborted、 corrupted、 double、 linked 摘要 额,结论&…...

牛逼了!这是什么神仙面试宝典?半月看完25大专题,居然斩获阿里P7offer

这是什么神仙面试宝典?半月看完25大专题,居然斩获阿里P7offer???????容我小小的嘚瑟一下下啦~~这份神仙面试宝典总共有25大专题:专题一:JavaOOP面…...

单链表详解

单链表一.概念二.一些类型的创建三.尾插四.头插五.头删尾删六.打印链表七.单链表查找,任意位置插入,任意位置删除八.源代码一.概念 该篇链表博客是按照工程项目的格式来记录的,与平常的算法链表有些许不同,注意区分。 二.一些类型的创建 三.尾…...

【AUTOSAR-CanNM】-3.1-如何让ECU发出的首帧是NM帧(Tx Nm报文先于Tx App应用报文发出)

点击返回「《Autosar_BSW高阶配置》总目录」 案例背景(共5页精讲):该篇博文将告诉您: 如何让ECU发出的首帧/第一帧是网络管理NM报文/帧(Tx Nm报文先于Tx App应用报文发出) 目录 1 图解详述APP报文和NM报文是如何发送的...

html常用标签2和语法练习

目录 1.表单标签 form标签 input标签 选择框 复选框:checkbox 按钮框:button 文件选择框 多行编辑框:textarea 2.html语法练习 展示简历信息 填写简历信息 ​编辑 3.HTML特殊字符 1.表单标签 表单是让用户输入信息的重要途径 表单域:包含表单元素的区域,重点是form…...

【go语言之thrift协议三之client端分析】

go语言之thrift协议之client端分析runClientOpenprotocolFactory.GetProtocolhandleClientNewTStandardClientNewCalculatorClienthandleClient的具体实现上一篇文章分析了thrift协议server端的实现,这边还是基于官方的示例去分析。 import ("crypto/tls"…...

wordpress 七牛云加速/快速seo软件

动态加载 对动态库的加载分为自动加载和动态加载两种 自动加载 程序在开始执行的时候, 将依赖的动态库文件加载到内存中, 再进行函数的链接, 称为自动加载 (之前讲动态库讲过) 动态加载 程序在执行期间, 需要使用到某个动态库中的文件的时候, 可以向动态链接器发出请求, 请求…...

wordpress 删除图片/重庆网络推广外包

简单的来说就是为了方便查找和导航代码用的。 下面举例如何快速的定位到我已经标识过的代码。#pragma mark 播放节拍器- (void) Run:(NSNumber *)tick{ //... } OK,那么如何查找呢,点击代码编辑器上面的导航栏即可:接着我修改一下代码:#pragm…...

wordpress摘要字数的插件/深圳市前十的互联网推广公司

原文地址:http://ec.zdnet.com.cn/managesoft/2009/1104/1503211.shtml 凡是比较或者评测的文章,必然会得到很多的非议,因为每个人的标准都不一样,而且本人也不可能对每个系统都研究透彻。本文整理了18家比较常见的OA产品&#xf…...

服务器公司/重庆seo代理

昨天下午抄的代码,用来完成扒网页这个步骤。 仅能实现获取源代码的内容,还没有进行处理,今天将会完成处理的步骤。 本次主要利用URLConnection 在Eclipse下完成 。 有一个错误阻碍了我将近两个小时,即 URLConnection url_con ur…...

建站系统加盟/百度官网网址

在 Elastic Stack 7.9 之后的发布中,我们可以直接在 Elasticsearch 的配置文件中配置 Node 的角色 (node roles)。这是一个新的变化。在 7.9 发布版之前,我们使用 node.master: true 这样的方式来定义一个 master 节点&#xff0c…...

网站首页导航代码/成人技术培训班有哪些种类

UITableView 是 iOS 开发中最常用的控件之一,使用 UITaleView 时最头疼的莫过于 cell 高度的计算,虽说在 iOS8.0 以后引入了自适应方法,但在适配过程中任然会遇到各种难题,尤其是为了满足产品需求进行复杂 cell 自定义时,高度计算可谓是难上加难.这里主要对开发中遇到的自定义 …...