Hutool 验证码案例

项目结构

所学jar包

hutool、fastjson

生成验证码业务逻辑

package com.bjpowernode.code;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/imagecode")
public class ImageCodeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建验证码对象
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(100, 50, 4, 10);
        //获取验证码字符串
        String code = lineCaptcha.getCode();
        //将验证码 放入到session中
        req.getSession().setAttribute("code",code);
        //将验证码输出
        lineCaptcha.write(resp.getOutputStream());
    }
}

登录业务逻辑

package com.bjpowernode.login;

import com.alibaba.fastjson.JSON;
import com.bjpowernode.result.JSONResult;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置post请求乱码
        req.setCharacterEncoding("utf-8");
        //设置响应的数据格式
        resp.setContentType("application/json;charset=utf-8");

        JSONResult jsonResult = new JSONResult();
        PrintWriter writer = resp.getWriter();

        String username = req.getParameter("username");
        String pwd = req.getParameter("pwd");
        String code = req.getParameter("code");

        if(code==null||code.equals("")){
            jsonResult.mark("验证码不能为空");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        // 获取服务器端保存的验证码
        String sessionCode = (String) req.getSession().getAttribute("code");
        if(sessionCode==null||sessionCode.equals("")){
            jsonResult.mark("验证码错误");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        if(!sessionCode.equalsIgnoreCase(code)){
            jsonResult.mark("验证码错误");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        if(username==null||username.equals("")){
            jsonResult.mark("账号不能为空");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        if(pwd ==null||pwd .equals("")){
            jsonResult.mark("密码不能为空");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        if(!username.equals("admin")&&pwd.equals("123")){
            jsonResult.mark("登录失败");
            writer.write(JSON.toJSONString(jsonResult));
            return;
        }

        writer.write(JSON.toJSONString(jsonResult));

    }
}

成功失败返回结果类

package com.bjpowernode.result;

public class JSONResult {
    private boolean success = true;
    private String errorMsg;

    public JSONResult mark(String msg){
        this.errorMsg = msg;
        this.success = false;
        return this;
    }

    public boolean isSuccess() {
        return success;
    }

    public String getErrorMsg() {
        return errorMsg;
    }
}

登录页面login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.1.js"></script>
</head>
<body>
<form id="formId" action="/login" method="post">
    姓名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="pwd"/><br/>
    验证码：<input type="text" name="code"/>
    <img src="/imagecode" width="100px" onclick="changeCode(this)"><br>

    <span style="color: red" id="tip"></span>
    <input id="btnId" type="button" value="登录">

</form>
</body>
<script>
    // $(function () {
    //     console.log(1);
    //     var serialize = $("#formId").serialize();
    //     console.log(serialize);
    //     console.log("----------------------")
    //     var serializeArray = $("#formId").serializeArray();
    //     console.log(serializeArray);
    //
    // })
    window.onload = function () {
        $("#btnId").click(function () {
            $.post("/login",$("#formId").serialize(),function(data){
                 console.log($("#formId").serialize());
                if(data.success){
                    alert("登录成功");
                }else{
                    $("#tip").text(data.errorMsg)
                }
            })
        })
    }
    function changeCode(self) {
        // 原生JS
        // self.src = "/imagecode?time="+new Date();
        // self.setAttribute("src","/imagecode?time="+new Date());

        // AJAX
        // $(self).prop("src","/imagecode?time="+new Date());
        $(self).attr("src","/imagecode?time="+new Date());
    }
</script>
</html>