用户在登录页面上填好姓名和密码还有验证码实现登录。
实现的效果如下:
输入信息后成功。
具体做法代码如下:
我们还是从Dao层开始:
这里用到的Dao层的代码无非就是查名字,查密码什么的。之前就有的,这里的不用了。
Service:这一层很重要:
先讲一下这一层要做的东西:
我们要做用户的登录验证。
1.根据传进来的id,去数据库查有没有这个用户,没有直接抛异常,有的话就继续下一步。
2.根据查到的用户sysuser.去查他的存在数据库里面的密码和我们在页面上的密码是不是一致的,一致的就继续,不一致的就直接抛异常。
3.接下来就把我们查到的那个用户的信息就全部设置到我们的一个对象ActiveUser(用户身份信息),然后把这对象当做结果返回 就可以了。
好,我们看具体的实现:
我们先看一下ActiveUser.java:
package yycg.base.pojo.vo; import java.util.Iterator; import java.util.List; import com.sun.org.apache.bcel.internal.generic.NEW; /** * 用户身份信息,存入session * 由于tomcat将session会序列化在本地硬盘上,所以使用Serializable接口 * @author Thinkpad * */ public class ActiveUser implements java.io.Serializable { private String userid;//用户账号 private String username;//用户名称 private String groupid;//用户类型非常重要 private String groupname;//用户类型名称 private Menu menu;//操作菜单 private List<Operation> operationList;//操作权限,包括用户点击菜单及操作菜单功能所有链接权限 private String sysid;//用户所属单位id private String sysmc;//单位名称 public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public String getGroupid() { return groupid; } public void setGroupid(String groupid) { this.groupid = groupid; } public String getSysid() { return sysid; } public void setSysid(String sysid) { this.sysid = sysid; } /*public String getLogintype() { return logintype; } public void setLogintype(String logintype) { this.logintype = logintype; }*/ public String getGroupname() { return groupname; } public List<Operation> getOperationList() { return operationList; } public void setOperationList(List<Operation> operationList) { this.operationList = operationList; } public void setGroupname(String groupname) { this.groupname = groupname; } public Menu getMenu() { return menu; } public void setMenu(Menu menu) { this.menu = menu; } public String getSysmc() { return sysmc; } public void setSysmc(String sysmc) { this.sysmc = sysmc; } /* public Operation getActionUrl(String actionUrl) { if (operationList != null) { for (Iterator<Operation> o_list = operationList.iterator(); o_list.hasNext();) { Operation o_i = (Operation) o_list.next(); if (actionUrl.indexOf(o_i.getActionUrl())>0) { return o_i; } } } return null; }*/ }
上面的ActiveUse.java有两个依赖项:我们来看一下:
Menu.java:
package yycg.base.pojo.vo; import java.util.List; /** * 菜单模型类 * @author mrt * */ public class Menu { //二级菜单 private List<Menu> menus; //菜单id、模块id private String menuid; //图标 private String icon; //菜单名称/模块名称 private String menuname; //菜单链接 private String url; //菜单下的各各操作链接为了权限链接 private List<Operation> operations; public List<Menu> getMenus() { return menus; } public void setMenus(List<Menu> menus) { this.menus = menus; } public String getMenuid() { return menuid; } public void setMenuid(String menuid) { this.menuid = menuid; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public String getMenuname() { return menuname; } public void setMenuname(String menuname) { this.menuname = menuname; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public List<Operation> getOperations() { return operations; } public void setOperations(List<Operation> operations) { this.operations = operations; } @Override public String toString() { return "Menu [menus=" + menus + ", menuid=" + menuid + ", icon=" + icon + ", menuname=" + menuname + ", url=" + url + "]"; } }
还有Operation.java:
package yycg.base.pojo.vo; import java.io.Serializable; import java.util.List; /** * 菜单下的操作模型类,配置菜单下各各操作链接是为了进行用户权限拦截 * @author mrt * */ public class Operation implements Serializable { private static final long serialVersionUID = -5432351755716171044L; /**action的地址*/ private String actionUrl; /**操作的图标,暂时不用*/ private String icon; /**操作的id,唯一标识,暂时不用*/ private String operationId; /**操作的名称*/ private String operationName; public Operation(){ } public Operation(String actionUrl){ this.actionUrl = actionUrl; } public String getActionUrl() { return actionUrl; } public void setActionUrl(String actionUrl) { this.actionUrl = actionUrl; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public String getOperationId() { return operationId; } public void setOperationId(String operationId) { this.operationId = operationId; } public String getOperationName() { return operationName; } public void setOperationName(String operationName) { this.operationName = operationName; } @Override public int hashCode() { final int prime = 31; int result = 1; result = prime * result + ((actionUrl == null) ? 0 : actionUrl.hashCode()); return result; } @Override public boolean equals(Object obj) { if (this == obj) return true; if (obj == null) return false; if (getClass() != obj.getClass()) return false; Operation other = (Operation) obj; if (actionUrl == null) { if (other.actionUrl != null) return false; } else if (actionUrl.indexOf(other.actionUrl)<0 && other.actionUrl.indexOf(actionUrl)<0) return false; return true; } }
最后来看Service层的实现代码:
public class userServiceimpl implements UserService {
..........
/** * 检验用户的登录 * 返回的是用户信息存入到ActiveUser */ @Override public ActiveUser checkUserInfo(String userid, String pwd) throws Exception { //根据传入的userid去查数据库中,有没有这个用户 Sysuser sysuser=this.findSysuerByUserid(userid); ActiveUser activeUser=new ActiveUser(); if(sysuser==null)//表明根据这个用户id ,没有查到我们用户,用户不存在 { //用户不存在当然要抛出异常了 ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 101, null)); } String pwdString=sysuser.getPwd(); String md5_pdString=new MD5().getMD5ofStr(pwd);//因为我们传入的pwd是用户输入的密码,而我们要去比较的 //是数据库里面经过MD5加密处理过的密码。所以我们要先把用户输入的密码进行MD5加密,然后才能去和数据库中的 //的密码做比较(记住是不区分大小写的比较。) //查到用户后,去查这个用户的密码,是不是与我传进来的密码是一样的 if(!pwdString.equalsIgnoreCase(md5_pdString)) {//说明传入的密码与用户设置的密码不同,抛出异常 ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 114, null)); } /**
把单位的信息查出来
**/
String groupid=sysuser.getGroupid();//用户类型 String Sysid=sysuser.getSysid();//单位id String sysmc=null;//单位表的idsysmc if(groupid.equals("1")||groupid.equals("2")) {//监督单位 //根据单位的主键查找单位信息 Userjd userjd=userjdMapper.selectByPrimaryKey(Sysid); if(userjd==null) { //throw new Exception("单位名称输入错误"); //使用系统自定义的异常类 ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 204, null)); } sysmc=userjd.getMc(); } //卫生室 else if(groupid.equals("3")) { //根据单位名称查询单位的信息,查不到就报错 Useryy useryy=useryyMapper.selectByPrimaryKey(Sysid); if(useryy==null) { //throw new Exception("单位名称输入错误"); //使用系统自定义的异常类 ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 204, null)); } sysmc=useryy.getMc(); } else if(groupid.equals("4")){ Usergys usergys=usergysMapper.selectByPrimaryKey(Sysid); if(usergys==null) { //throw new Exception("单位名称输入错误"); //使用系统自定义的异常类 ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 204, null)); } sysmc=usergys.getMc(); } //前两步都通过的话,这里就把用户的信息设置到ActiveUser,然后返回。 activeUser.setGroupid(sysuser.getGroupid()); activeUser.setGroupname(sysuser.getUsername()); activeUser.setSysid(sysuser.getSysid()); activeUser.setUserid(sysuser.getUserid()); activeUser.setUsername(sysuser.getUsername()); //把单位信息也填入进去。 activeUser.setSysmc(sysmc); return activeUser; }
我们在来看一下Action的代码:
我们重新定义一个Action:LoginAction:
package yycg.base.action; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import yycg.base.pojo.vo.ActiveUser; import yycg.base.process.context.Config; import yycg.base.process.result.ResultUtil; import yycg.base.process.result.SubmitResultInfo; import yycg.base.service.UserService; @Controller public class LoginAction { @Autowired UserService userService; @RequestMapping("/logining.action") public String loging() { return "/base/login"; //转到登录页面。 } @RequestMapping("/loginsubmit") public @ResponseBody SubmitResultInfo loginsubmit(HttpSession session,String userid,String pwd,String randomcode)throws Exception { String validateCode_session=(String)session.getAttribute("validateCode"); //如果找到Session中传入的validateCode而且从页面中传入的validateCode不等于从网络中得到的那个值的话 if(validateCode_session!=null&&!validateCode_session.equals(randomcode)) { ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 113, null)); } //如果验证码那关过了的话,就用户验证。 ActiveUser activeUser=userService.checkUserInfo(userid, pwd); //如果用户验证那关都过了的话,就可以把用户的身份信息写入到Session中了 session.setAttribute(Config.ACTIVEUSER_KEY, activeUser); return ResultUtil.createSubmitResult(ResultUtil.createFail(Config.MESSAGE, 107, new Object[]{})); } }
我们再看一下页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ page contentType="text/html; charset=UTF-8"%> <%@ include file="/WEB-INF/jsp/base/tag.jsp"%> <html> <head> <TITLE><fmt:message key="title" bundle="${messagesBundle}" /></TITLE> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <LINK rel="stylesheet" type="text/css" href="${baseurl}styles/style.css"> <LINK rel="stylesheet" type="text/css" href="${baseurl}styles/login.css"> <LINK rel="stylesheet" type="text/css" href="${baseurl}js/easyui/themes/default/easyui.css"> <LINK rel="stylesheet" type="text/css" href="${baseurl}js/easyui/themes/icon.css"> <STYLE type="text/css"> .btnalink { cursor: hand; display: block; width: 80px; height: 29px; float: left; margin: 12px 28px 12px auto; line-height: 30px; background: url('${baseurl}images/login/btnbg.jpg') no-repeat; font-size: 14px; color: #fff; font-weight: bold; text-decoration: none; } </STYLE> <%@ include file="/WEB-INF/jsp/base/common_js.jsp"%> <script type="text/javascript"> $(document).ready(function(){ //*****************表单校验****************** $.formValidator.initConfig({ formID : "loginform", mode:'AlertTip', onError : function(msg) { alert(msg); }, onAlert : function(msg) { alert(msg); } }); $("#userid").formValidator({ onShow : "", onCorrect:" " }).inputValidator({ min : 1, onError:"请输入用户名" }); $("#password").formValidator({ onShow : "", onCorrect:" " }).inputValidator({ min : 1, onError:"请输入密码" }); $("#randomcode").formValidator({ onShow : "", onCorrect:" " }).inputValidator({ min : 1, onError:"请输入验证码" }); //*****************表单校验****************** }); //校验表单输入 function checkinput() { //return $('#loginform').form('validate'); return $.formValidator.pageIsValid(); } //登录提示方法 function loginsubmit() { if(checkinput()){//校验表单,如果校验通过则执行jquerySubByFId //ajax form提交 jquerySubByFId('loginform', login_commit_callback,null,'json'); } } //登录提示回调方法 function login_commit_callback(data) { message_alert(data); var type = data.resultInfo.type; if (1 == type) {//如果登录成功,这里1秒后执行跳转到首页 setTimeout("tofirst()", 1000); } else { //登录错误,重新刷新验证码 randomcode_refresh(); } } //刷新验证码 //实现思路,重新给图片的src赋值,后边加时间,防止缓存 function randomcode_refresh() { $("#randomcode_img").attr('src', '${baseurl}validatecode.jsp?time' + new Date().getTime()); } //回首页 function tofirst(){ if(parent.parent.parent){ parent.parent.parent.location='${baseurl}first.action'; }else if(parent.parent){ parent.parent.location='${baseurl}first.action'; }else if(parent){ parent.location='${baseurl}first.action'; }else{ window.location='${baseurl}first.action'; } //window.location='${baseurl}first.action'; } </SCRIPT> </HEAD> <BODY style="background: #f6fdff url(${baseurl}images/login/bg1.jpg) repeat-x;"> <FORM id="loginform" name="loginform" action="${baseurl}loginsubmit.action" method="post"> <DIV class="logincon"> <DIV class="title"> <IMG alt="" src="${baseurl}images/login/logo.png"> </DIV> <DIV class="cen_con"> <IMG alt="" src="${baseurl}images/login/bg2.png"> </DIV> <DIV class="tab_con"> <input type="password" style="display:none;" /> <TABLE class="tab" border="0" cellSpacing="6" cellPadding="8"> <TBODY> <TR> <TD>用户名:</TD> <TD colSpan="2"><input type="text" id="userid" name="userid" style="WIDTH: 130px" /></TD> </TR> <TR> <TD>密 码:</TD> <TD><input type="password" id="password" name="pwd" style="WIDTH: 130px" /> </TD> </TR> <TR> <TD>验证码:</TD> <TD><input id="randomcode" name="randomcode" size="8" /> <img id="randomcode_img" src="${baseurl}validatecode.jsp" alt="" width="56" height="20" align='absMiddle' /> <a href=javascript:randomcode_refresh()>刷新</a></TD> </TR> <TR> <TD colSpan="2" align="center"><input type="button" class="btnalink" onclick="loginsubmit()" value="登 录" /> <input type="reset" class="btnalink" value="重 置" /></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </FORM> </BODY> </HTML>
这里涉及到一个验证码的东西:我们看一下实现代码:
validatecode.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.Random"%> <%@ page import="java.io.OutputStream"%> <%@ page import="java.awt.Color"%> <%@ page import="java.awt.Font"%> <%@ page import="java.awt.Graphics"%> <%@ page import="java.awt.image.BufferedImage"%> <%@ page import="javax.imageio.ImageIO"%> <% int width = 60; int height = 32; //create the image BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); // set the background color g.setColor(new Color(0xDCDCDC)); g.fillRect(0, 0, width, height); // draw the border g.setColor(Color.black); g.drawRect(0, 0, width - 1, height - 1); // create a random instance to generate the codes Random rdm = new Random(); String hash1 = Integer.toHexString(rdm.nextInt()); System.out.print(hash1); // make some confusion for (int i = 0; i < 50; i++) { int x = rdm.nextInt(width); int y = rdm.nextInt(height); g.drawOval(x, y, 0, 0); } // generate a random code String capstr = hash1.substring(0, 4); //将生成的验证码存入session session.setAttribute("validateCode", capstr); g.setColor(new Color(0, 100, 0)); g.setFont(new Font("Candara", Font.BOLD, 24)); g.drawString(capstr, 8, 24); g.dispose(); //输出图片 response.setContentType("image/jpeg"); out.clear(); out = pageContext.pushBody(); OutputStream strm = response.getOutputStream(); ImageIO.write(image, "jpeg", strm); strm.close(); %>
到这里就做好了。
我们在url中输入http://127.0.0.1:8080/yycgproject/logining.action进行调试。
调试没问题。
总结如下:
用户登陆功能实现。
登陆页面上要有验证码:随机产生代码,将代码存入session。
validatecode.jsp(验证码jsp)
随机产生代码存入session:
Service:
接口功能:校验用户身份信息
接口参数:用户账号、用户密码
接口返回值:用户身份信息
定义activeuser作为用户身份信息
校验用户身份信息service:
Action :
// 用户登陆提交
@RequestMapping("/loginsubmit")
public @ResponseBody
SubmitResultInfo loginsubmit(HttpSession session, String userid, String pwd,String validateCode)
throws Exception {
//校验验证码
String validateCode_session = (String) session.getAttribute("validateCode");
if(validateCode_session!=null && !validateCode_session.equals(validateCode)){
//验证码输入错误
ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 113,
null));
}
// service,用户认证
ActiveUser activeUser = userService.checkUserInfo(userid, pwd);
// 将用户身份信息写入session
session.setAttribute(Config.ACTIVEUSER_KEY, activeUser);
return ResultUtil.createSubmitResult(ResultUtil.createSuccess(
Config.MESSAGE, 107, new Object[] { "" }));
}
页面:
login.jsp
使用AJAX的form提交用户账号和密码及验证码
用户登陆功能实现。
登陆页面上要有验证码:随机产生代码,将代码存入session。
validatecode.jsp(验证码jsp)
随机产生代码存入session:
Service:
接口功能:校验用户身份信息
接口参数:用户账号、用户密码
接口返回值:用户身份信息
定义activeuser作为用户身份信息
校验用户身份信息service:
Action :
// 用户登陆提交
@RequestMapping("/loginsubmit")
public @ResponseBody
SubmitResultInfo loginsubmit(HttpSession session, String userid, String pwd,String validateCode)
throws Exception {
//校验验证码
String validateCode_session = (String) session.getAttribute("validateCode");
if(validateCode_session!=null && !validateCode_session.equals(validateCode)){
//验证码输入错误
ResultUtil.throwExcepion(ResultUtil.createFail(Config.MESSAGE, 113,
null));
}
// service,用户认证
ActiveUser activeUser = userService.checkUserInfo(userid, pwd);
// 将用户身份信息写入session
session.setAttribute(Config.ACTIVEUSER_KEY, activeUser);
return ResultUtil.createSubmitResult(ResultUtil.createSuccess(
Config.MESSAGE, 107, new Object[] { "" }));
}
页面:
login.jsp
使用AJAX的form提交用户账号和密码及验证码
关于表单校验:
在预加载方法设置表单的校验规则:
详细参考下边的目录中demo。
如果登陆成功跳转首页
否则刷新验证码。
关于表单校验:
在预加载方法设置表单的校验规则:
详细参考下边的目录中demo。
如果登陆成功跳转首页
否则刷新验证码。