前言

在Web应用程序中，为了保护用户信息的安全性，验证码已经成为了一个非常普遍的安全措施，而Hutool-captcha是一款非常优秀的开源图形验证码工具，简单易用，提供了丰富的特性，可以帮助我们快速实现验证码功能。

本文将介绍如何使用Spring Boot整合Mybatis-Plus和Hutool-captcha实现验证码功能，并将其提供给Vue前端进行登录验证。

项目概述

在本文中，我们将使用Spring Boot作为Web应用程序的后端框架，并配合Mybatis-Plus实现数据访问层，使用Hutool-captcha实现验证码功能。

我们的目标是实现一个可重用的验证码生成接口，该接口将生成一个随机的验证码，并将其返回给客户端，客户端可以将其用于用户登录等操作的验证。

步骤1：设置项目依赖

在开始之前，首先需要在项目中添加以下依赖：

<!--Spring Boot依赖-->
<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--Mybatis-Plus依赖-->
<dependency>
     <groupId>com.baomidou</groupId>
     <artifactId>mybatis-plus-boot-starter</artifactId>
     <version>VERSION</version>
</dependency>
<!--Hutool-captcha依赖-->
<dependency>
     <groupId>cn.hutool</groupId>
     <artifactId>hutool-captcha</artifactId>
     <version>${hutool.version}</version>
</dependency>

步骤2：创建验证码实体

在创建验证码接口之前，我们需要先创建一个验证码实体类来存储生成的验证码。我们可以创建一个包含验证码和过期时间的Java Bean类，如下所示：

@Data
public class Captcha {
    private String code; //验证码
    private LocalDateTime expireTime; //过期时间

    //构造函数
    public Captcha(String code, long expireIn) {
        this.code = code;
        this.expireTime = LocalDateTime.now().plusSeconds(expireIn);
    }

    //判断验证码是否过期
    public boolean isExpired() {
        return LocalDateTime.now().isAfter(expireTime);
    }
}

步骤3：创建验证码生成接口

接下来，我们需要创建一个生成验证码的接口。我们可以将验证码生成的逻辑放在一个工具类中，例如以下工具类：

@Component
public class CaptchaUtil {

    @Value("${captcha.expireTime}")
    private long expireTime; // 验证码过期时间

    @Value("${captcha.width}")
    private int width; // 验证码图片宽度

    @Value("${captcha.height}")
    private int height; // 验证码图片高度

    @Value("${captcha.length}")
    private int length; // 验证码长度

    // 生成验证码
    public Captcha createCode() throws IOException {
        // 创建验证码图片
        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(width, height, length, 20);
        // 生成验证码
        String code = captcha.getCode();
        // 保存验证码
        Captcha cap = new Captcha(code, expireTime);
        return cap;
    }

    // 校验验证码
    public boolean checkCode(String userCode, Captcha cap) {
        // 验证码为空
        if (cap == null || cap.isExpired()) {
            return false;
        }
        // 验证码不正确
        if (!cap.getCode().equalsIgnoreCase(userCode.trim())) {
            return false;
        }
        // 通过验证
        return true;
    }

}

在上面的工具类中，我们使用了Hutool-captcha来创建验证码，并将其封装到Captcha类中。同时，我们还提供了一个checkCode方法，用于比较用户输入的验证码与我们生成的验证码是否相等。

现在，我们将创建一个RestController，它将暴露生成验证码的接口，如下所示：

@RestController
@RequestMapping("/captcha")
public class CaptchaController {

    @Autowired
    private CaptchaUtil captchaUtil;

    @GetMapping("/get")
    public R getCaptcha() throws IOException {
        Captcha captcha = captchaUtil.createCode();
        return R.ok(captcha);
    }

}

在上面的控制器中，我们使用了CaptchaUtil工具类来生成验证码，并通过R.ok()方法将其传递给前端。请注意，R是一个响应对象，用于封装返回的数据，使用R.ok()方法返回一个成功响应。

步骤4：前端集成

最后，我们需要在前端中使用生成的验证码。我们可以在登录表单中添加一个验证码输入框和一个用于显示验证码图片的img标签。我们可以通过调用getCaptcha接口来获取验证码，将其转换为Base64编码格式，并将其作为img标签的src属性。

以下是Vue前端代码示例：

<template>
  <el-form>
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" />
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="form.captcha" />
      <img :src="captchaImg" @click="refreshCaptcha" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        captcha: "",
      },
      captchaImg: "",
    };
  },
  methods: {
    login() {
      axios.post("/login", this.form).then((res) => {});
    },
    refreshCaptcha() {
      axios.get("/captcha/get").then((res) => {
        this.captchaImg = `data:image/jpeg;base64,${res.data.data.code}`;
      });
    },
  },
  mounted() {
    this.refreshCaptcha();
  },
};
</script>

在上面的代码中，我们使用了axios库来发送GET和POST请求，使用Base64编码格式将验证码显示在img标签中。在refreshCaptcha方法中，我们发送一个GET请求到getCaptcha接口，并将响应数据转换为Base64格式，然后将其作为img的src属性。

结论

在本文中，我们学习了如何使用Spring Boot、Mybatis-Plus和Hutool-captcha实现验证码生成接口，并将其提供给Vue前端进行登录验证。我们通过创建验证码实体类、生成验证码工具类和控制器，在后端实现了一个可重用的验证码生成接口。在前端，我们使用了Vue框架来调用后端接口，将验证码显示在界面上，完成了整个验证码验证流程。

希望本篇文章对你有所帮助，也欢迎大家在评论区留言交流。