Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例代碼
更新時(shí)間：2022年02月28日 15:52:46 作者：灰太狼_cxh
這篇文章主要為大家介紹了如何用Java語(yǔ)言實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的生成，項(xiàng)目采用了springboot，maven等技術(shù)，感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下
功能：java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼
項(xiàng)目是采用springboot，maven
開發(fā)工具：采用idea
1.效果演示
2.后端代碼
控制層
@Controller
public class SliderCodeController {
@Autowired
ResourceLoader resourceLoader;
@Autowired
private FileUtil fileUtil;
// 設(shè)置橫軸位置緩存
public static Cache< String, Integer > cacheg = CacheBuilder.newBuilder().expireAfterWrite(60, TimeUnit.SECONDS)
.maximumSize(666666).build();
@GetMapping
@RequestMapping("index")
public String test(HttpServletRequest request, Model model) throws IOException {
return "index";
}
@GetMapping
@RequestMapping("getImg")
public @ResponseBody
Map< String, Object > getPic(HttpServletRequest request) throws IOException {
try {
File targetFile = fileUtil.getFile("target");
File tempImgFile = fileUtil.getFile("temp");
Map < String, Object > resultMap = VerifyImageUtil.pictureTemplatesCut(tempImgFile, targetFile);
// 生成流水號(hào)，這里就使用時(shí)間戳代替
String lno = Calendar.getInstance().getTimeInMillis() + "";
cacheg.put(lno, Integer.valueOf(resultMap.get("xWidth") + ""));
resultMap.put("capcode", lno);
// 移除橫坐標(biāo)送前端
resultMap.remove("xWidth");
return resultMap;
}
catch (Exception e) {
e.printStackTrace();
return null;
}
}
@GetMapping
@RequestMapping("checkImgCode")
public @ResponseBody Map < String, Object > checkcapcode(@RequestParam("xpos") int xpos,
@RequestParam("capcode") String capcode, HttpServletRequest request) throws IOException {
Map < String, Object > result = new HashMap< String, Object >();
Integer x = cacheg.getIfPresent(capcode);
if (x == null) {
// 超時(shí)
result.put("code", 3);
}
else if (xpos - x > 5 || xpos - x < -5) {
// 驗(yàn)證失敗
result.put("code", 2);
}
else {
// 驗(yàn)證成功
result.put("code", 1);
}
return result;
}
}工具類
@Component
public class FileUtil {
@Value("${file.path}")
private String filePath;
@Value("${file.target.path}")
private String targetFilePath;
@Value("${file.target.num}")
private Integer targetfileNum;
@Value("${file.temp.path}")
private String tempFilePath;
@Value("${file.temp.num}")
private Integer tempfileNum;
public File getFile(String type){
int num = 0;
String imgType = ".jpg";
String oldFilePath = "";
if(type.equals("target")){
num = new Random().nextInt(targetfileNum) + 1;
oldFilePath = targetFilePath;
} else if(type.equals("temp")){
num = new Random().nextInt(tempfileNum) + 1;
imgType = "-w.png";
oldFilePath = tempFilePath;
}
String path = filePath;
String fileImg = num + imgType;
String filePath = path + fileImg;
File pathFile = new File(path);
if(!pathFile.exists()){
pathFile.mkdirs();
}
File file = new File(filePath);
if(!file.exists()){
try {
file.createNewFile();
ClassPathResource classPathResource = new ClassPathResource(oldFilePath + fileImg);
InputStream inputStream = classPathResource.getInputStream();
if(inputStream.available() != 0){
FileUtils.copyInputStreamToFile(inputStream, file);
}
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return file;
}
}3.前端頁(yè)面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>滑動(dòng)驗(yàn)證碼</title>
<link rel="stylesheet" href="/css/slide.css" rel="external nofollow" >
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.lgyslide.js"></script>
</head>
<body>
<div id="imgscode"></div>
<script>
$(function() {
setTimeout(function() {
createcode();
}, 1000)
}());
//顯示驗(yàn)證碼
function createcode() {
$
.ajax({
type : 'POST',
url : '/getImg',
dataType : 'json',
success : function(data) {
if (data != null) {
$("#imgscode")
.imgcode(
{
frontimg : 'data:image/png;base64,'
+ data.slidingImage,
backimg : 'data:image/png;base64,'
+ data.backImage,
yHeight : data.yHeight,
refreshcallback : function() {
//刷新驗(yàn)證碼
createcode();
},
callback : function(msg) {
console.log(msg);
var $this = this;
$
.ajax({
type : 'POST',
url : '/checkImgCode',
data : {
xpos : msg.xpos,
capcode : data.capcode
},
dataType : 'json',
success : function(
data) {
console
.log(data)
if (data.code == 1) {
$this
.getsuccess();
} else {
if (data.code == 4) {
createcode();
} else if (data.code == 3) {
$this
.getfail("驗(yàn)證碼過(guò)期,請(qǐng)刷新");
} else {
$this
.getfail("驗(yàn)證不通過(guò)");
}
}
}
})
}
});
}
}
})
}
</script>
</body>
</html>到此這篇關(guān)于Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例代碼的文章就介紹到這了,更多相關(guān)Java滑動(dòng)驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Java實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼
- 使用java + selenium + OpenCV破解網(wǎng)易易盾滑動(dòng)驗(yàn)證碼的示例
- 使用java + selenium + OpenCV破解騰訊防水墻滑動(dòng)驗(yàn)證碼功能
- Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例代碼
- selenium+java破解極驗(yàn)滑動(dòng)驗(yàn)證碼的示例代碼
- Java selenium處理極驗(yàn)滑動(dòng)驗(yàn)證碼示例
- Java實(shí)現(xiàn)仿淘寶滑動(dòng)驗(yàn)證碼研究代碼詳解
相關(guān)文章
這篇文章主要介紹了如何將jdk10降版本到j(luò)dk1.8問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Java 添加、更新和移除PDF超鏈接的實(shí)現(xiàn)方法
PDF超鏈接用一個(gè)簡(jiǎn)單的鏈接包含了大量的信息，滿足了人們?cè)诓徽加锰嗫臻g的情況下渲染外部信息的需求。這篇文章主要介紹了Java 添加、更新和移除PDF超鏈接的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Java多線程程序編寫的要點(diǎn),包括線程的狀態(tài)控制和優(yōu)先級(jí)以及線程的通信問(wèn)題等方面,非常之全面!需要的朋友可以參考下2016-01-01
在本篇文章里小編給大家整理了關(guān)于java構(gòu)造方法的相關(guān)知識(shí)點(diǎn)以及實(shí)例代碼，有需要的朋友們可以學(xué)習(xí)下。2019-07-07
Java實(shí)現(xiàn)斷點(diǎn)下載服務(wù)端與客戶端的示例代碼
這篇文章主要為大家介紹了如何實(shí)現(xiàn)服務(wù)端(Spring Boot)與客戶端(Android)的斷點(diǎn)下載與下載續(xù)傳功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-08-08
修改Maven settings.xml 后配置未生效的解決
這篇文章主要介紹了修改Maven settings.xml 后配置未生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要給大家介紹的是Java 控制流程、大數(shù)值、數(shù)組的一些相關(guān)自來(lái)哦，感興趣的小伙伴可以參考下面文章的具體內(nèi)容，希望文章對(duì)你有所幫助2021-10-10
解讀springboot配置mybatis的sql執(zhí)行超時(shí)時(shí)間(mysql)
這篇文章主要介紹了解讀springboot配置mybatis的sql執(zhí)行超時(shí)時(shí)間(mysql)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
SpringBoot整合Security權(quán)限控制登錄首頁(yè)
這篇文章主要為大家介紹了SpringBoot整合Security權(quán)限控制登錄首頁(yè)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于Java中Integer類型值相等判斷的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02