springboot+vue之邮箱短信发送 springboot+vue实现前后端短信发送与验证
文章目录
- springboot+vue之邮箱短信发送
- 前言
- 一、前期工作
-
- 一、开启邮箱服务
- 二 、导入依赖
- 三、配置`application.yaml`文件
- 二、实现流程
-
- 1.导入数据库
- 2.后端实现
-
- 编写实体类
- 编写工具类`ResultVo`
- 编写dao层接口
- 配置dao层接口的数据库操作
- 编写service层接口
- 编写service层的实现方法
- 实现controller层
- Test代码
- 前端页面的实现
- 运行截图+sql图
- 总结
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、前期工作 一、开启邮箱服务 开启邮箱的POP3/SMTP服务(这里以qq邮箱为例,网易等都是一样的)
文章图片
文章图片
二 、导入依赖 在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
三、配置
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.DruidDataSource
mybatis: #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())
id="checkEmailVerificationCode" resultType="com.cheng.bean.EmailVerification">
select * from sys.useremaillogintable where email=#{email} and VerificationCode=#{verificationCode}
id="queryEmailVerificationInfo" resultType="com.cheng.bean.EmailVerification" >
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 = "https://www.it610.com/article/email") String email){
return emailVerificationCodeService.sendEmailVerificationCode(email);
}
@GetMapping("checkEmailVerification")
public ResultVO checkEmail(@RequestParam(value = "https://www.it610.com/article/email") String email, @RequestParam(value = "https://www.it610.com/article/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,所以需要当如相对应的包
注册页面
- 锐客网
src="https://www.it610.com/article/js/jquery.min.js">
src="https://www.it610.com/article/js/bootstrap.min.js">
src="https://www.it610.com/article/js/vue.js">
>
src="https://www.it610.com/article/js/axios.min.js">
type="text/javascript">
var baseUrl="http://localhost:8080/";
var vm = new Vue({
el:'#container',
data:{
info: 'send out',
time: 60,
verification_send: true,
verification:"",
email:"",
tips:""
},
methods:{
send:function (){
var url1 = baseUrl+"/send";
axios.get(url1,{params:{email:vm.email}}).then((res)=>{
console.log(res);
if(res.data.code==1001){
vm.tips="发送成功!";
}else{
vm.tips="发送失败!请稍后再试"
}
});
setInterval(function(){
if(vm.time==60){
vm.time--;
this.time=vm.time;
vm.verification_send = false;
console.log(vm.time);
}else if(vm.time==0){
clearInterval(vm.time)
vm.verification_send = true;
}else{
vm.time--;
console.log(vm.time);
}
},1000);
},
sign:function(){
var url = baseUrl+"/checkEmailVerification";
if(vm.email==""&&vm.verification==""){
vm.tips="请输入验证码或邮箱!";
}else{
axios.get(url,{params:{email:vm.email,verificationCode:vm.verification}})
.then((res)=>{
var vo = res.data;
if(vo.code==1001){
vm.tips="登录成功";
setInterval(function(){
window.location.href="https://www.it610.com/article/index.html";
},3000);
}else{
vm.tips="请输入正确的验证码!";
}
})
}
}
}
})
讲解:
在这里,在发送按钮上面加入了时间倒计时,当我点击的时候,会倒计时1minute,在这期间,发送按钮是无法被点击的!这就避免了多次放松index.htm
- 锐客网
欢迎你:
登录成功!
页面效果:
效果图:
文章图片
运行截图+sql图
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
总结 以上就是springboot+vue实现后端和前端短信发送的所有代码,其实像短信发送了两次,以第二次为准的话,我们可以实现一个数据库内容的修改,当其发送了两次,我们就以第二次为准!希望对大家有所帮助,这里前端的验证其实是不够完善的,我没有去加入邮箱的验证。是因为我的QQ邮箱被腾讯被封了,我害怕试多了之后,网易邮箱也被封了!!!!
配张QQ邮箱被封的截图镇楼
文章图片
技术有限!欢迎大家补充。
文章图片
【springboot|springboot+vue之短信发送】
点赞+评论私聊获取源代码,????????
推荐阅读
- Java如何实现HashMap(原理解析和代码实现)
- Java中的通配符解读和用法指南
- 教大家进行 Springboot 中项目的属性配置(详细)
- 为什么Java接口不能有构造函数而抽象类可以有()
- 算法(如何排列给定数字以形成最大数(|S2))
- 如何在Java 8中打印Stream的元素
- 第三节:SpringBoot中web项目推荐目录结构
- 教大家用 Springboot 返回 Json 数据及统一数据封装
- 如何使对象有资格使用Java进行垃圾回收()