Java笔记-EasyCaptcha在前后端分离项目的使用

官方地址：

https://github.com/whvcse/EasyCaptcha

在此膜拜下。

官方上已经有了非常详细的说明，下面我做个笔记，方便以后进行查阅，毕竟少花几分钟上手，可以多看几分钟的新东西。

添加Maven

<dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.2</version>
</dependency>

获取验证码的后端代码：

@GetMapping("/TestCaptcha")
public Object getTestCaptcha(){SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);String verCode = specCaptcha.text().toLowerCase();String key = UUID.randomUUID().toString();redisTemplate.opsForValue().set(key, verCode, 60 * 1, TimeUnit.SECONDS);Map<String, String> ret = new HashMap<>();ret.put("key", key);ret.put("image", specCaptcha.toBase64());return ResultVo.success("success", ret);
}

逻辑：

①SpecCaptcha类生成验证码；

②将生产的key和verCode使用redisTemplate放到redis中；

前端代码：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body><img id="verImg" width="130px" height="48px"/><script>var verKey;// 获取验证码$.get('http://127.0.0.1:19000/TestCaptcha', function(res) {verKey = res.key;$('#verImg').attr('src', res.data.image);},'json');console.log(verKey)
</script></body>
</html>

对应的请求：

将这个值设置给html的image就可以正常显示了。

这个key，就是redis里面的key。登录的时候要把这个带上。

登录验证相关的代码：

@PostMapping("/login")
public Object login(@RequestBody String request){Map<String, Object> userMap =  JSONObject.parseObject(request);if(!userMap.containsKey("verKey") || !userMap.containsKey("verCode")){return ResultVo.error("格式有误");}//先查验证码String rightValue = redisTemplate.opsForValue().get(userMap.get("verKey")).toString();if(rightValue == null || !rightValue.equals(userMap.get("verCode").toString().toLowerCase())){return ResultVo.error("验证码无效");}............
}

Java笔记-EasyCaptcha在前后端分离项目的使用相关推荐

Shiro学习笔记-----小组开发前后端分离项目---登陆认证盐值加密
当下我正在参与的学校前后端分离的实习项目,有了登录系统的需求,于是我在了解到Shiro是当下主流的安全框架后,毅然决然开启了学习Shiro的旅程首先来谈谈什么是Shiro,Apache Shiro ...
(一)专题介绍：移动端安卓手机改造成linux服务器linux服务器中安装软件、部署前后端分离项目实战
快捷目录前言一.涉及到的相关技术简介二.具体实现过程及踩坑杂谈 1.安卓手机改造成linux系统实现方案 2.改造后的手机Linux中软件的安装 3.手机Linux中安装MySQL5.7踩坑实录 ...
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...
java 同域名下怎么访问同事的项目_喜大普奔，两个开源的前后端分离项目可以在线体验了...
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和V 部落上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了,以帮助 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...
视频教程-SpringBoot实战教程：SpringBoot入门及前后端分离项目开发-Java
SpringBoot实战教程:SpringBoot入门及前后端分离项目开发十三,CSDN达人课课程作者,CSDN 博客作者,现就职于某网络科技公司任职高级 Java 开发工程师,13blog.sit ...
Java精品项目源码前后端分离项目第17期基于遗传算法学校排课系统
Java精品项目源码前后端分离项目第17期基于遗传算法学校排课系统大家好,小辰今天给大家介绍一个基于遗传算法学校排课系统,演示视频文章末尾公众号(小辰哥的java)对号查询观看即可文章目录 Jav ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）二十二（下单和微信支付）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)二十(下单) 0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能 1.订单 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十四（Spring Data Elasticsearch，将数据添加到索引库）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十四(Spring Data Elasticsearch,将数据添加到索引库) 一.创建El ...

Java笔记-EasyCaptcha在前后端分离项目的使用

Java笔记-EasyCaptcha在前后端分离项目的使用相关推荐

最新文章

热门文章