简单的数字验证码功能（Spring boot + vue.js ）

前端使用VUE+elementUI在表单中添加验证码的按钮和输入框，登录时先验证验证码，验证通过后才会验证登录密码。

    //验证验证码的
    const verificationCode =reactive({
      answer: '',  //答案
      formula: '', //验证码的公式
    })

    //获取验证码
    const getVerificationCode = () => {
      axios.get("/api/auth/generateVerification").then(res => {
        console.log(res.data);
        if(res.data.code === 200){
          verificationCode.formula = res.data.object;
        }else
        ElMessage.error(res.data.message);
      })
    }
    getVerificationCode();//初始化获取验证码

后端springboot+redis

package com.example.tourismmanagement.controller;

import com.example.tourismmanagement.entity.dto.VerificationDTO;
import com.example.tourismmanagement.utils.IpUtil;
import com.example.tourismmanagement.vo.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.Objects;
import java.util.concurrent.TimeUnit;

/**
 * @Author linht
 * @Date 2022/5/20 15:17
 **/
@Slf4j
@RestController
@RequestMapping("/auth")
public class AuthController {

    @Autowired
    StringRedisTemplate stringRedisTemplate;

    //生成数字验证码
    @GetMapping("/generateVerification")
    public Result captcha(HttpServletRequest request){
        Result result = new Result();
        //获取ip
        String ipAddr = IpUtil.getClientIpAddr(request);
        String formula = "";
        //随机生成1-4的数字
        int num = (int)(Math.random()*4+1);
        log.info("生成的数字 num:{}",num);
        switch (num){
            case 1:
                //随机生成100以内的加redis中
                int x = (int)(Math.random()*50+1);
                int y = (int)(Math.random()*50+1);
                int answer = x+y;
                //拼接算式
                formula = x+" + "+y+" = ?";
                stringRedisTemplate.opsForValue().set(String.format("%s::%s",ipAddr,formula),String.valueOf(answer),2, TimeUnit.MINUTES);
                break;
            case 2:
                //随机生成100以内的减redis中
                int x1 = (int)(Math.random()*50+1);
                int y1 = (int)(Math.random()*50+1);
                int answer1 = x1-y1;
                //拼接算式
                formula = x1+" - "+y1+" = ?";
                stringRedisTemplate.opsForValue().set(String.format("%s::%s",ipAddr,formula),String.valueOf(answer1),2, TimeUnit.MINUTES);
                break;
            case 3:
                //随机生成10以内的乘redis中
                int x2 = (int)(Math.random()*10+1);
                int y2 = (int)(Math.random()*10+1);
                int answer2 = x2*y2;
                //拼接算式
               formula = x2+" * "+y2+" = ?";
                stringRedisTemplate.opsForValue().set(String.format("%s::%s",ipAddr,formula),String.valueOf(answer2),2, TimeUnit.MINUTES);
                break;

            case 4:
                //随机生成100以内的除redis中
                int x3 = (int)(Math.random()*50+1);
                int y3 = (int)(Math.random()*50+1);
                int answer3 = x3/y3;
                //拼接算式
                formula = x3+" / "+y3+" = ?";
                stringRedisTemplate.opsForValue().set(String.format("%s::%s",ipAddr,formula),String.valueOf(answer3),2, TimeUnit.MINUTES);
                break;
            default: formula = "";
        }
        result.setCode(200);
        result.setMsg("获取验证码！");
        result.setObject(formula);
        return result;
    }

    //验证验证码
    @PostMapping("/verification")
    public Result verification(HttpServletRequest request, @RequestBody VerificationDTO verificationDTO){
        Result result = new Result();
        //获取ip
        String ipAddr = IpUtil.getClientIpAddr(request);
        String format = String.format("%s::%s", ipAddr, verificationDTO.getFormula());
        //获取redis中的答案
        String redisAnswer = stringRedisTemplate.opsForValue().get(format);
        log.info("redis中的答案:{}",redisAnswer);
        if(Objects.equals(redisAnswer, verificationDTO.getAnswer())){
            //验证成功删除redis中的答案
            stringRedisTemplate.delete(format);
            result.setCode(200);
            result.setMsg("验证成功！");
            return result;
        }
        result.setCode(500);
        result.setMsg("验证码错误！");
        return result;

    }





}

实现效果：