功能：java实现滑动验证码
项目是采用springboot，maven
开发工具：采用idea
1.效果演示
2.后端代码
控制层
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
@Controllerpublic class SliderCodeController { @Autowired ResourceLoader resourceLoader; @Autowired private FileUtil fileUtil; // 设置横轴位置缓存 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); // 生成流水号，这里就使用时间戳代替 String lno = Calendar.getInstance().getTimeInMillis() + ""; cacheg.put(lno, Integer.valueOf(resultMap.get("xWidth") + "")); resultMap.put("capcode", lno); // 移除横坐标送前端 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) { // 超时 result.put("code", 3); } else if (xpos - x > 5 || xpos - x < -5) { // 验证失败 result.put("code", 2); } else { // 验证成功 result.put("code", 1); } return result; }} |
工具类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
@Componentpublic 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.前端页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>滑动验证码</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) }()); //显示验证码 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() { //刷新验证码 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("验证码过期,请刷新"); } else { $this .getfail("验证不通过"); } } } }) } }); } } }) } </script></body></html> |
到此这篇关于Java实现滑动验证码的示例代码的文章就介绍到这了,更多相关Java滑动验证码内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/weixin_39220472/article/details/121796734
