1.获取验证码以及验证码变换

  // 改变验证码图片
   function chageImg(){
       document.getElementById("captchaPic").src="/captcha/getCode?time="+new Date().getTime()
   }

import cn.hutool.captcha.LineCaptcha;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;


@Controller
@RequestMapping("captcha")
public class CaptchaController {

    //获取验证码
    @RequestMapping("getCode")
    public void  getCode(HttpServletResponse response , HttpSession session){
        LineCaptcha lineCaptcha = new LineCaptcha(110, 50, 4, 3);

        String code = lineCaptcha.getCode();
        session.setAttribute("code", code);

        try {
            ServletOutputStream outputStream = response.getOutputStream();
            lineCaptcha.write(outputStream);
            outputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

2.登录验证

在登陆页面填写账户，密码，验证码后  点击登录键获取填写的信息

判断用户名，密码，验证码不为空

通过ajax发送get请求 并携带填写信息data 给与后台 返回结果 res

根据后台返回结果 判断res.code是否为0   为0 跳转主页

  // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }

            //  发送ajax请求进行登录认证
            $.get('/user/login',data,function (res) {
                if(res.code==0){
                    layer.msg(res.msg,{icon:1},function () {
                        window.location.href="index.html"   // 通过后台请求进行页面跳转     /user/toIndex   转发到 主页面
                    })
                }else{
                    layer.msg(res.msg)
                }
            })
            return false;
        });

前端发送请求 后台接收信息  并向前端返回ResponseResult类型的结果

得到ResponseResult类型的结果步骤：

controller层

判断验证码是否正确

 @RequestMapping("login")
    public ResponseResult login(String username,String password, String captcha,@SessionAttribute("code") String code){
        ResponseResult responseResult = new ResponseResult();
        if(code.equals(captcha)){
            responseResult =  userService.login(username,password);
        }else{
            responseResult.setMsg("验证码不正确");
            responseResult.setCode(500);
        }

        return responseResult ;
    }

 service层

通过  userMapper.selectAll(username) 从数据库中查询数据

若users.size()>0 说明从数据库中查询到该账户  否则该用户不存在

密码匹配 

判断账户状态 status为0 需要联系管理员解封账号  为1 登陆成功

   @Override
    public ResponseResult login(String username, String password) {
        ResponseResult responseResult = new ResponseResult();

        List<User> users = userMapper.selectAll(username);
        if(users.size()>0){
            User user = users.get(0);
            String md5pwd = user.getPassword();
            if(md5pwd.equals(SecureUtil.md5(password))){
                if(user.getStatus()==0){
                    responseResult.setCode(500);
                    responseResult.setMsg("账号被锁定，请联系管理员");
                }else{
                    responseResult.setCode(0);
                    responseResult.setMsg("登录成功");
                }
            }else{
                responseResult.setCode(500);
                responseResult.setMsg("密码不正确");
            }

        }else{
            responseResult.setCode(500);
            responseResult.setMsg("用户名不存在");
        }
        return responseResult;
    }