七叶笔记 » java编程 » springboot与vue详解实现短信发送流程

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

一、前期工作

1.开启邮箱服务

开启邮箱的POP3/SMTP服务(这里以qq邮箱为例,网易等都是一样的)

2.导入依赖

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

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.net.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.导入数据库

2.后端实现

编写实体类

代码如下(示例):

编写工具类ResultVo

编写dao层接口

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

编写service层接口

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

编写service层的实现方法

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

实现controller层

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

Test代码

前端页面的实现

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

注册页面

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

index.htm

页面效果:

效果图:

运行截图+sql图

总结

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

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

到此这篇关于springboot与vue详解实现短信发送流程的文章就介绍到这了,更多相关springboot短信发送内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记!

相关文章