之前的文章中我们已经搭建好框架，并且设计好了，数据库。
现在我们开始实现登录功能，这个可以说是Web应用最最最普遍的功能了。
先来说说我们登录的逻辑：
输入用户名、密码(validate进行前端验证)——ajax调用后台action方法——根据用户名调用业务层到数据层查询数据库信息——查询的密码跟用户输入的密码比对——shiro登录身份验证——将用户信息存入session——响应前端——前端跳转
这个是我要告诉大家的姿势，还有很多很多的姿势。下面我们来看具体的代码。
首先前端验证，这里使用了jquery.validate来进行验证，jquery.validate的使用很简单，这里我们说说存js的方式：
$().ready(function() { /**登录验证**/ $("#login_form").validate({ rules: { loginAccount: "required", loginPass: { required: true, minlength: 5 }, }, messages: { loginAccount: "请输入姓名", loginPass: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字 符") }, }, submitHandler:function(form){ $.ajax({ dataType : "json", url : "sysuser/login.action", type : "post", data : $("#login_form").serialize(), success : function(data) { $.alert(data.message); if(data.success){ window.location.href = 'page/main.action'; } }, error : function (e){ var d = e.responseJSON; if(d){ $.alert(d.message); } } }); return false; //阻止form提交 } }); /**注册验证**/ $("#register_form").validate({ rules: { loginAccount:{ required:true, remote: { url: "sysuser/getUserNameCount.action", type: "post", dataType: "json", data: { loginAccount: function () { return $("#register_account").val(); } }, dataFilter: function (data) { //判断控制器返回的内容 data = jQuery.parseJSON(data); return data.success; } } }, loginPass: { required: true, minlength: 5, maxlength:20 }, rloginPass: { equalTo: "#register_password" }, userEmail: { required: true, email: true, remote: { url: "sysuser/getEMailCount.action", type: "post", dataType: "json", data: { email: function () { return $("#register_email").val(); } }, dataFilter: function (data) { //判断控制器返回的内容 data = jQuery.parseJSON(data); return data.success; } } } }, messages: { loginAccount:{ required: "请输入姓名", remote: "用户名已存在" }, loginPass: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字 符"), maxlength: jQuery.format("密码不能大于{0}个字 符"), }, rloginPass: { required: "请输入确认密码", equalTo: "两次密码不一样" }, userEmail: { required: "请输入邮箱", email: "请输入有效邮箱", remote: "邮箱已存在" } }, submitHandler:function(form){ $.ajax({ dataType : "json", url : "sysuser/register.action", type : "post", data : $("#register_form").serialize(), success : function(data) { $.alert(data.message); if(data.success){ window.location.href = 'page/main.action'; } }, error : function (e){ var d = e.responseJSON; if(d){ $.alert(d.message); } } }); return false; //阻止form提交 } }); /**隐藏显示登录注册**/ $("#register_btn").click(function() { $("#register_form").css("display", "block"); $("#login_form").css("display", "none"); }); $("#back_btn").click(function() { $("#register_form").css("display", "none"); $("#login_form").css("display", "block"); }); });
html页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <meta content=""> <meta content=""> <title>主页</title> <!-- Bootstrap core CSS --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css"> <link href="${contextPath }/static/bootstrap/css/font-awesome.min.css"> <link href="${contextPath }/static/alert/jquery-confirm.min.css"> <style type="text/css"> body { background: url(${contextPath }/static/img/login/bg.jpg) no-repeat; background-size: cover; font-size: 16px; } .form { background: rgba(255, 255, 255, 0.2); width: 400px; margin: 100px auto; } #login_form { display: block; } #register_form { display: none; } .fa { display: inline-block; top: 27px; left: 6px; position: relative; color: #ccc; } input[type="text"], input[type="password"] { padding-left: 26px; } .checkbox { padding-left: 21px; } </style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="${contextPath }/static/bootstrap/html5shiv/html5shiv.js"></script> <script src="${contextPath }/static/bootstrap/respond/respond.min.js"></script> <![endif]--> </head> <body> <div> <div> <form> <h3>登录</h3> <div> <div> <i></i> <input type="text" placeholder="请输入账号" autofocus="autofocus" maxlength="20" /> </div> <div> <i></i> <input type="password" placeholder="请输入密码" maxlength="8" /> </div> <div> <label> <input type="checkbox" value="1" /> 记住我 </label> <hr /> <a href="javascript:;">注册？</a> </div> <div> <input type="submit" value="登录 " /> </div> </div> </form> </div> <div> <form> <h3>注册</h3> <div> <div> <i></i> <input type="text" placeholder="请输入账号" autofocus="autofocus" /> </div> <div> <i></i> <input type="password" placeholder="请输入密码" /> </div> <div> <i></i> <input type="password" placeholder="请输入确认密码" /> </div> <div> <i></i> <input type="text" placeholder="Email"/> </div> <div> <input type="submit" value="注册" /> <input type="submit" value="返回" /> </div> </div> </form> </div> </div> <script type="text/javascript" src="${contextPath }/static/jquery/jquery.min.js"></script> <script type="text/javascript" src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="${contextPath }/static/alert/jquery-confirm.min.js" ></script> <script type="text/javascript" src="${contextPath }/static/jquery/jquery.validate.min.js" ></script> <script type="text/javascript" src="${contextPath }/static/login/login.js" ></script> </body> </html>