springboot与vue详解实现短信发送流程

springboot与vue详解实现短信发送流程

目录一、前期工作1.开启邮箱服务2.导入依赖3.配置application.yaml文件二、实现流程1.导入数据库2.后端实现编写实体类编写工具类ResultVo编写dao层接口配置dao层接口的数据库操作编写service层接口编写service层的实现方法实现controller层Test代码前端页面的实现运行截图+sql图总结

一、前期工作

1.开启邮箱服务

开启邮箱的POP3/SMTP服务（这里以qq邮箱为例，网易等都是一样的）

2.导入依赖

在springboot项目中导入以下依赖：

org.springframework

spring-context-support

5.3.18

org.springframework.boot

spring-boot-starter-mail

org.projectlombok

lombok

junit

junit

org.springframework.boot

spring-boot-starter-jdbc

mysql

mysql-connector-java

5.1.47

runtime

com.alibaba

druid

1.1.21

com.alibaba

druid-spring-boot-starter

1.1.17

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.2.2

3.配置application.yaml文件

# 邮箱设置spring: mail:   host: smtp.163.com //如果是qq的邮箱就是smtp.qq.com   password: 开启pop3生成的一个字符串密码   username: 自己的邮箱地址，是什么邮箱后缀就是什么。   port:   default-encoding: UTF-8   protocol: smtp   properties:     mail.smtp.auth: true     mail.smtp.starttls.enable: true     mail.smtp.starttls.required: true     mail.smtp.socketFactory.class: javax-.ssl.SSLSocketFactory     mail.smtp.socketFactory.fallback: false     mail:       smtp:         ssl:           enable: true mvc:   pathmatch:     matching-strategy: ant_path_matcher datasource: # jdbc数据库设置   druid:     password: sql密码     username: sql用户     url: jdbc:mysql://localhost:3306/sys?charsetEncoding=utf-8&useSSL=false     driver-class-name: com.mysql.jdbc.Driver     db-type: com.alibaba.druid.pool.DruidDataSourcemybatis: #mybatis的配置 type-aliases-package: com.cheng.springcolud.pojo config-location: classpath:mybatis/mybatis-config.xml mapper-locations: classpath:mybatis/mapper/*.xml

二、实现流程

1.导入数据库

/*

Navicat Premium Data Transfer

Source Server : likai

Source Server Type : MySQL

Source Server Version : 50719

Source Host : localhost:3306

Source Schema : sys

Target Server Type : MySQL

Target Server Version : 50719

File Encoding : 65001

Date: 04/06/2022 14:08:29

*/

SET NAMES utf8mb4;

SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------

-- Table structure for useremaillogintable

-- ----------------------------

DROP TABLE IF EXISTS `useremaillogintable`;

CREATE TABLE `useremaillogintable` (

`id` int(255) NOT NULL AUTO_INCREMENT,

`email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,

`VerificationCode` int(20) NULL DEFAULT NULL,

`createTime` datetime(0) NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP(0),

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

2.后端实现

编写实体类

代码如下（示例）：

@Data

@NoArgsConstructor

@ToString

public class EmailVerification {

private int id;

private String email; //需要发送的邮箱

private Integer verificationCode;//验证码

private Date createTime;

public EmailVerification(String email, Integer verificationCode) {

this.email = email;

this.verificationCode = verificationCode;

}

}

编写工具类ResultVo

@Data

@AllArgsConstructor

@NoArgsConstructor

public class ResultVO {

private int code;//相应给前端的状态码

private String msg;//相应给前端的提示信息

private Object data;//响应给前端的数据

}

编写dao层接口

Mapper

@Repository

public interface EmailVerificationDao {

/*将短信验证码和个人邮箱保存到数据库中*/

public Boolean getEmailVerificationCode(String email,Integer verificationCode);

/*校验短信信息*/

public List checkEmailVerificationCode(String email,Integer verificationCode);

/*查询所有的用户*/

public List queryEmailVerificationInfo();

}

配置dao层接口的数据库操作

insert into sys.useremaillogintable(email, VerificationCode,createTime) VALUES (#{email},#{verificationCode},NOW())

select * from sys.useremaillogintable where email=#{email} and VerificationCode=#{verificationCode}

select * from sys.useremaillogintable;

编写service层接口

public interface EmailVerificationCodeService {

public boolean getEmailVerificationCode(String email,Integer verificationCode);

public ResultVO checkEmailVerificationCode(String email, Integer verificationCode);

public ResultVO queryEmailVerificationInfo();

public ResultVO sendEmailVerificationCode(String email);

}

代码讲解: getEmailVerificationCod方法是将数据（验证码和邮箱地址）放入数据库当中，checkEmailVerificationCode是用来校验其验证码和邮箱是否是正确，·queryEmailVerificationInfo·是用来查询所有的数据，在这里我新加了个接口叫做senEmailVerificationCode就是单纯用来发送短信信息的，只有一个参数，他是没有相对应的数据库操作的。

编写service层的实现方法

@Service

public class EmailVerificationCodeServiceImpl implements EmailVerificationCodeService{

@Autowired

EmailVerificationDao emailVerificationDao;

private final static String EmailFrom = "li3122456997@163.com";

private final JavaMailSenderImpl javaMailSender;

public int code = (int)(Math.random() * 9000 + 1000);

public EmailVerificationCodeServiceImpl(JavaMailSenderImpl javaMailSender) {

this.javaMailSender = javaMailSender;

}

@Override

public boolean getEmailVerificationCode(String email,Integer verificationCode) {

verificationCode =code;

return emailVerificationDao.getEmailVerificationCode(email,verificationCode);

}

@Override

public ResultVO checkEmailVerificationCode(String email, Integer verificationCode) {

List emailVerifications = emailVerificationDao.checkEmailVerificationCode(email, verificationCode);

if (emailVerifications.size()>0){

return new ResultVO(1001,"校验成功",emailVerifications);

}else {

return new ResultVO(1002,"校验失败",null);

}

}

@Override

public ResultVO queryEmailVerificationInfo() {

List emailVerifications = emailVerificationDao.queryEmailVerificationInfo();

return new ResultVO(1001,"success",emailVerifications);

}

@Override

public ResultVO sendEmailVerificationCode(String email) {

SimpleMailMessage simpleMailMessage = new SimpleMailMessage();

simpleMailMessage.setSubject("验证码");

simpleMailMessage.setTo(email);//收件人

simpleMailMessage.setText("验证码为："+code);

simpleMailMessage.setFrom("******@163.com"); //发送的人(写自己的)

javaMailSender.send(simpleMailMessage);

boolean emailVerificationCode = getEmailVerificationCode(email, code);

if (emailVerificationCode){

return new ResultVO(1001,"发送成功！","验证码为:"+code);

}else {

return new ResultVO(1002,"发送失败",null);

}

}

}

代码讲解： 这里就一个注重点，就是sendEmailVerificationCode的实现，我将随机数给提出出来，因为getEmailVerificationCode也是需要将随机数给保存到数据库当中的，为了避免两者的验证码不同，我就给其提取出来，以确保其一致性，在sendEmailVerificationCode的实现，我在里面调用了getEmailVerificationCode方法，这样可以保证其邮箱地址的一致性。在通过判断，验证短信是否发送成功。

实现controller层

@RestController

@CrossOrigin//允许回复前端数据，跨域请求允许

public class EmailController {

@Autowired

EmailVerificationCodeService emailVerificationCodeService;

@Autowired

InfoTimingSendServiceImpl infoTimingSendService;

@GetMapping("send")

public ResultVO sendMail(@RequestParam(value = "email") String email){

return emailVerificationCodeService.sendEmailVerificationCode(email);

}

@GetMapping("checkEmailVerification")

public ResultVO checkEmail(@RequestParam(value = "email") String email, @RequestParam(value = "verificationCode") Integer verificationCode){

ResultVO resultVO = emailVerificationCodeService.checkEmailVerificationCode(email, verificationCode);

return resultVO;

}

@GetMapping("queryAll")

public ResultVO queryAll(){

ResultVO resultVO = emailVerificationCodeService.queryEmailVerificationInfo();

return resultVO;

}

}

注意： 需要加入@CrossOrigin注解，这个注解是可以解决跨域问题，这个项目我写的是前后端分离的，所以这里需要加入这个在注解，为后面通过axios来获取数据做准备

Test代码

@SpringBootTest

class DemoApplicationTests {

@Autowired

EmailVerificationCodeService emailVerificationCodeService;

@Autowired

InfoTimingSendServiceImpl infoTimingSendService;

@Test

void contextLoads() {

ResultVO aBoolean = emailVerificationCodeService.checkEmailVerificationCode("***@qq.com", 8001);

System.out.println(aBoolean);

}

@Test

void infoSendTest(){

infoTimingSendService.infoSend();

}

@Test

void send(){

final ResultVO resultVO = emailVerificationCodeService.sendEmailVerificationCode("***7@qq.com");

System.out.println(resultVO);

}

}

前端页面的实现

注意： 在前端页面我使用了bootstrap框架，vue，axios，所以需要当如相对应的包

注册页面

登录

{{tips}}  

邮箱

验证码

Sign in

{{info}}

{{"wait"+time+"s"}}

{{info}}

讲解：在这里，在发送按钮上面加入了时间倒计时，当我点击的时候，会倒计时1minute,在这期间，发送按钮是无法被点击的！这就避免了多次放松

index.htm

欢迎你：

登录成功！

页面效果：

效果图：

运行截图+sql图

总结

以上就是springboot+vue实现后端和前端短信发送的所有代码，其实像短信发送了两次，以第二次为准的话，我们可以实现一个数据库内容的修改，当其发送了两次，我们就以第二次为准！希望对大家有所帮助，这里前端的验证其实是不够完善的，我没有去加入邮箱的验证。是因为我的QQ邮箱被腾讯被封了，我害怕试多了之后，网易邮箱也被封了！！！！

配张QQ邮箱被封的截图镇楼

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。