ssm验证码功能的实现

实现验证码功能需要以下步骤：

1. 在前端页面添加验证码输入框和图片显示区域。
2. 在后端实现生成验证码图片的功能，并将生成的验证码存储到 session 中。
3. 在前端页面中，使用 Ajax 技术向后台请求生成验证码图片，并将生成的图片显示在页面上。
4. 在用户提交表单时，将用户输入的验证码与 session 中存储的验证码进行比对，以验证验证码是否正确。

以下是一个基于 Spring + Spring MVC + MyBatis 框架的 ssm 验证码功能的实现示例：

1. 在前端页面中添加验证码输入框和图片显示区域：

<div>
    <label for="captcha">验证码：</label>
    <input type="text" id="captcha" name="captcha" />
    <img id="captchaImg" src="#" alt="验证码" />
    <a href="#" onclick="reloadCaptcha();return false;">换一张</a>
</div>

2. 在后端实现生成验证码图片的功能，并将生成的验证码存储到 session 中：

@Controller
public class CaptchaController {
    // 生成验证码图片
    @RequestMapping("/captcha")
    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 生成验证码字符串
        String captchaText = generateCaptchaText();
        // 将验证码字符串存储到 session 中
        request.getSession().setAttribute("captcha", captchaText);

        // 生成验证码图片
        BufferedImage captchaImage = generateCaptchaImage(captchaText);
        // 输出验证码图片
        response.setContentType("image/png");
        ImageIO.write(captchaImage, "png", response.getOutputStream());
    }

    // 生成验证码字符串
    private String generateCaptchaText() {
        // 随机生成 4 位数字验证码
        Random random = new Random();
        int captchaInt = random.nextInt(9000) + 1000;
        return String.valueOf(captchaInt);
    }

    // 生成验证码图片
    private BufferedImage generateCaptchaImage(String captchaText) {
        // 创建 BufferedImage 对象
        BufferedImage image = new BufferedImage(100, 40, BufferedImage.TYPE_INT_RGB);
        // 获取 Graphics2D 对象
        Graphics2D g = image.createGraphics();
        // 设置背景色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, 100, 40);
        // 绘制验证码文本
        g.setColor(Color.BLACK);
        g.setFont(new Font("Arial", Font.BOLD, 20));
        g.drawString(captchaText, 20, 25);
        // 绘制干扰线
        for (int i = 0; i < 10; i++) {
            int x1 = random.nextInt(100);
            int y1 = random.nextInt(40);
            int x2 = random.nextInt(100);
            int y2 = random.nextInt(40);
            g.drawLine(x1, y1, x2, y2);
        }
        // 销毁 Graphics2D 对象
        g.dispose();
        return image;
    }
}

3. 在前端页面中，使用 Ajax 技术向后台请求生成验证码图片，并将生成的图片显示在页面上：

function reloadCaptcha() {
    // 生成随机数，避免浏览器缓存图片
    var randomNum = Math.floor(Math.random() * 100000);
    // 发送 Ajax 请求，获取验证码图片
    $.get("/captcha?rand=" + randomNum, function(data) {
        // 更新验证码图片的 src 属性
        $("#captchaImg").attr("src", "data:image/png;base64," + data);
    });
}

4. 在用户提交表单时，将用户输入的验证码与 session 中存储的验证码进行比对，以验证验证码是否正确：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public boolean login(String username, String password, String captcha, HttpSession session) {
        // 获取 session 中存储的验证码
        String captchaInSession = (String) session.getAttribute("captcha");
        // 比对验证码是否正确
        if (captchaInSession == null || !captchaInSession.equalsIgnoreCase(captcha)) {
            return false;
        }
        // 验证用户名和密码是否正确
        User user = userMapper.getUserByUsernameAndPassword(username, password);
        return user != null;
    }
}

以上就是一个基于 Spring + Spring MVC + MyBatis 框架的 ssm 验证码功能的实现示例。需要注意的是，该示例中的验证码生成算法较为简单，实际开发中应该使用更加复杂的算法来提高验证码的安全性。