SpringBoot+Vue 实现图片验证码功能需求

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

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。

前言

写过验证码保存到Redis中的需求开发、也写过验证码调用第三方接口直接发送到手机的需求开发。这次弄一个也较为常见的图片验证码。用户点击图片即可获取到验证码、验证码直接回显在页面中。源码较多、这里不方便全部给出。如有需要,可以在本人公众号中输入 验证码实现源码 即可获取到。

效果演示

验证码登录

页面效果演示

这里我写了两套登录页面效果展示。验证码功能是一模一样的,调用的是同一个接口。如果需要登录界面、公众号中输入关键字 验证码登录界面源码 即可获取。

SpringBoot+Vue 实现图片验证码功能需求,前后端分离业务案例,spring boot,vue.js,后端

SpringBoot+Vue 实现图片验证码功能需求,前后端分离业务案例,spring boot,vue.js,后端

项目结构

1.1 后端项目结构

主要功能是后端来实现、前端只负责展示一下。我这里是给之前已经完成的系统、逐步添加新的功能。使用的版本控制、所以看到的文件颜色会有所不同。

SpringBoot+Vue 实现图片验证码功能需求,前后端分离业务案例,spring boot,vue.js,后端

具体实现过程

1.1 基本步骤

  • 1、数据库添加验证码的表
  • 2、添加pom依赖
  • 3、后端生成验证码图片的方法
  • 4、后端校验验证码的方法
  • 5、前端展示验证码图片

1.2 创建表

SpringBoot+Vue 实现图片验证码功能需求,前后端分离业务案例,spring boot,vue.js,后端

1.3 导入Pom依赖

这些依赖是和生成图片验证码有关的、具体使用方法、请自行查阅资料。

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.github.axet</groupId>
            <artifactId>kaptcha</artifactId>
            <version>0.0.9</version>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.9.9</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

1.4 生成验证码的方法

这里给出核心的验证码实现方法

    @Override
    public BufferedImage getCaptcha(String uuid) {
        if(StringUtils.isBlank(uuid)){}
        
        //生成文字验证码
        String code = producer.createText();
        SysCaptchaEntity captchaEntity = new SysCaptchaEntity();
        captchaEntity.setUuid(uuid);
        captchaEntity.setCode(code);
        //5分钟后过期
        captchaEntity.setExpireTime(DateUtils.addDateMinutes(new Date(), 5));
        this.save(captchaEntity);

        return producer.createImage(code);
    }

1.5 验证输入的验证码

核心部分、验证用户输入的验证码,同时会校验输入的验证码是否过期

    @Override
    public boolean validate(String uuid, String code) {
        SysCaptchaEntity captchaEntity = this.getOne(new QueryWrapper<SysCaptchaEntity>().eq("uuid", uuid));
        if(captchaEntity == null){
            return false;
        }

        if(captchaEntity.getCode().equalsIgnoreCase(code) && captchaEntity.getExpireTime().getTime() >= System.currentTimeMillis()){
            //删除验证码
            this.removeById(uuid);
            return true;
        }

        return false;
    }

1.6 前端展示

使用这一部分 <img :src="captchaPath" @click="getCaptcha()" alt="" /> 实现图片的回显。

        <el-form-item prop="captcha">
          <span slot="label">
            <span style="color: white"><strong>验证码</strong></span>
          </span>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input
                v-model="ruleForm.captcha"
                placeholder="验证码"
              >
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="" />
            </el-col>
          </el-row>
        </el-form-item>

后语

给自己的系统慢慢的添加新功能、学无止境、加油!!!

源码包含的所有文件及sql脚本文件目录情况如下:

SpringBoot+Vue 实现图片验证码功能需求,前后端分离业务案例,spring boot,vue.js,后端文章来源地址https://www.toymoban.com/news/detail-628158.html

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

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

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

相关文章

  • 【项目功能模块】SpringBoot+vue实现登录图片验证码

    要在Spring Boot和Vue中实现登录时的图片验证码功能,可以按照以下步骤进行操作: 后端(Spring Boot)实现: 添加相关依赖:在 pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个CaptchaGenerator类,用于生成验证码图片。 创建一个REST API接口:创建一个 CaptchaControlle

    2024年02月11日
    浏览(39)
  • 【项目功能模块拆分】SpringBoot+vue实现登录图片验证码

    要在Spring Boot和Vue中实现登录时的图片验证码功能,可以按照以下步骤进行操作: 后端(Spring Boot)实现: 添加相关依赖:在 pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个CaptchaGenerator类,用于生成验证码图片。 创建一个REST API接口:创建一个 CaptchaControlle

    2024年02月11日
    浏览(34)
  • SpringBoot + Vue前后端分离项目实战 || 五:用户管理功能后续

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月16日
    浏览(59)
  • 前后端分离java开发图形验证码+谷歌开源Kaptcha使用(Springboot+redis实现图形验证码校验)

    注册 - 登录 - 修改密码 一般需要发送验证码,但是容易被攻击恶意调用。 手机短信轰炸机是批量、循环给手机无限发送各种网站的注册验证码短信的方法。 短信一条5分钱,如果被大盗刷大家自己计算邮箱通知不用钱,但被大盗刷,带宽、连接等都被占用,导致无法正常使用

    2024年01月19日
    浏览(54)
  • (前后端分离)SpringBoot+Vue实现视频播放

    跳坑日志 SpringBoot+vue的项目中,实现前端播放视频 SpringBoot 定义GET请求ApI,返回视频流,前端通过 话不多说,走起 这里主要的是得到视频所在的物理地址 到了这一步基本可以通过访问后端url进行视频播放了 测试: http://localhost:8080/file/video 不出意外的话是可以播放的,如果

    2023年04月09日
    浏览(39)
  • Vue加SpringBoot实现项目前后端分离

    首先需要搭建一个Vue的脚手架项目(已经放在gitee里面了,下面是gitee网址,可以直接拉) (vue-web: 这个是Vue项目模板,没有后台数据) 那么接下来就是实现前后端分离的步骤 首先我们需要有一个登录页面 登录的点击事件利用axios提交到后台去,代码放在后面(没有样式也可以

    2024年02月06日
    浏览(55)
  • 基于Springboot+Vue实现前后端分离酒店管理系统

    一、🚀选题背景介绍 📚 推荐理由 : 近几年来,随着各行各业计算机智能化管理的转型,以及人们经济实力的提升,人们对于酒店住宿的需求不断的提升,用户的增多导致酒店管理信息的不断增多,于是酒店管理系统开始受到相关行业的重视,酒店管理系统也显的越发的重

    2024年04月09日
    浏览(46)
  • 基于springboot + vue实现的前后端分离-酒店管理系统

    项目介绍         基于springboot + vue实现的酒店管理系统一共有酒店管理员和用户这两种角色。 管理员功能 登录:管理员可以通过登录功能进入系统,确保只有授权人员可以访问系统。 用户管理:管理员可以添加、编辑和删除酒店的用户,包括前台员工、服务员等。他们

    2024年02月22日
    浏览(40)
  • 前后端分离项目中实现业务中常用图形验证码验证功能(详细)

    图形验证码是验证码的一种,有防止黑客对某一特定注册用户用程序暴力破解私人信息、恶意破解密码、刷票、论坛灌水的作用。 图形验证码是一种区分用户是计算机还是人的公共全自动程序。验证码是现在很多网站通行的方式,由计算机生成并评判,但是只有人类才能解答

    2024年02月04日
    浏览(49)
  • 基于Java+SpringBoot+Vue前后端分离学生信息管理设计实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟  java项目

    2024年02月05日
    浏览(77)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包