SSM框架下登录页面,图片验证码,密码加密对比数据库数据(二)

登录页面的Controller的代码如下:

在这过程中,需要对填入数据进行判断,是否为用户名存在?是否密码有误?是否验证码有误?如若都没有错误则页面跳转至登录成功页面。

@RequsetMapper("/login.do")
public @ResponseBody Map<String, Object> login(HttpServletRequest req,String validatecode,Model m,Userlist u){
	Map<String , Object> map =new HashMap<String,Object>();

	System.out.println(u.getUserAccount());
	Userlist us=userService.selectname(u.getUserAccount());//定义一个新的Userlist 并将数据库查到的值赋予它
	//数据库中没有该用户
	if(us == null){
		map.put("suc", false);
		map.put("error", "用户名不存在!");
		return map;
	}

	String md5pwd=StringUtil.encode(u.getUserPassword());

	if(!md5pwd.equals(us.getUserPassword())){
		map.put("suc", false);
		map.put("error", "密码错误!");
		return map;
		
	}
	String valiCode =(String)req.getSession().getAttribute("validateCode");   
	
	if(!validatecode.trim().equalsIgnoreCase(valiCode)){
		map.put("suc", false);
		map.put("error", "验证码错误!");
	    return map;
	}
	map.put("suc",true);//如果以上判断都不是,则说明登录成功!跳转成功页面。   
	map.put("url","index.do");
	return map;
}

页面AJAX的写法

这里需要注意的是JS,AJAX传值问题.var userAccount=$("#userAccount").val(); 这种方法传的是页面数据,可直接与数据库中数据进行比较。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
		function test(){
		
			var userAccount=$("#userAccount").val();
			var userPassword=$("#userPassword").val();
			var validatecode=$("#validatecode").val();
			
			var flag=true;
	        //报纸名称
	        if(userAccount=="") {
	          flag=false;
			  alert("用户名不能为空!");
			  return;
	        }
	        if(userPassword=="") {
	          flag=false;
			  alert("密码不能为空!");
			  return;
	        }
	        if(validatecode=="") {
	          flag=false;
			  alert("验证码不能为空!");
			  return;
	        }
	        $.ajax({
	        	url:'login.do',
	        	type:'post',
	        	data:'userAccount='+userAccount+'&userPassword='+userPassword+'&validatecode='+validatecode,
	        	datatype:'json',
	        	success: function(msg){
	        			if(msg.suc){
	        				location.href=msg.url;
	        			}else{
	        			   alert(msg.error);
	        			}
	        			
	        	}
	      
	        }) 
		}
		

页面表单数据。

 <tr>
        <td width="31%" height="35" class="login-text02">用户名称:<br /></td>
        <td width="69%"><input id="userAccount" name="userAccount" type="text" size="30" /></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">密 码:<br /></td>
        <td><input id="userPassword" name="userPassword" type="password" size="33" /></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">验证图片:<br /></td>
        <td><img id="imgcode" src="verifyCodeServlet?tm=<%=new Date() %>" width="109" height="40" /> <a href="javascript:void(0)" onclick="document.getElementById('imgcode').src='verifyCodeServlet?code='+Math.random();" class="login-text03">看不清楚,换张图片</a></td>
      </tr>
      <tr>
        <td height="35" class="login-text02">请输入验证码:</td>
        <td><input id="validatecode" name="validatecode" id="validatecode" type="text" size="30" /></td>
      </tr>
      <tr>
        <td height="35">&nbsp;</td>
        
        <td><input name="Submit" type="button" class="button" value="确认登陆"  onclick="test()"/>
  
      </tr>

猜你喜欢

转载自blog.csdn.net/baidu_38878945/article/details/82893609
今日推荐