SSM+MyBatis-Plus+EasyExcel+腾讯云&tianai滑动验证码接入项目搭建+简单实现增、删、改、查、导入、滑动验证码功能

SSM+MyBatis-Plus+EasyExcel+腾讯云&tianai滑动验证码接入项目搭建+简单实现增、删、改、查、导入、滑动验证码功能

文章末尾附源码

一、什么是SSM框架

SSM框架是Spring、Spring MVC 、和Mybatis框架的整合，是标准的MVC模式。标准的SSM框架有四层，分别是dao层（mapper），service层，controller层和View层。

使用spring实现业务对象管理，使用spring MVC负责请求的转发和视图管理，mybatis作为数据对象的持久化引擎。

二、搭建流程

1、新建一个maven项目

2、创建成功项目结构

3、Spring与Mybatis的整合

3.1、建立JDBC属性文件

blog.main.jdbc.driver=com.mysql.cj.jdbc.Driver
blog.main.jdbc.url=jdbc:mysql://127.0.0.1:3306/ssm?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true&serverTimezone=PRC&useSSL=false
blog.main.jdbc.dbname=ssm
blog.main.jdbc.host=127.0.0.1
blog.main.jdbc.port=3306
blog.main.jdbc.name=root
blog.main.jdbc.password=123456

注意：
com.mysql.jdbc.Driver是mysql-connector-java 5中的
com.mysql.cj.jdbc.Driver是mysql-connector-java 6以上的
JDBC连接Mysql6需用com.mysql.cj.jdbc.Driver，同时需要指定时区serverTimezone

3.2、建立spring-mybatis.xml文件

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/tx
                           http://www.springframework.org/schema/tx/spring-tx.xsd
                           http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans-4.1.xsd"
       default-lazy-init="true">

    
    
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver">property>
        <property name="url" value="${yang.jdbc.url}">property>
        <property name="username" value="${yang.jdbc.name}">property>
        <property name="password" value="${yang.jdbc.password}">property>

        <property name="maxActive" value="100">property>

        <property name="maxIdle" value="100">property>

        <property name="maxWait" value="5000">property>
        <property name="defaultAutoCommit" value="true">property>
        <property name="validationQuery" value="select 1">property>
        <property name="testOnBorrow" value="true">property>
        <property name="testWhileIdle" value="true">property>
    bean>


    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    bean>


    <tx:annotation-driven proxy-target-class="false" transaction-manager="transactionManager" />

    <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
        <property name="dataSource" ref="dataSource"/>
    bean>

    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.yang.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    bean>

    
    <bean id="sqlSessionFactory" class="com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <property name="mapperLocations" value="classpath:mapper/*">property>
    bean>

    <bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg index="0" ref="sqlSessionFactory"/>
        <constructor-arg index="1" value="BATCH"/>
    bean>
beans>

3.3、Log配置

#Log4j由三个重要的组件构成：
#日志信息的优先级，
#日志信息的输出目的地，
#日志信息的输出格式。
### 设置###
#log4j.rootLogger = [ level ] , appenderName, appenderName, …
log4j.rootLogger = debug,stdout,D,E
### 输出信息到控制台 ###
log4j.appender.stdout = org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target = System.out
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n
#控制级别ERROR>WARN> INFO>DEBUG
### 输出DEBUG 级别以上的日志到=E://logs/log.log ###
log4j.appender.D = org.apache.log4j.DailyRollingFileAppender
#log4j.appender.D.File = /home/tomcat/apache-tomcat-8.5.20/logs/blog.log
log4j.appender.D.File = /usr/app/logs/blog.log
log4j.appender.D.Append = true
log4j.appender.D.Threshold = DEBUG
log4j.appender.D.layout = org.apache.log4j.PatternLayout
log4j.appender.D.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss}  [ %t:%r ] - [ %p ]  %m%n

### 输出ERROR 级别以上的日志到=E://logs/error.log ###
log4j.appender.E = org.apache.log4j.DailyRollingFileAppender
#log4j.appender.E.File =/home/tomcat/apache-tomcat-8.5.20/logs/error.log
log4j.appender.E.File = /usr/app/logs/blog_error.log
log4j.appender.E.Append = true
log4j.appender.E.Threshold = ERROR
log4j.appender.E.layout = org.apache.log4j.PatternLayout
log4j.appender.E.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss}  [ %t:%r ] - [ %p ] ########## %m%n

4、整合SpringMVC

4.1、建立spring-mvc.xm文件

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"
       default-lazy-init="true">

    
    
    <bean id="propertyPlaceholderConfigurer"
          class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="ignoreResourceNotFound">
            <value>falsevalue>
        property>
        <property name="locations">
            <list>
                
                <value>classpath:/spring-jdbc.propertiesvalue>
            list>
        property>
    bean>

    
    <context:component-scan base-package="com.yang.controller" use-default-filters="false">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    context:component-scan>
    <context:component-scan base-package="com.yang.service" use-default-filters="false">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service"/>
    context:component-scan>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    bean>

    
    <mvc:annotation-driven />
    
        
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxInMemorySize" value="10240"/>
        <property name="maxUploadSize" value="-1"/>
    bean>

    <mvc:default-servlet-handler>mvc:default-servlet-handler>

    <import resource="classpath:spring-mybatis.xml"/>
beans>

4.2、配置web.xml文件

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5" metadata-complete="true">
  <display-name>Archetype Created Web Applicationdisplay-name>

  
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
  listener>

  
  <filter>
    <filter-name>CharacterEncodingFilterfilter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
    <init-param>
      <param-name>encodingparam-name>
      <param-value>UTF-8param-value>
    init-param>
    <init-param>
      <param-name>forceEncodingparam-name>
      <param-value>trueparam-value>
    init-param>
  filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilterfilter-name>
    <url-pattern>/*url-pattern>
  filter-mapping>

  
  <context-param>
    <param-name>contextConfigLocationparam-name>
    <param-value>
      classpath:/spring-mybatis.xml
    param-value>
  context-param>

  <servlet>
    <servlet-name>dispatcherservlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
    <init-param>
      <param-name>contextConfigLocationparam-name>
      <param-value>classpath:spring-mvc.xmlparam-value>
    init-param>
    <load-on-startup>1load-on-startup>
  servlet>
  <servlet-mapping>
    <servlet-name>dispatcherservlet-name>
    <url-pattern>/url-pattern>
  servlet-mapping>
  <welcome-file-list>
    <welcome-file>/index.jspwelcome-file>
  welcome-file-list>

  <context-param>
    <param-name>log4jConfigparam-name>
    <param-value>/WEB-INF/classes/log4j.propertiesparam-value>
  context-param>
  
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.cssurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.jsurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.jpgurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.pngurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.htmlurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.ttfurl-pattern>
  servlet-mapping>
  <servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.woffurl-pattern>
  servlet-mapping>
web-app>

5、项目整体结构

6、配置Tomact

https://tomcat.apache.org/download-80.cgi

6.1、点击AddConfigurations

6.2、配置Tomcat基本信息

注意：当第三步中配置好的端口在启动时，提示如下，则表示该端口被占用，需换一个端口

6.3、添加服务器启动

注意：是选择war还是war exploded这里首先看一下他们两个的区别：
（1）war模式这种可以称之为是发布模式，看名字也知道，这是先打成war包，再发布；
（2）war exploded模式是直接把文件夹、jsp页面 、classes等等移到Tomcat 部署文件夹里面，进行加载部署。因此这种方式支持热部署，一般在开发的时候也是用这种方式。
（3）在平时开发的时候，使用热部署的话，应该对Tomcat进行相应的设置，这样的话修改的jsp界面等一些东西才可以及时的显示出来。
两种方式得部署方式是不一样的，在获取项目的路径的时候得到的结果是不一样的
两种方式都可以，根据自己所需选择

6.4、添加成功

在此处可配置默认访问路径，名字可以自己修改,我这里是/

6.5、启动项目

三、配置文件加载顺序

当执行一个SSM框架搭建的JavaWeb项目时，配置文件加载顺序主要有：

1、读取web.xml配置文件

注意：此时服务器会去加载spring配置文件，暂停本段配置之后的代码执行;

2、加载Spring配置文件

3、当spring配置文件加载完成回到web.xml配置文件中继续按顺序从上到下加载

• 加载监听器；加载过滤器；加载前端控制器
• 前端控制器中的1配置决定了前端控制器是否在容器启动时就加载，若其值大于等于0则在容器启动时加载，小于零或不设置时则不在容器启动时加载。
• 若要在容器（服务器Tomcat）启动时就加载前端控制器，则此时暂停web.xml的加载，先去加载SpringMVC

4、加载springMVC配置文件

5、回到web.xml文件中，继续进行后续加载，若无后续则完成整个项目的加载

四、整合MyBatis-Plus

MyBatis-Plus官网

MyBatis-Plus 是一个 MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。

1、引入依赖

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus</artifactId>
    <version>latest-version</version>
</dependency>

注意
引入 MyBatis-Plus 之后请不要再次引入 MyBatis 以及 MyBatis-Spring，以避免因版本差异导致的问题。

2、配置数据库的相关配置如3.1

3、配置包扫描

    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.yang.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    bean>
    
        
    <bean id="sqlSessionFactory" class="com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <property name="mapperLocations" value="classpath:mapper/*">property>
    bean>

4、dao层

4.1、也可自定义方法实现

4.2、自定义sql在mapper.xml中书写

5、Service层

6、ServiceImpl层

7、调用方法

当所有配置完成就可调用一些CRUD方法而不用自己手写SQL

五、整合Easyexcel实现Excel导入

Easy Excel官网
优点：与POI 不用的是，EasyExcel主要是采用sax模式一行一行解析，并将一行的解析结果以观察者的模式通知处理，即使数据量较大时也不会发生OOM。

1、引入依赖

    <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.2.7</version>
    </dependency>

2、实体类

• 官方文档不建议 index 和 name 同时用，要么一个对象只用index，要么一个对象只用name去匹配
• 用名字去匹配，这里需要注意，如果名字重复，会导致只有一个字段读取到数据

@Data
public class UserExcel extends BaseRowModel {

    @ExcelProperty(index = 0,value = "用户名")
    private String username;

    @ExcelProperty(index = 1,value = "性别")
    private String sex;

    @ExcelProperty(index = 2,value = "年龄")
    private String age;

    @ExcelProperty(index = 3,value = "地址")
    private String address;

    @ExcelProperty(index = 4,value = "照片")
    private String photo;
}

3、实体类对应的导入表格模板

4、控制层

 @RequestMapping(value = "uploadFile", method = {RequestMethod.GET, RequestMethod.POST })
    public String importFile(@RequestParam("uploadFile") MultipartFile files) throws Exception {
            // 有个很重要的点 DemoDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去
            // 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
            EasyExcel.read(files.getInputStream(), UserExcel.class, new DemoDataListener(userMapper)).sheet().doRead();
         return "redirect:/user/pagingQueryUserList";
    }

5、监听器

// 有个很重要的点 DemoDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去
public class DemoDataListener extends AnalysisEventListener<UserExcel> {
    private static final Logger LOGGER = LoggerFactory.getLogger(DemoDataListener.class);
    /**
     * 每隔5条存储数据库，实际使用中可以3000条，然后清理list ，方便内存回收
     */
    private static final int BATCH_COUNT = 10;
    List<UserExcel> userExcelList = new ArrayList<>();
    /**
     * 假设这个是一个DAO，当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。
     */
    private UserMapper userMapper;

    /**
     * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来
     * @param userMapper
     */
    public DemoDataListener(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    /**
     * 这个每一条数据解析都会来调用
     * @param userExcel
     * @param analysisContext
     */
    @Override
    public void invoke(UserExcel userExcel, AnalysisContext analysisContext) {
        LOGGER.info("解析到一条数据:{}", userExcel);
        userExcelList.add(userExcel);
        // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM
        if (userExcelList.size() >= BATCH_COUNT) {
            saveData();
            // 存储完成清理 list
            userExcelList.clear();
        }
    }
    
    /**
     * 所有数据解析完成了 都会来调用
     * @param context
     */
    @Override
    public void doAfterAllAnalysed(AnalysisContext context) {
        // 这里也要保存数据，确保最后遗留的数据也存储到数据库
        saveData();
        LOGGER.info("所有数据解析完成！");
    }

    /**
     * 存储数据库
     */
    private void saveData() {
        LOGGER.info("{}条数据，开始存储数据库！", userExcelList.size());
        userMapper.insertByList(userExcelList);
        LOGGER.info("存储数据库成功！");
    }
}

6、注意点

• Easyexcel不支持读取图片；
• 出现 NoSuchMethodException， ClassNotFoundException, NoClassDefFoundError
  极大概率是jar冲突，建议clean项目，或者统一poi 的版本，理论上来说easyexcel兼容poi的3.17,4.0.1,4.1.0所有较新版本；

六、整合腾讯云滑动验证码

1、注册

注册完腾讯云账号后即可开始使用，首次使用可领取七天体验时间

2、准备工作

具体步骤官网已写的非常详细，可进入官方文档快速入门

快速入门

准备好所需要的例如CaptchaAppId、AppSecretKey、CaptchaAppId、AppSecretKey

3、前端接入

验证码web前端接入
前端接入十分方便，只需引入如下三段代码即可实现前端接入

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

<button id="TencentCaptcha" data-appid="你的验证码CaptchaAppId" data-cbfn="callbackName" data-biz-state="data-biz-state"
        type="button">验证button>

<script>
    window.callbackName = function (res) {
        console.log('callback:', res);
        if (res.ret === 0) {
            alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
        }
    }
</script>

我在回调函数中加了相关逻辑和后台进行交互，检验用户名密码是否正确以及核查验证码票据结果

    // 回调函数需要放在全局对象window下
    window.callbackName = function (res) {
         console.log('callback:', res);
          if (res.ret === 0) {
            var username=$("#username").val();
            var password=$("#password").val();
             $.ajax({
                type:"POST",
                url:"/verify/getVerify",
                dataType:"json",
                data:"ticket="+res.ticket+"&randstr="+res.randstr+"&username="+username+"&password="+password,
                success:function(data){
                    if (data.code==200){
                        alert(data.message)
                    }else {
                        alert(data.message)
                    }
                },
                error:function(){
                    console.log("error")
                }
            })
        }
    }

4、后端接入

核查验证码票据结果

验证码 核查验证码票据结果-后端接入文档

4.1、API Explorer 提供了在线调用、签名验证、SDK 代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成 SDK 调用示例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpmX2QK7-1647829750000)(https://secure2.wostatic.cn/static/kpABfSuQA3HtdFe9q5cVpk/image.png)]

4.2、引入腾讯云sdk依赖

    <dependency>
      <groupId>com.tencentcloudapi</groupId>
      <artifactId>tencentcloud-sdk-java</artifactId>
      <!-- go to https://search.maven.org/search?q=tencentcloud-sdk-java and get the latest version. -->
      <!-- 请到https://search.maven.org/search?q=tencentcloud-sdk-java查询所有版本，最新版本如下 -->
      <version>3.1.322</version>
    </dependency>

4.3、控制层代码

@Controller
@RequestMapping("verify")
public class VerifyController {

    @Autowired
    private UserMapper userMapper;

    @PostMapping("getVerify")
    @ResponseBody
    public Result<String> getVerify(HttpServletRequest req, HttpServletResponse resp){
        Result<String> result=new Result<>();
        String ticket = req.getParameter("ticket");
        String randstr = req.getParameter("randstr");
        DescribeCaptchaResult describeCaptchaResult = new DescribeCaptchaResult();
        if (describeCaptchaResult.codeResponse(ticket,randstr)){
            result.setResult(ResultStatus.SUCCESS);
        }else{
            result.setResult(ResultStatus.ERROR);
            result.setMessage("验证不通过！");
            return result;
        }
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        QueryWrapper<User> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("username",username);
        User user=userMapper.selectOne(queryWrapper);
        if (user!=null){
            if (user.getPassword().equals(password)){
                result.setMessage("登录成功！");
            }else {
                result.setCode(4000);
                result.setMessage("用户名或密码错误！");
            }
        }else {
            result.setCode(4000);
            result.setMessage("用户不存在，请注册！");
        }
        return result;
    }
}

4.4、核验验证码票据结果代码

public class DescribeCaptchaResult {
    public boolean codeResponse(String ticket, String randstr) {
        String str = "";
        try {
            // 实例化一个认证对象，入参需要传入腾讯云账户secretId，secretKey,此处还需注意密钥对的保密
            // 密钥可前往https://console.cloud.tencent.com/cam/capi网站进行获取
            Credential cred = new Credential("你的secretId", "你的secretKey");

            HttpProfile httpProfile = new HttpProfile();
            // 实例化一个http选项，可选的，没有特殊需求可以跳过
            httpProfile.setEndpoint("captcha.tencentcloudapi.com");
            
            // 实例化一个client选项，可选的，没有特殊需求可以跳过
            ClientProfile clientProfile = new ClientProfile();
            clientProfile.setHttpProfile(httpProfile);
            
            // 实例化要请求产品的client对象,clientProfile是可选的
            CaptchaClient client = new CaptchaClient(cred, "ap-beijing", clientProfile);

            DescribeCaptchaResultRequest request= new DescribeCaptchaResultRequest();
            request.setAppSecretKey("你的AppSecretKey");
            request.setCaptchaAppId(你的CaptchaAppId);
            //固定填值：9。可在控制台配置不同验证码类型。
            request.setCaptchaType(9l);
            request.setTicket(ticket);
            request.setUserIp("127.0.0.1");
            request.setRandstr(randstr);
            // 返回的resp是一个DescribeCaptchaResultResponse的实例，与请求对象对应
            DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(request);
            str = DescribeCaptchaResultRequest.toJsonString(resp);
        } catch (TencentCloudSDKException e) {
            e.printStackTrace();
            System.out.println(e);
        }
        System.out.println(str);
        if (str.contains("OK")) {
            return true;
        } else {
            return false;
        }
    }
}

以上我只传了调用该接口所需必传参数

5、运行效果

七、整合一个开源的滑动验证码

这是我见过的第一个真正好看又好用的滑块验证码

详情请看

天爱有情/tianai-captcha

SpringBoot项目作者已经提供一键启动demo，可以去仓库中直接下载。

这里我用的是SSM所以在SpringBoot项目的demo上稍做了一点修改。

1、引入依赖

    <!-- 天爱验证码maven 导入 -->
    <dependency>
      <groupId>cloud.tianai.captcha</groupId>
      <artifactId>tianai-captcha</artifactId>
      <version>1.2.7</version>
    </dependency>

2、Controller层

@Controller
public class TianaiCaptchaController {
    
    private Map<String, Object> validData;

    @GetMapping("/gen")
    @ResponseBody
    public CaptchaResponse<SliderCaptchaInfo> genCaptcha() {

        SliderCaptchaResourceManager sliderCaptchaResourceManager = new DefaultSliderCaptchaResourceManager();
        StandardSliderCaptchaTemplate sliderCaptchaTemplate = new StandardSliderCaptchaTemplate(sliderCaptchaResourceManager, true);

//        添加自定义图片资源
        ResourceStore resourceStore = sliderCaptchaResourceManager.getResourceStore();
        // 添加classpath目录下的 aa.jpg 图片
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/a.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/b.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/c.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/d.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/e.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/g.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/h.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/i.jpg"));
        resourceStore.addResource(new Resource(ClassPathResourceProvider.NAME, "bgimages/j.jpg"));

        // 负责计算一些数据存到缓存中，用于校验使用
        // SliderCaptchaValidator负责校验用户滑动滑块是否正确和生成滑块的一些校验数据; 比如滑块到凹槽的百分比值
        SliderCaptchaValidator sliderCaptchaValidator = new BasicCaptchaTrackValidator();
        // 这个map数据应该存到缓存中，校验的时候需要用到该数据
        // 生成滑块图片
        SliderCaptchaInfo slideImageInfo = sliderCaptchaTemplate.getSlideImageInfo();
        System.out.println(slideImageInfo);
        validData = sliderCaptchaValidator.generateSliderCaptchaValidData(slideImageInfo);

        String id= UUID.randomUUID().toString().replace("-", "");
        CaptchaResponse<SliderCaptchaInfo> captchaInfoMap=new CaptchaResponse<>();
        captchaInfoMap.setId(id);
        captchaInfoMap.setCaptcha(slideImageInfo);

        return captchaInfoMap;
    }

    @PostMapping("/check")
    @ResponseBody
    public boolean checkCaptcha(@RequestBody SliderCaptcha sliderCaptcha) {
        SliderCaptchaValidator sliderCaptchaValidator = new BasicCaptchaTrackValidator();
        // 用户传来的行为轨迹和进行校验
        // - sliderCaptchaTrack为前端传来的滑动轨迹数据
        // - map 为生成验证码时缓存的map数据
        SliderCaptchaTrack sliderCaptchaTrack=new SliderCaptchaTrack();
        BeanUtils.copyProperties(sliderCaptcha,sliderCaptchaTrack);

        List<SliderCaptchaTrack.Track> trackList=sliderCaptcha.getTrackList().stream().map(item->{
            SliderCaptchaTrack.Track track=new SliderCaptchaTrack.Track(item.getX(), item.getY(), item.getT());
            return track;
        }).collect(Collectors.toList());

        sliderCaptchaTrack.setTrackList(trackList);
        boolean check = sliderCaptchaValidator.valid(sliderCaptchaTrack,validData);
        return check;
    }
}

3、接参与反参实体类

@Data
public class SliderCaptcha {
    private Integer bgImageWidth;
    private Integer bgImageHeight;
    private Integer sliderImageWidth;
    private Integer sliderImageHeight;
    private Date startSlidingTime;
    private Date entSlidingTime;
    private List<SliderCaptcha.Track> trackList;
    @Data
    public static class Track {
        private Integer x;
        private Integer y;
        private Integer t;
    }
}

public class CaptchaResponse<T> implements Serializable {
    private String id;
    private T captcha;
}

4、前端

captcha.jsp前端可到源码中查看

5、运行效果

项目源码：

https://github.com/Hello-DYang/ssmdemo.git