郑州做网站排名公司,wordpress怎么加入引导页面,大型外贸商城网站建设,怎么和客户推广说网站建设语0.前情提要
之前的po已经说了单独的邮箱验证码发送功能怎么实现#xff1a; https://blog.csdn.net/qq_61551948/article/details/142641495
这篇说下如何把该功能整合到瑞吉项目里面#xff0c;也就是把原先项目里的短信发送验证码的功能改掉#xff0c;改为邮箱发送验证…0.前情提要
之前的po已经说了单独的邮箱验证码发送功能怎么实现 https://blog.csdn.net/qq_61551948/article/details/142641495
这篇说下如何把该功能整合到瑞吉项目里面也就是把原先项目里的短信发送验证码的功能改掉改为邮箱发送验证码的功能。
当然首先得跟着教程从头到尾做到这块功能时才行并且已经将数据模型User导入了进来添加了UserController、UserService和UserServiceImpl添加了Filter中一部分代码。
基于以上实现本文的操作。 当然不做这个项目参考一下也odkkkk
1.后端代码实现
【和教程中所有代码都放在controller层不一样看着很臃肿我是具体实现细节就放在impl实现类里了】
1.1发送邮箱验证码的整体功能
controller层
/*** 发送邮箱验证码模拟短信验证码* param user* return*/
PostMapping(sendEmail)
public RString sendEmail(RequestBody User user) {return userService.sendEmail(user);
}service层
RString sendEmail(User user);serviceImpl层
Resource
private JavaMailSender javaMailSender;
//读取yml文件中username的值并赋值给from
Value(${spring.mail.username})
private String from;
// 用于存储验证码键为邮箱值为验证码 【也可以用session保存试试】
private MapString, String verificationCodeMap new HashMap();Override
public RString sendEmail(User user) {if(user.getPhone() ! null){// 构建一个邮件对象SimpleMailMessage message new SimpleMailMessage();// 设置邮件发送者message.setFrom(from);// 设置邮件接收者message.setTo(user.getPhone());// 设置邮件的主题message.setSubject(登录验证码);// 设置邮件的正文Random random new Random();StringBuilder code new StringBuilder();for (int i 0; i 6; i) {int r random.nextInt(10);code.append(r);}String text 您的验证码为 code;// 存储验证码log.info(验证码{},text);verificationCodeMap.put(user.getPhone(), code.toString());// 设置邮件的正文message.setText(text);// 发送邮件try {javaMailSender.send(message);return R.success(发送成功);} catch (MailException e) {e.printStackTrace();}return R.error(发送失败);}return R.error(邮箱为空);
}1.2接收并校验验证码整体功能
controller层
/*** 登录功能* param user* return*/
PostMapping(login)
public RString verifyCode(RequestBody Map user, HttpSession session) {return userService.login(user,session);
}service层
RString login(Map user, HttpSession session);serviceImpl层
//判断验证码是否正确判断是否注册过没注册需要在登录时自动注册
Override
public RString login(Map user, HttpSession session) { //Map存的值是Object类型需要toString一下// 获取已存储的验证码String storedCode verificationCodeMap.get(user.get(phone).toString());// 检查验证码是否存在检查用户输入的验证码是否正确if (storedCode ! null storedCode.equals(user.get(code).toString())) {//验证成功//判断该用户是否存在如果不存在的话顺便注册LambdaQueryWrapperUser queryWrapper new LambdaQueryWrapper();queryWrapper.eq(User::getPhone,user.get(phone).toString());User user1 this.getOne(queryWrapper);if(user1 null){ //用户不存在需要注册user1 new User();user1.setPhone(user.get(phone).toString());user1.setStatus(1);this.save(user1);}session.setAttribute(user,user1.getId()); //在session中存入user的id让过滤器放行// 清除验证码以防止重复使用verificationCodeMap.remove(user.get(phone));return R.success(验证成功);} else {return R.error(验证失败验证码不正确);}
}2.部分前端代码修改
打开下图所示的login.html文件
60行左右原先用来判断手机号的正则表达式改为判断qq邮箱的正则表达式
const regex /^[1-9][0-9]{4,10}qq\.com$/;再打开下图所示的文件
修改原文件的发送邮箱验证码的接口url以及登录的接口url改为自己刚才实现的方法的接口url。
3.结果展示
发送验证码
收到验证码 输入错误验证码
输入正确验证码之后进入页面
撒花
