Java实现滑动验证码(前端部分)

目录

• 实现思路
• 实现代码
• 实现结果

实现思路

1、请求后端获得背景图、滑块、x、y、误差范围bound

2、将滑块设置到对应的位置：top = y

3、添加鼠标滑动事件

实现代码

后端请求（Controller）

SliderVerifyController

/**
 * @author: Yang
 * @create: 2022-10-25
 * @Description: 滑动验证
 */
@RestController
@RequestMapping("/sliderVerify")
public class SliderVerifyController {
    @Resource
    private SliderVerifyService sliderVerifyService;

    @GetMapping
    public ResponseResult generateSliderVerify() {

        return sliderVerifyService.generateSliderVerify();
    }
}

SliderVerifyServiceImpl

/**
 * @author: Yang
 * @create: 2022-10-25
 * @Description:
 */
@Service
public class SliderVerifyServiceImpl implements SliderVerifyService {

    @Value("${my.staticPath}")
    private String path;
    @Override
    public ResponseResult generateSliderVerify() {
        int index = new Random().nextInt(5) + 1;

        ImageSlideVerify slideVerify = ImageSlideVerifyUtil.cutting(
                new File(System.getProperty("user.dir") + "/web_component/src/main/resources/static/sliderVerify/" + index + ".png"));
        return new ResponseResult<>(200, slideVerify);
    }
}

HTML代码

实现结果

Java后端代码

到此这篇关于Java实现滑动验证码(前端部分)的文章就介绍到这了,更多相关Java滑动验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！