idea+springboot带验证码版登录全解

文轩斋院

已于 2023-05-16 15:35:39 修改

阅读量246

点赞数 1

于 2023-05-12 08:23:43 首次发布

本文链接：https://blog.csdn.net/weixin_62391839/article/details/130634296

版权

由于不能直接跳转，需要方法跳页面

pageController层跳页面：

@RequestMapping("pageLogin")
    public String pageLogin(){
        return "login";
    }

    @RequestMapping("pageIndex")
    public String pageIndex(){
        return "index";
    }

下一步，开始写后台登录

controller层登录+验证码

@RequestMapping("loginQuery")
    public Integer loginQuery(UserBean userbean, HttpSession session) throws UnknownHostException {
        return loginService.loginQuery(userbean, session);
    }
    @RequestMapping("gainCode")
    public void gainCode(HttpServletRequest request, HttpServletResponse response){
        CheckImgUtil.buildCheckImg(request,response);
    }

在service实现类上

 Integer code=0;
        String imgCode = (String) session.getAttribute("checkcode");
        if (!imgCode.equalsIgnoreCase(userbean.getImgCode())) {//判断验证码
            code = 4;
        } else {
            QueryWrapper<UserBean> wrapper = new QueryWrapper<>();
            UserBean user = longinDao.selectOne(wrapper.eq("userName", userbean.getUserName()));
            if (user == null) {
                code = 2;
            } else {
                if (!user.getUserPwd().equals(userbean.getUserPwd())) {
                    code = 3;
                } else {
                    code = 1;
                    session.setAttribute("bean", user);
                }
            }

        }
        return code;
    }

然后就是前台页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!-- 引入bootstrap的css -->
	<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
	<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">

	<!-- 必须先引入jquery的js -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<!-- 引入bootstrap的js -->
	<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

	<!-- 引入bootbox的js文件 弹框 -->
	<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
</head>
<body style="text-align: center;padding-top: 80px">
<h1>登录页面</h1>
<div class="container">
	<form class="form-horizontal" id="loginForm">
		<div class="form-group">
			<label  class="col-md-2 control-label col-md-offset-3">用户名：</label>
			<div class="col-md-3">
				<input class="form-control" type="text" id="userName" placeholder="请输入用户名" name="userName">
			</div>
		</div>
		<div class="form-group">
			<label  class="col-md-2 control-label col-md-offset-3">密码：</label>
			<div class="col-md-3">
				<input class="form-control" type="text" id="userPwd" placeholder="请输入密码" name="userPwd">
			</div>
		</div>
		<div class="form-group">
			<label for="imgCode" class="col-md-2 control-label col-md-offset-3">验证码：</label>
			<div class="col-md-3">
				<input class="form-control" id="imgCode" placeholder="请输入验证码" name="imgCode">
			</div>
		</div>
		<div class="form-group">
			<label  class="col-md-2 control-label col-md-offset-3"></label>
			<div class="col-md-3">
				<img id="imgCode2" src="../login/gainCode" onclick="refCode()">
				<a href="javascript:refCode()">看不清，换一张</a>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-1 col-md-offset-5">
				<button type="button" class="btn btn-danger glyphicon glyphicon-plus" onclick="regis()">注册</button>
			</div>
			<div class="col-md-1">
				<button type="button" class="btn btn-success glyphicon glyphicon-ok" onclick="login()">登录</button>
			</div>
		</div>
	</form>
</div>
</body>
<script type="text/javascript">
	//刷新验证码
	function refCode(){
		//jquery :   attr("属性名","属性值")  prop("属性名","属性值")
		$("#imgCode2").attr("src","/login/gainCode?"+new Date().getTime());
	}
	//跳注册页面
	function regis(){
		location.href="/register";
	}
	//精确登录
	function login(){
		$.ajax({
			url:"../login/loginQuery",
			type:"post",
			data:$("#loginForm").serialize(),
			dataType:"json",
			success:function(data){
				if(data==1){
					data="登录成功";
				}else if(data==2){
					data="用户名不存在";
				}else if(data==3){
					data="密码错误";
				}else {
					data="验证码错误";
				}
				bootbox.alert({
					size:"small",
					title:"提示",
					message:data,
					buttons:{
						ok:{
							label:"确定",
							className:"btn-success glyphicon glyphicon-ok"
						}
					}
				});

				if(data=="登录成功"){
					//跳转到index页面
					location.href="../page/pageIndex";
				}
			}
		})
	}
</script>
</html>

总结：如果是无验证码版登录，去掉controller中的gainCode方法，在前端页面去掉相应到验证码获取，就可以实现无验证码版登录