Javaweb--超简单实现图形验证码功能

最新推荐文章于 2024-05-28 23:35:06 发布

二十六桥明月夜

最新推荐文章于 2024-05-28 23:35:06 发布

阅读量837

点赞数 2

分类专栏： sprinboot Java 前端文章标签： java spring spring boot html 前端

本文链接：https://blog.csdn.net/hailongcsdn/article/details/107576421

版权

图形验证码是网站登录注册中一个常能见到的东西，也十分实用。最近也是做了一下这个验证码小案例，希望能帮到有需要的朋友。
最终效果图：
在这里插入图片描述

上面的验证码是后台随机生成的，以流的方式通过响应发送给前端的，点击验证码可以切换新的验证码。我是通过集成第三方的sdk完成的，前端使用Layui+JQuery，后端使用的是SpringBoot。
第三方sdk依赖

        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.10</version>
        </dependency>

前端页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #009688;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;

最低0.47元/天解锁文章

二十六桥明月夜

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javaweb--超简单实现图形验证码功能

图形验证码是网站登录注册中一个常能见到的东西，也十分实用。最近也是做了一下这个验证码小案例，希望能帮到有需要的朋友。最终效果图：上面的验证码是后台随机生成的，以流的方式通过响应发送给前端的，点击验证码可以切换新的验证码。我是通过集成第三方的sdk完成的，前端使用Layui+JQuery，后端使用的是SpringBoot。第三方sdk依赖 <dependency> <groupId>cn.hutool</group
复制链接

扫一扫