springboot與vue詳解實(shí)現(xiàn)短信發(fā)送流程

更新時(shí)間：2022年06月06日 11:41:28 作者：仲夏月二十八

隨著人工智能的不斷發(fā)展，機(jī)器學(xué)習(xí)這門技術(shù)也越來越重要，很多人都開啟了學(xué)習(xí)機(jī)器學(xué)習(xí)，本文就介紹了機(jī)器學(xué)習(xí)的基礎(chǔ)內(nèi)容

一、前期工作

1.開啟郵箱服務(wù)

開啟郵箱的POP3/SMTP服務(wù)（這里以qq郵箱為例，網(wǎng)易等都是一樣的）

2.導(dǎo)入依賴

在springboot項(xiàng)目中導(dǎo)入以下依賴：

<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
            <version>5.3.18</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.17</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

3.配置application.yaml文件

# 郵箱設(shè)置
spring:
mail:
host: smtp.163.com //如果是qq的郵箱就是smtp.qq.com
password: 開啟pop3生成的一個(gè)字符串密碼
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數(shù)據(jù)庫設(shè)置
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

二、實(shí)現(xiàn)流程

1.導(dǎo)入數(shù)據(jù)庫

/*
 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.后端實(shí)現(xiàn)

編寫實(shí)體類

代碼如下（示例）：

@Data
@NoArgsConstructor
@ToString
public class EmailVerification {
    private int id;
    private String email; //需要發(fā)送的郵箱
    private Integer verificationCode;//驗(yàn)證碼
    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;//相應(yīng)給前端的狀態(tài)碼
    private String msg;//相應(yīng)給前端的提示信息
    private Object data;//響應(yīng)給前端的數(shù)據(jù)
}

編寫dao層接口

Mapper
@Repository
public interface EmailVerificationDao {
    /*將短信驗(yàn)證碼和個(gè)人郵箱保存到數(shù)據(jù)庫中*/
    public Boolean getEmailVerificationCode(String email,Integer verificationCode);
    /*校驗(yàn)短信信息*/
    public List<EmailVerification> checkEmailVerificationCode(String email,Integer verificationCode);
    /*查詢所有的用戶*/
    public List<EmailVerification> queryEmailVerificationInfo();
}

配置dao層接口的數(shù)據(jù)庫操作

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.cheng.dao.EmailVerificationDao">
    <insert id="getEmailVerificationCode">
        insert into sys.useremaillogintable(email, VerificationCode,createTime) VALUES (#{email},#{verificationCode},NOW())
    </insert>
    <select id="checkEmailVerificationCode" resultType="com.cheng.bean.EmailVerification">
        select * from sys.useremaillogintable where email=#{email} and VerificationCode=#{verificationCode}
    </select>
    <select id="queryEmailVerificationInfo" resultType="com.cheng.bean.EmailVerification" >
        select * from sys.useremaillogintable;
    </select>
</mapper>

編寫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方法是將數(shù)據(jù)（驗(yàn)證碼和郵箱地址）放入數(shù)據(jù)庫當(dāng)中，checkEmailVerificationCode是用來校驗(yàn)其驗(yàn)證碼和郵箱是否是正確，·queryEmailVerificationInfo·是用來查詢所有的數(shù)據(jù)，在這里我新加了個(gè)接口叫做senEmailVerificationCode就是單純用來發(fā)送短信信息的，只有一個(gè)參數(shù)，他是沒有相對(duì)應(yīng)的數(shù)據(jù)庫操作的。

編寫service層的實(shí)現(xiàn)方法

@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<EmailVerification> emailVerifications = emailVerificationDao.checkEmailVerificationCode(email, verificationCode);
        if (emailVerifications.size()>0){
            return new ResultVO(1001,"校驗(yàn)成功",emailVerifications);
        }else {
            return new ResultVO(1002,"校驗(yàn)失敗",null);
        }
    }
    @Override
    public ResultVO queryEmailVerificationInfo() {
        List<EmailVerification> emailVerifications = emailVerificationDao.queryEmailVerificationInfo();
        return new ResultVO(1001,"success",emailVerifications);
    }
    @Override
    public ResultVO sendEmailVerificationCode(String email) {
        SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
        simpleMailMessage.setSubject("驗(yàn)證碼");
        simpleMailMessage.setTo(email);//收件人
        simpleMailMessage.setText("驗(yàn)證碼為："+code);
        simpleMailMessage.setFrom("******@163.com"); //發(fā)送的人(寫自己的)
        javaMailSender.send(simpleMailMessage);
        boolean emailVerificationCode = getEmailVerificationCode(email, code);
        if (emailVerificationCode){
            return new ResultVO(1001,"發(fā)送成功！","驗(yàn)證碼為:"+code);
        }else {
            return new ResultVO(1002,"發(fā)送失敗",null);
        }
    }
}

代碼講解：這里就一個(gè)注重點(diǎn)，就是sendEmailVerificationCode的實(shí)現(xiàn)，我將隨機(jī)數(shù)給提出出來，因?yàn)?code>getEmailVerificationCode也是需要將隨機(jī)數(shù)給保存到數(shù)據(jù)庫當(dāng)中的，為了避免兩者的驗(yàn)證碼不同，我就給其提取出來，以確保其一致性，在sendEmailVerificationCode的實(shí)現(xiàn)，我在里面調(diào)用了getEmailVerificationCode方法，這樣可以保證其郵箱地址的一致性。在通過判斷，驗(yàn)證短信是否發(fā)送成功。

實(shí)現(xiàn)controller層

@RestController
@CrossOrigin//允許回復(fù)前端數(shù)據(jù)，跨域請(qǐng)求允許
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注解，這個(gè)注解是可以解決跨域問題，這個(gè)項(xiàng)目我寫的是前后端分離的，所以這里需要加入這個(gè)在注解，為后面通過axios來獲取數(shù)據(jù)做準(zhǔn)備

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);
    }
}

前端頁面的實(shí)現(xiàn)

注意：在前端頁面我使用了bootstrap框架，vue，axios，所以需要當(dāng)如相對(duì)應(yīng)的包

注冊(cè)頁面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow"  />	
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<style>
		</style>
		</head>
	<body style="background: linear-gradient(to right,#7b4397,#dc2430);">
		<div id="container">
		<div class="container-fluid" style="color: white;">
		  <form class="form-horizontal" role="form" style="padding-left: 500px;  margin-top: 200px;">
				<fieldset>
		    <div class="form-group">
						<p style="font-size: 30px;margin-left: 250px; margin-right: 240px;color:white">登錄</p>
						<hr style="width: 400px;margin-left: 90px; background-color: red;" />
						<p style="font-size: 15px;margin-left: 190px; margin-right: 240px;color:red" id="tips">{{tips}} &nbsp;</p>
		      <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
		      <div class="col-sm-3">
		        <input type="email" v-model="email" class="form-control" id="inputEmail3" placeholder="Email">
		      </div>
		    </div>
		    <div class="form-group">
		      <label for="inputPassword3" class="col-sm-2 control-label">驗(yàn)證碼</label>
		      <div class="col-sm-3">
		        <input v-if="verification_send" type="text" v-model="verification" class="form-control" id="inputPassword3" placeholder="VerificationCode">
						<input v-else type="text"  class="form-control" v-model="verification" id="inputPassword3" placeholder="5分鐘內(nèi)有效,60s后可重新發(fā)送" />
		      </div>
		    </div>
		    <div class="form-group">
		      <div class="col-sm-offset-2 col-sm-3">
		        <a type="submit" class="btn btn-default" @click="sign">Sign in</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a v-if="time==60" class="btn btn-default" @click="send" class="btn btn-default">{{info}}</a>
						<a v-if="time<60&&time>=0"  class="btn btn-default" @click="send" class="btn btn-default" style="pointer-events: none;">{{"wait"+time+"s"}}</a>
						<a v-if="time<0" class="btn btn-default" @click="send" class="btn btn-default">{{info}}</a>
		      </div>
		    </div>
		  </form>
		</div>
		</div>
		<script src="js/axios.min.js"></script>
		<script 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="發(fā)送成功！";
							}else{
								vm.tips="發(fā)送失敗！請(qǐng)稍后再試"
							}
						});
						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="請(qǐng)輸入驗(yàn)證碼或郵箱！";
						}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="index.html" rel="external nofollow" ;
									},3000);
								}else{
									vm.tips="請(qǐng)輸入正確的驗(yàn)證碼！";
								}
							})
						}
					}
					}
			})
		</script>
	</body>
</html>

講解：在這里，在發(fā)送按鈕上面加入了時(shí)間倒計(jì)時(shí)，當(dāng)我點(diǎn)擊的時(shí)候，會(huì)倒計(jì)時(shí)1minute,在這期間，發(fā)送按鈕是無法被點(diǎn)擊的！這就避免了多次放松

index.htm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center style="margin-top: 50px;">
			<p>歡迎你：</p>
			<p>登錄成功！</p>
		</center>
	</body>
</html>

頁面效果：

效果圖：

運(yùn)行截圖+sql圖

總結(jié)

以上就是springboot+vue實(shí)現(xiàn)后端和前端短信發(fā)送的所有代碼，其實(shí)像短信發(fā)送了兩次，以第二次為準(zhǔn)的話，我們可以實(shí)現(xiàn)一個(gè)數(shù)據(jù)庫內(nèi)容的修改，當(dāng)其發(fā)送了兩次，我們就以第二次為準(zhǔn)！希望對(duì)大家有所幫助，這里前端的驗(yàn)證其實(shí)是不夠完善的，我沒有去加入郵箱的驗(yàn)證。是因?yàn)槲业腝Q郵箱被騰訊被封了，我害怕試多了之后，網(wǎng)易郵箱也被封了?。。?！????

配張QQ郵箱被封的截圖鎮(zhèn)樓

到此這篇關(guān)于springboot與vue詳解實(shí)現(xiàn)短信發(fā)送流程的文章就介紹到這了,更多相關(guān)springboot短信發(fā)送內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

springboot與vue詳解實(shí)現(xiàn)短信發(fā)送流程

目錄

一、前期工作

1.開啟郵箱服務(wù)

2.導(dǎo)入依賴

3.配置application.yaml文件

二、實(shí)現(xiàn)流程

1.導(dǎo)入數(shù)據(jù)庫

2.后端實(shí)現(xiàn)

編寫實(shí)體類

編寫工具類ResultVo

編寫dao層接口

配置dao層接口的數(shù)據(jù)庫操作

編寫service層接口

編寫service層的實(shí)現(xiàn)方法

實(shí)現(xiàn)controller層

Test代碼

前端頁面的實(shí)現(xiàn)

運(yùn)行截圖+sql圖

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

springboot與vue詳解實(shí)現(xiàn)短信發(fā)送流程

目錄

一、前期工作

1.開啟郵箱服務(wù)

2.導(dǎo)入依賴

3.配置application.yaml文件

二、實(shí)現(xiàn)流程

1.導(dǎo)入數(shù)據(jù)庫

2.后端實(shí)現(xiàn)

編寫實(shí)體類

編寫工具類ResultVo

編寫dao層接口

配置dao層接口的數(shù)據(jù)庫操作

編寫service層接口

編寫service層的實(shí)現(xiàn)方法

實(shí)現(xiàn)controller層

Test代碼

前端頁面的實(shí)現(xiàn)

運(yùn)行截圖+sql圖

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、前期工作