文章目录

参考博客1. 发送一封QQ邮件添加Maven依赖QQ邮箱开启POP服务配置application.properties文件Controller层编写 vue前端（也可以直接省略使用PostMan测试接口） 2. 做一个发送邮件验证的对话框

参考博客

vue实现验证码倒计时功能SpringBoot实现邮箱发送验证码(QQ,163等同理)

1. 发送一封QQ邮件

该模块使用Controller方法发送邮件给用户，用户将会在QQ邮箱中收到6位验证码

添加Maven依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency>

QQ邮箱开启POP服务

进入QQ邮箱界面， 打开邮箱–设置–账户

找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务，如果没有开启，选择管理服务

点击进入后，点击“生成授权码”，后面按照QQ邮箱提示的操作，把授权码复制下来，后期会在项目配置文件中配置。

需要发送手机短信给QQ邮箱，然后才能生成QQ邮箱授权码。

生成的授权码就是application.properties中的email.password值,application.properties具体内容如下：

配置application.properties文件

# # smtp用户名spring.mail.username= #写绑定授权码的QQ邮箱，一般做邮箱发送测试就是写你自己的邮箱。# # 服务授权码spring.mail.password= # 输入QQ邮箱给你的授权码，这个授权码要和上面的邮箱对应。#smtp服务器，下面的其实都不用变spring.mail.host=spring.mail.properties.mail.smtp.ssl.enable=true# 默认的邮件编码为UTF-8spring.mail.default-encoding=UTF-8

Controller层

Spring邮箱验证测试类，尽量不要使用测试类，即使用@Test注解的测试方法测试。容易出现空指针异常。测试邮箱发送可以使用Controller方法

最后我们使用PostMan进行接口测试：

Controller类如下：

import com.feng.generation_design.entity.ApiResult;import com.feng.generation_design.util.ApiResultHandler;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.mail.SimpleMailMessage;import org.springframework.mail.javamail.JavaMailSender;import org.springframework.web.bind.annotation.*;@RestControllerpublic class EmailController {//存储随机生成的校验码private String cdoe_store = null;@Autowired(required = false)private JavaMailSender sender; // 引入Spring Mail依赖后，会自动装配到IOC容器 @GetMapping("/send")public ApiResult sendEmail() {String code = (Math.random() + "").substring(2, 8);//生成6位随机数cdoe_store = code;String email = "xxx@";//你想发给哪个邮箱SimpleMailMessage message = new SimpleMailMessage();message.setSubject("来自题库系统的提示"); // 发送邮件的主题message.setText("您好，您正在操作敏感信息，需要核验您的身份,您收到的验证码为:" + code); // 邮件的内容message.setTo(email); // 指定要接收邮件的用户邮箱账号message.setFrom("xxx@"); // 邮件发送方，也就是配置文件中的邮件地址。sender.send(message); // 调用send方法发送邮件return ApiResultHandler.buildApiResult(200, "邮件发送成功!", null);}

关于@Autowired(required=false)的使用

打开PostMan，我们对接口进行测试，选择GET方式，并输入url:localhost:8080/send,不传入任何参数，点击"Send".

上面其实用PostMan就可以直接看到请求结果了，用户也能接受到邮件。但是为了可视化性更好，我们编写一个具有发送邮件功能的按钮，请求成功后会有提示。

前端使用vue，做一个简单的发送邮件请求的按钮。

编写 vue前端（也可以直接省略使用PostMan测试接口）

<template><div><el-button @click="sendEmail()" type="text" size="large">生成邮件</el-button></div></template><script>export default {data() {return {};},methods: {sendEmail() {console.log("执行");//如果你的项目中使用cookies存储用户信息，可以使用当前用户存在系统cookie中的email值 作为邮件接收对象。// let teacher_email = this.$cookies.get("c_email");this.$axios({url: `/api/send`,}).then((res) => {if (res.status === 200) {console.log(res);this.$message({type: "success",message: "邮件发送成功，请注意查收!",});}}).catch((error) => {console.log("打印出错信息"）console.log(error)this.$message.error("邮件发送失败！!");});},},};</script><style></style>

有人可能会问，上面的/api啥意思，这个其实是在前端定义的，这里我就省略不写定义的地方了。这里实际上是对localhost：8088端口号的另称，不然前端的请求都要加上个localhost：8088得多麻烦!

上面UI用的是ElementU控件。写得很简单。

上面写的是text形式的按钮。点击后，如果请求数据成功，会提示：

邮件长这样：

其实这里可能会有小伙伴问，为什么这边是res.status呢？其实这里需要具体看，后端传过来的返回数据格式是什么样的。我们打开控制台（F12），（输出已经定义在我上面写的方法里了。）可以发现后端返回的数据如下：

res下面有status属性，所以我们前端如果想要获取到status，就用res.status来接收，200代表数据请求成功。

如果不清楚前端如何接收，可以在前端使用console.log(res);或者看看控制台输出的内容是什么。根据控制台打印的属性名获取即可。

2. 做一个发送邮件验证的对话框

在原有的仅有倒计时功能的对话框基础上，现在做一个简单的验证码接收对话框，点击发送验证码后，系统发送验证码给用户，在倒计时过程中用户不能再次请求发送验证码请求。

业务场景如下：

上面的删除确认对话框就不展示了，现在直接点击“删除” 触发对话框。

代码如下：

<template><div><el-button @click="sendEmail()" type="text" size="large">生成邮件</el-button><el-button @click="deleteIt()" type="text" size="large">删除题库</el-button><!-- 点击删除后发送验证码确认 --><el-dialog title="系统验证" :visible.sync="centerDialogVisible" width="40%" center><br /><span class="warning_info">您正在操作敏感信息，系统需要确认您为本人操作！系统已发送验证码至您邮箱，请注意查收!</span><br /><br /><br /><div class="input_examcode_style">验证码：<el-inputv-model="input_email_code"style="width: 40%"placeholder="请输入六位数验证码"></el-input><el-buttonv-bind:class="{ grey: isGrey, blue: !isGrey }"v-bind:disabled="dis"type="primary"@click="getCode"><span v-if="show">发送验证码</span><span v-else>重新发送({{ count }}s)</span></el-button></div><span slot="footer" class="dialog-footer"><el-button @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="submitExamCode()">提交</el-button></span></el-dialog></div></template><script>export default {data() {return {input_email_code: "",centerDialogVisible: false,// 邮件发送centerDialogVisible: false,dis: false,show: true,isGrey: false, //按钮样式timer: null, //设置计时器,count: "",//邮件发送};},methods: {getCode() {this.sendEmail();let TIME_COUNT = 60;if (!this.timer) {this.count = TIME_COUNT;this.isGrey = true;this.show = false;this.dis = true;this.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--;} else {this.dis = false;this.isGrey = false;this.show = true;clearInterval(this.timer);this.timer = null;}}, 1000);}},deleteIt() {console.log("删除");this.centerDialogVisible = true;},sendEmail() {console.log("执行");//如果你的项目中使用cookies存储用户信息，可以使用当前用户存在系统cookie中的email值 作为邮件接收对象。// let teacher_email = this.$cookies.get("c_email");this.$axios({url: `/api/Email/send`,//注意这个改成自己的接口URL}).then((res) => {if (res.status === 200) {console.log(res);this.$message({type: "success",message: "邮件发送成功，请注意查收!",});}}).catch((error) => {console.log("错误信息如下:");console.log(error);this.$message.error("邮件发送失败！!");});},submitExamCode() {let input = this.input_email_code;console.log("您输入的验证码为：" + this.input_email_code);this.$axios({...后续提交逻辑请求})this.input_email_code = null;this.centerDialogVisible = false;},},};</script><style>.selector {margin-left: 10%;}.tableStyle {margin-left: 10%;width: 100%;}.page {margin-top: 20px;display: flex;justify-content: center;align-items: center;}.dialog_content {margin-left: 20%;}.grey {background-color: #edeef1;border-color: #edeef1;color: #666;width: 30%;}.blue {background-color: #64a0dd;border-color: #64a0dd;}.input_examcode_style {margin-left: 20%;}.warning_info {font-family: "华文中宋";font-size: 20px;}</style>