easyui+spring+springmvc+ibatis学习（二）----之登陆实现

最新推荐文章于 2019-09-23 16:52:22 发布

小和尚哥哥

最新推荐文章于 2019-09-23 16:52:22 发布

阅读量1.4k

点赞数

文章标签： easyui 登陆 controler

本文链接：https://blog.csdn.net/xiaoshanghe/article/details/49848795

版权

登陆页面效果如下：

登陆的jsp页面代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登陆</title>
<jsp:include page="inital.jsp"></jsp:include>
<style type="text/css">
table tr td span{font-size: 20px;} 
</style>
 <script type="text/javascript">
   $(function(){
	   $('#save').click(function(){
          $('#loginForm').form('submit', {
            url:'${pageContext.request.contextPath}/userController/login',
            onSubmit: function(){
            	return $(this).form('enableValidation').form('validate');//easui校验非空字段
            },
            success: function(data){
               var data = eval('(' + data + ')');  // change the JSON string to javascript object   
                    if (data.success){   
                  			location.replace("${pageContext.request.contextPath}/index.jsp");
                    	 // window.location.href="${pageContext.request.contextPath}/index.jsp"; 
                    	 // window.redirect('${pageContext.request.contextPath}/index.jsp',_self)	;		          
                        
                    }   else{
                    	  $.messager.progress('close');	
                    	  $.messager.alert('错误', data.msg, 'error');
                    }
            }
          })
	   });
	   $('#cancle').click(function(){
       	location.href="login.jsp";//一种方式
       });
   });
   function changeImage() { 
	    var img = document.getElementById("validateImage"); 
	    img.src = "functions/createAuthCode.jsp?date=" + new Date();//加上一个随机数,防止重复 
	    $("#validatImg").show(); 
	   }
  </script> 
</head>
<body>
	<div class="easyui-navpanel">
		<header>
			<div align="center">
				<span style="font-size: xx-large;text-align: center;">登  陆  S S I E 平 台</span>
			</div>
		</header>
		<div style="margin:20px auto;width:200px;height:200px;border-radius:200px;overflow:hidden">
			<img src="jslib/easyui-1.4.3/demo-mobile/images/login1.jpg" style="margin:0">
		</div>
		<form action="" method="post" id="loginForm" data-options="novalidate:true" 
		class="easyui-form">
		<div style="padding:0 20px">
			<table align="center">
				<tr><td><span>用户名:</span></td>
				<td colspan="2" >
				<input class="easyui-textbox" data-options="prompt:'请输入用户名',iconCls:'icon-man'" 
				style="width:400px;height:38px" name="userNo" value="201509100000000001" >
				</td></tr>
				<tr><td><span>密   码:</span></td>
				<td colspan="2">
				<input class="easyui-textbox" data-options="prompt:'请输入用户 密码',iconCls:'icon-lock'" 
				style="width:100%;height:38px" type="password" name="userPassword" >
				</td></tr>
				<tr><td><span>验证码:</span></td>
				<td>
				<input class="easyui-textbox" data-options="prompt:'请输入验证码',iconCls:'icon-more'" 
				style="width:100%;height:38px" name="code" required="true">
				</td><td style="text-align: left;">
				<img src="${pageContext.request.contextPath}/functions/createAuthCode.jsp" id="validateImage" style="height: 30px;width: 40%">
				<a href="javascript:void(0);" οnclick="changeImage();">
					<span style="font-size: inherit;">看不清,换一张</span></a> 
				</td></tr>
			</table>
			<div style="text-align:center;margin-top:30px">
				<a href="javascript:void(0)" class="easyui-linkbutton" id="save" 
				style="width:100px;height:40px" ><span style="font-size:16px">登陆</span></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" id="cancle"
				style="width:100px;height:40px"	><span style="font-size:16px">取消</span></a> 
			</div>
		</div>
		</form>
	</div>
</body>
</html>

验证码的js控制如下：

<%@ page language="java" contentType="image/JPEG" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %>
<%!
Color genRandColor(int fc,int bc){//给定范围获得随机颜色
	Random random=new Random();
	if(fc>255)
		fc=255;
	if(bc>255)
		bc=255;
	int r=fc+random.nextInt(bc-fc);
	int g=fc+random.nextInt(bc-fc);
	int b=fc+random.nextInt(bc-fc);
	return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-catch");
response.setDateHeader("Expires", 0);

//在内存中创建图像
int width=60;
int height=20;
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//创建图像
Graphics g=image.getGraphics();
//设置背景颜色
g.setColor(genRandColor(200,250));
g.fillRect(0, 0, width, height);
//设定字体颜色
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
//生成随机对象
Random random=new Random();
//随机产生干扰线，使图像中德认证码不易被其他程序探测
g.setColor(genRandColor(160,200));
for(int i=0;i<100;i++){
	int x=random.nextInt(width);
	int y=random.nextInt(height);
	int xl=random.nextInt(12);
	int yl=random.nextInt(12);
	g.drawLine(x, y, x+xl, y+yl);
}
//随机产生四位验证码
String sRand="";
for(int i=0;i<4;i++){
	String rand=String.valueOf(random.nextInt(10));//  返回一个伪随机数，它是取自此随机数生成器序列的、在 0（包括）和指定值（不包括）之间均匀分布的 int 值
	sRand+=rand;
	//将验证码显示在图像中
	g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),
			20+random.nextInt(110)));调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
	g.drawString(rand, 13*i+6, 16);
}
//将认证码存入session
session.setAttribute("rand", sRand);
//图像生效
g.dispose();
//输出图像到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out=pageContext.pushBody();
%>

登陆的controller代码如下：

	/**
	 * 登陆
	 * @param list
	 * @return
	 */
	@RequestMapping(value="/login")
	@ResponseBody
	public void login(CjbUserInfo info,String code,HttpServletRequest reqeust,HttpServletResponse res){
		Json json=new Json();
		try{
			LOG.info("登陆的用户信息为："+info+";验证码为："+code);
			String authCode=(String)reqeust.getSession().getAttribute("rand");
			if(!code.equalsIgnoreCase(authCode)){
				throw new RuntimeException("输入验证码有误！");
			}
			info=cjbUserInfoService.getUserByUserNo(info.getUserNo());
			if(null!=info&&null!=info.getUserStatus()&&"1".equals(info.getUserStatus().trim())){
				reqeust.getSession().setAttribute("user", info);
				json.setSuccess(true);
				json.setMsg("登陆成功，用户为："+info.getUserName());
				json.setObject(info);
			}else if(null!=info&&null==info.getUserStatus()){
				throw new RuntimeException("该用户的状态异常！");
			}else if(null!=info&&null!=info.getUserStatus()&&"0".equals(info.getUserStatus().trim())){
				throw new RuntimeException("该用户已被禁用！");
			}else{
				throw new RuntimeException("无该用户信息！");
			}
		}catch(Exception e){
			json.setSuccess(false);
			json.setMsg("登陆失败："+e.getMessage());
			LOG.error(e.getMessage(), e);
		}
		returnToPage(res,json);
	}

ibatis的的查询语句：

<!-- 根据用户编号差询用户 -->        <!-- #表示替换PrepareStatement中的?号 -->
	<select id="getUserInfoByUserNo" resultMap="userMap" parameterClass="String">
		select * from cjb_user_info where user_no=#userNo#
	</select>

用户登录，在登录页面输入用户名和密码以及验证码，后台进行验证，验证通过则允许用户登录，并且将用户放入session中，后续页面进入进行校验是否有用户登陆