中国建设银行官网站纪念币,wordpress互联网访问,互联网的营销推广方式,wordpress数据库里的主题痕迹目录
概述
前端搭建 后端搭建
生成验证码-存入redis#xff08;主要过程代码#xff09;
发送邮件#xff08;主要过程代码#xff09;
登录验证-取出redis中数据进行验证#xff08;主要代码#xff09;
完整代码一-LoginController
完整代码二-LoginService
完…目录
概述
前端搭建 后端搭建
生成验证码-存入redis主要过程代码
发送邮件主要过程代码
登录验证-取出redis中数据进行验证主要代码
完整代码一-LoginController
完整代码二-LoginService
完整代码三-LoginInfo
功能测试 概述 *使用邮箱进行登录验证功能实现。 主要功能点 1.在SpringBoot环境中发送邮件。 2.使用redis进行验证码的缓存及取出验证登录。 整体过程说明 前端搭建简易邮箱登录框当验证通过后自动跳转到网页index.html。 后端提供两个接口一个接口用于处理向指定邮箱发送验证码并将验证码存入redis中另一个接口用于处理登录验证验证发来的邮箱地址和验证码是否匹配。 技术选型 前端前端三剑客axios 后端SpringBoot redisjavaMail 前端搭建 项目结构 页面展示 说明 当我们输入邮箱地址后点击发送验证码会判断输入是否为空以及输入的邮箱是否符合规范如果输入不为空并且输入的邮箱符合规范那么按钮将禁用并且提示再次发送的倒计时。
例如 前端完整代码实例 --- js
// 获取发送验证码按钮节点
let sendCodeBtn document.querySelector(#sendCodeBtn);
// 获取邮箱地址输入框节点
let emailInput document.querySelector(#userEmail);
// 获取验证码输入框节点
let verificationCode document.querySelector(#CheckCode);
// 获取登录按钮节点
let loginBtn document.querySelector(#loginBtn);// 点击发送验证码逻辑代码
sendCodeBtn.addEventListener(click,function(){// 判断用户输入的邮箱地址是否符合规范let flag CheckInputEmail(emailInput.value);// 以及判断输入是否为空if(emailInput.value flag){// 调用方法发送请求向目标邮箱发送验证码getCode(emailInput.value);alert(验证码发送成功!)// 禁用发送按钮sendCodeBtn.disabled true;// 设置倒计时时间到后才可以再次发起验证码请求let time 60;sendCodeBtn.innerHTML time s后再次发送!time--;let myInterVal setInterval((){if(time ! 0){sendCodeBtn.innerHTML time s后再次发送!time--;}else{sendCodeBtn.disabled false;sendCodeBtn.innerHTML 发送clearInterval(myInterVal)}},1000)}else{alert(邮箱格式错误或为空!);}
})// 点击登录按钮逻辑代码
loginBtn.addEventListener(click, function (){// 输入邮箱地址和验证码作为参数进行验证checkCode(emailInput.value,verificationCode.value);
})// 验证邮箱输入格式是否正确
function CheckInputEmail(email){if (!email) {return false;}// 定义邮箱格式的正则表达式const emailRegex /^[A-Za-z0-9_.-][A-Za-z0-9.-]\.[A-Za-z]{2,}$/;// 检查邮箱是否符合格式要求return emailRegex.test(email);
}// 发送请求:获取验证码
function getCode(emailAddress){axios.get(http://localhost:8080/logins?emailAddressemailAddress)
}// 发送请求:检查验证码是否正确
function checkCode(emailAddress, code){axios.post(http://localhost:8080/logins,{emailAddress:emailAddress,code:code}).then(response { // 成功的回调console.log(返回结果 response.data)response.data? window.location ../html/index.html : alert(验证不通过);})
} 前端完整代码实例 --- html
!DOCTYPE html
html
headmeta charsetutf-8title/titlelink relstylesheet href../css/login.csslink href../favicon.ico relshortcut iconscript src../js/axios.min.js/script
/head
body
div idcontainerdiv idmy_headerspan idheader_title邮箱登录/span/divdiv idmy_bodydiv idbody_inputBlocklabel foruserEmail邮箱/labelinput iduserEmail typetext placeholder请输入邮箱button idsendCodeBtn typebutton发送验证码/buttonbrbrlabel forCheckCode验证码/labelinput idCheckCode typepassword placeholder请输入验证码brbutton idloginBtn登录/button/div/div
/div
script src../js/login.js/script
/body
/html 前端完整代码实例 --- css
#container{border: solid #589bff 2px;width: 500px;height: 250px;margin: 50px auto;border-radius: 5px;background-color: #7acc67;
}#my_header{background-color: #bcffc1;height: 50px;line-height: 50px;text-align: center;font-weight: 800;font-size: 20px;
}#my_body{margin-top: 15px;margin-left: 35px;
}#loginBtn{font-weight: 800;font-size: 18px;margin-top: 20px;margin-left: 153px;width: 101px;
}label{width: 104px;display: inline-block;text-align: right;
}
input{border-radius: 5px;height: 27px;width: 212px;background-color: antiquewhite;
}
label{font-size: 18px;
}button{font-size: 15px;border-radius: 5px;background-color: antiquewhite;height: 36px;
}button:hover{cursor: pointer;
}#sendCodeBtn{position: relative;top: 1px;font-weight: 600;
} 后端搭建 目录结构 生成验证码-存入redis主要过程代码
1.我们获取时间戳的后四位来模拟随机验证码。
// 截取当前时间戳的后四位模拟验证码
long timestamp System.currentTimeMillis();
String verificationCode Long.toString(timestamp).substring(Long.toString(timestamp).length() - 4);
2.有了随机的验证码我们导入redis起步坐标并简单配置连接信息。
!--pom.xml导入redis起步坐标--
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactId
/dependency
!--application.yml中编写--
redis:host: localhost !--redis地址--port: 6379 !--redis开放端口号--3.使用-loginController中编写
/*** 注入redisTemplate用于缓存数据*/
Autowired
private RedisTemplateString, String redisTemplate;
// 将传入邮箱地址为key验证码为value存入redis中并设置超时时间为5分钟
// 参数说明set(keyvalue, 超时时间时间单位)
// 至于传入的详细参数下方会有完整代码提供解释
redisTemplate.opsForValue().set(emailAddress,verificationCode,5, TimeUnit.MINUTES);
发送邮件主要过程代码
1.获取授权码 说明 我们想要在编程环境发送邮件首先需要到我们自己所使用的邮箱中开启POP3/SMTP服务后获取授权密码。 在此我使用的是网易的163邮箱开启服务并获取授权密码步骤 开启任意一个根据步骤发送个短信后就出现授权码了。 2.编写邮件发送信息需要授权码
在application.yml中编写 3.编写发送邮件方法-在loginService中编写邮件发送逻辑
// 自动注入JavaMailSender用于发送邮件动作
Autowired
private JavaMailSender javaMailSender; /*** 发送邮件* param from 发送方* param to 接收方* param subject 主题* param contents 内容* return 返回执行结果状态*/
public void sendEmail(String from, String to, String subject, String contents){// 创建一个简单消息对象用于发送简单消息不带附件或连接等SimpleMailMessage simpleMailMessage new SimpleMailMessage();// 封装邮件信息simpleMailMessage.setFrom(from); // 设置发送方simpleMailMessage.setTo(to); // 设置接收方simpleMailMessage.setSubject(subject); // 设置主题simpleMailMessage.setText(contents); // 设置发送内容// 发送动作javaMailSender.send(simpleMailMessage);
}
4.调用方法-loginController中编写
/*** 注入loginService用于调用其中自定义的邮件发送方法*/
Autowired
private LoginService loginService;
// 编写邮件内容模板
String emailInfo 验证码为 verificationCode 5分钟内有效。;// 发送验证码到目标邮箱
loginService.sendEmail(maohe101163.com, emailAddress, 登录验证码, emailInfo);
登录验证-取出redis中数据进行验证主要代码
loginController中编写
// 取出传入数据对比redis中数据判断是否通过登录验证
// 判断传入的邮箱地址是否存在redis中
if(redisTemplate.hasKey(loginInfo.getEmailAddress())){// 取出对应邮箱地址为key的value值String storyCode redisTemplate.opsForValue().get(loginInfo.getEmailAddress());// 判断存在redis中的验证码和传入验证码是否相同相同返回truereturn loginInfo.getCode().equals(storyCode)? true:false;
}
return false;
完整代码一-LoginController
package com.mh.controller;import com.mh.pojo.LoginInfo;
import com.mh.service.LoginService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.connection.DataType;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;import java.util.Date;
import java.util.concurrent.TimeUnit;/*** Date:2023/2/28* author:zmh* description: 登录页面相关接口**/
Slf4j // 用于输出日志
RestController
RequestMapping(/logins)
public class LoginController {/*** 注入redisTemplate用于缓存数据*/Autowiredprivate RedisTemplateString, String redisTemplate;/*** 注入loginService用于调用其中自定义的邮件发送方法*/Autowiredprivate LoginService loginService;/*** 发送邮件* param emailAddress 目标邮件地址作为redis存储的key*/GetMappingpublic void sendEmail(String emailAddress){log.info(请求参数邮箱地址为{},emailAddress);// 1.生成4位随机验证码// 截取当前时间戳的后四位模拟验证码long timestamp System.currentTimeMillis();String verificationCode Long.toString(timestamp).substring(Long.toString(timestamp).length() - 4);log.info(验证码为:{},verificationCode);// 2.存入redis// 将传入邮箱地址为key验证码为value存入redis中并设置超时时间为5分钟redisTemplate.opsForValue().set(emailAddress,verificationCode,1, TimeUnit.MINUTES);// 3.编写邮件内容模板String emailInfo 验证码为 verificationCode 5分钟内有效。;// 4.发送验证码到目标邮箱loginService.sendEmail(maohe101163.com, emailAddress, 登录验证码, emailInfo);}/*** 登录验证* param loginInfo 接收前端传入的邮箱地址和code* return 返回执行结果*/PostMappingpublic String CheckEmailCode(RequestBody LoginInfo loginInfo){log.info(POST请求接收到的参数:{}***{},loginInfo.getEmailAddress(), loginInfo.getCode());// 取出传入数据对比redis中数据判断是否通过登录验证// 判断传入的邮箱地址是否存在redis中if(redisTemplate.hasKey(loginInfo.getEmailAddress())){// 取出对应邮箱地址为key的value值String storyCode redisTemplate.opsForValue().get(loginInfo.getEmailAddress());// 判断存在redis中的验证码和传入验证码是否相同相同返回truereturn loginInfo.getCode().equals(storyCode)? true:false;}return false;}}完整代码二-LoginService
package com.mh.service;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;/*** Date:2023/2/28* author:zmh* description: 登录模块相关业务**/Service
public class LoginService {Autowiredprivate JavaMailSender javaMailSender;/*** 发送邮件* param from 发送方* param to 接收方* param subject 主题* param contents 内容* return 返回执行结果状态*/public void sendEmail(String from, String to, String subject, String contents){// 创建一个简单消息对象用于发送简单消息不带附件或连接等SimpleMailMessage simpleMailMessage new SimpleMailMessage();// 封装邮件信息simpleMailMessage.setFrom(from);simpleMailMessage.setTo(to);simpleMailMessage.setSubject(subject);simpleMailMessage.setText(contents);// 发送动作javaMailSender.send(simpleMailMessage);}}完整代码三-LoginInfo
package com.mh.pojo;import lombok.Data;/*** Date:2023/2/28* author:zmh* description: 登录信息-用于接收前端传入的body数据**/Data
public class LoginInfo {String emailAddress;String code;}功能测试
说明在测试之前我们可以关闭一下浏览器缓存方便我们测试。F12打开控制台 输入邮箱获取验证码 邮箱接收到验证码 输入错误验证码进行对比验证 输入正确验证码进行对比验证 验证成功自动跳转到index.heml网页功能测试完成。
