SpringBoot+Vue3实现登录验证码功能

这篇具有很好参考价值的文章主要介绍了SpringBoot+Vue3实现登录验证码功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录

Redis缓存穿透、击穿、雪崩问题及解决方法
Spring Cache的使用–快速上手篇
分页查询–Java项目实战篇
全局异常处理–Java实战项目篇

Java实现发送邮件(定时自动发送邮件)_java邮件通知_心态还需努力呀的博客-CSDN博客

该系列文章持续更新,更多的文章请点击我的主页查看哦!


目录

系列文章目录

前言

一、导入生成验证码工具类

二、编写Controller生成验证码的接口

三、前端代码编写

3.1 img标签

3.2 vue代码

 四、效果图

五、补充后端验证

总结


前言

登录页面都会有输入用户名、密码和验证码而判断用户是否登录成功做出响应的操作。输入用户名和密码提交表单做登录验证这个相信看到这篇文章的小伙伴们都是小问题(熟练地不能在熟练了)。但这个验证码用户点击刷新验证码,用户填写后才能正常登录。随机生成图片验证码就会有些疑惑,不知道该怎么做。

这篇文章我们就来重点看如何生成验证码,前端如何展示,如何点击验证码后会换张图片(就是常见到的“看不清?换一张图”)这一功能。

做出下图的验证码:

SpringBoot+Vue3实现登录验证码功能


 

一、导入生成验证码工具类

下面就是生成验证码图片的工具类,里面的参数都有注释,大家可以按照自己喜欢的样式调节验证码的参数(随机生成的数量、背景颜色、干扰线等)。

package com.medical.study.utils;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

public class VerifyCode {
    //宽和高
    private int w = 85;
    private int h = 40;

    private Random r = new Random();
    // 定义有那些字体
    private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
    // 定义有那些验证码的随机字符
    private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
    // 生成背景色
    private Color bgColor = new Color(0, 255, 255);
    // 用于gettext 方法 获得生成的验证码文本
    private String text;

    // 生成随机颜色
    private Color randomColor() {
        int red = r.nextInt(255);
        int green = r.nextInt(255);
        int blue = r.nextInt(255);
        return new Color(red, green, blue);
    }

    // 生成随机字体
    private Font randomFont() {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];
        int style = r.nextInt(4);
        int size = r.nextInt(5) + 24;

        return new Font(fontName, style, size);
    }

    // 画干扰线
    private void drawLine(BufferedImage image) {
        int num = 3;
        Graphics2D g2 = (Graphics2D) image.getGraphics();

        for (int i = 0; i < num; i++) {
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));// 不知道
            g2.setColor(Color.white);
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    // 得到codes的长度内的随机数 并使用charAt 取得随机数位置上的codes中的字符
    private char randomChar() {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    // 创建一张验证码的图片
    public BufferedImage createImage() {
        BufferedImage image = new BufferedImage(w, h,
                BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        StringBuilder sb = new StringBuilder();
        // 向图中画四个字符
        for (int i = 0; i < 4; i++) {
            String s = randomChar() + "";
            sb.append(s);
            float x = i * 1.0F * w / 4;
            g2.setFont(randomFont());
            g2.setColor(randomColor());
            g2.drawString(s, x, h - 5);

        }
        this.text = sb.toString();
        drawLine(image);


        // 返回图片
        return image;

    }

    // 得到验证码的文本 后面是用来和用户输入的验证码 检测用
    public String getText() {
        return text;
    }

    // 定义输出的对象和输出的方向
    public static void output(BufferedImage bi, OutputStream fos)
            throws FileNotFoundException, IOException {
        ImageIO.write(bi, "JPEG", fos);
    }

}

二、编写Controller生成验证码的接口

1.这里我的接口是:localhost:8081/code/verify。

2.将生成的验证码保存,这里我保存到了redis中,你也可以保存到其他的地方(session),在登录验证时能取到这里保存的值即可。

3.@CrossOrigin是跨域请求,因为我前端是8080端口,后端是8081端口。

代码如下:

package com.medical.study.controller;

import com.medical.study.utils.VerifyCode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

/**
 * 随机4位数的验证码
 */

@RestController
@CrossOrigin
@RequestMapping("/code")
public class VerifyController {

    @Autowired
    private RedisTemplate redisTemplate;

    @RequestMapping("/verify")
    public void Verify(HttpServletRequest request, HttpServletResponse response) throws IOException {
                VerifyCode code = new VerifyCode();
        BufferedImage image = code.createImage();

        //验证码
        System.err.println(code.getText());

        //保存验证码到Redis,一分钟有效期
        redisTemplate.opsForValue().set("verify:"+code.getText(),code.getText(),1L, TimeUnit.MINUTES);

        //验证码图片格式
        ImageIO.write(image,"jpg",response.getOutputStream());


    }


}

三、前端代码编写

3.1 img标签

1.绑定事件,点击后更换验证码图片

2.v-model绑定src属性

<img :src="verifySrc" alt="图片无法加载" @click="changeVerify()" >

3.2 vue代码

1.常量verifySrc就和上面src的属性绑定。值是后端的接口。

2.方法是上面img标签绑定的事件,点击后需要重新发送请求。

这里为什么要加new Date().getTime()表示当前时间毫秒值呢?

      答:首先浏览器中存在缓存,请求时缓存是先看请求地址是不是一样,地址一样就取出缓存内容。所以不加的话就会直接取缓存的值,所以图片点击就会没有任何反映。

      加new Date().getTime(),每次请求地址就不一样。保证了不从缓存里面取。就会去重新调用接口返回不一样的验证码图片。

//验证码
	const verifySrc=ref("http://localhost:8081/code/verify");
	function changeVerify(){
		verifySrc.value="http://localhost:8081/code/verify?"+new Date().getTime()
		
	}

 四、效果图

点击图片也是可以更换验证码图片的。这里就不给大家演示了,感兴趣可以自己编写尝试尝试。

如下图所示:

SpringBoot+Vue3实现登录验证码功能

五、补充后端验证

 1.在提交表单时发送post将数据和用户输入的验证码传给后端。

2.controller层login接口编写逻辑代码

首先判断存储的验证码和用户输入的是否一致。

2.1 如果不一致直接返回错误信息。如“验证码输入错误”。

2.2 如果一致的话执行登录的逻辑,查询数据库查看用户名、密码。

     这个就和以前的写法一样了。这里就不给大家展示代码了。相信大家能够独立完成。


 

总结

登录页面的验证码编写从后端生成验证码图片到前端将图片展示到页面的流程和代码都编写完了。如果大家有什么疑问可以在评论区或者私聊我。大家一起交流学习。文章来源地址https://www.toymoban.com/news/detail-430004.html

到了这里,关于SpringBoot+Vue3实现登录验证码功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

    系列内容 参考链接 基于 Vue3.x + Vant UI 的多功能记账本(一) 项目演示,涉及知识点 基于 Vue3.x + Vant UI 的多功能记账本(二) 搭建开发环境 基于 Vue3.x + Vant UI 的多功能记账本(三) 开发导航栏及公共部分 项目演示 Vue3 + Vant UI_多功能记账本 1、登录注册页面 页面设计,页面

    2024年02月03日
    浏览(76)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(73)
  • SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

    !注意:前端的Vue项目中要引入element-ui和axios # npm安装element-ui、axios npm insatll element-ui -S npm install axios -S # 在main中引入

    2024年02月10日
    浏览(44)
  • Vue3 +TypeScript 引入 BabylonJs(Vue3实现3D)【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识。通过本文的学习,相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。 1、创建Vue3 + TypeScript项目 将生成的js文件都修改为

    2024年02月04日
    浏览(43)
  • Spring Security 6.0系列【15】认证篇之实现短信验证码登录功能

    有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.0.4 本系列Spring Security 版本 6.0.2 源码地址:https://gitee.com/pearl-organization/study-spring-security-demo 目前大部分网站都支持使用 手机号+短信验证码 登录,比

    2023年04月24日
    浏览(78)
  • 手把手教你制作登录、注册界面 SpringBoot+Vue.js(cookie的灵活运用,验证码功能)

    实现思路:用户在界面输入用户名和密码传入变量。用post方法传输到后端,后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询,返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码,如果二者

    2024年02月03日
    浏览(57)
  • Spring Security 6.x 系列【15】认证篇之实现短信验证码登录功能

    有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.0.4 本系列Spring Security 版本 6.0.2 源码地址:https://gitee.com/pearl-organization/study-spring-security-demo 目前大部分网站都支持使用 手机号+短信验证码 登录,比

    2024年02月05日
    浏览(70)
  • Vue3集成ThreeJS实现3D效果,threejs+Vite+Vue3+TypeScript 实战课程【一篇文章精通系列】

    这是一个使用Vue3,TypeScript,Vite和Three.js的项目。Vue3是一个流行的JavaScript框架,用于构建用户界面。TypeScript是一种静态类型的编程语言,它是JavaScript的超集,可以编译成纯JavaScript。Vite是一个由Evan You开发的新的前端构建工具,能够提供快速的冷启动和即时热更新。 Three.j

    2024年02月03日
    浏览(54)
  • SpringBoot+Vue 实现图片验证码功能需求

    文章底部有个人公众号: 热爱技术的小郑 。主要分享开发知识、有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 写过验证码保存到Redis中的需求开发、也写过验证码调用第三方接口直接发送到手机的需求开

    2024年02月14日
    浏览(36)
  • SpringBoot+Vue实现一个系统登录功能

    1. 创建一个Spring Boot项目,添加Web和Security依赖。 2. 创建一个User实体类,用于存储用户信息。 3. 创建一个UserDetailsService接口的实现类,用于加载用户信息。 4. 创建一个WebSecurityConfig类,继承WebSecurityConfigurerAdapter,并重写configure方法,配置SpringSecurity。 5. 在Vue项目中创建一个

    2024年01月15日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包