Spring shiro + bootstrap + jquery.validate 实现登录、注册功能

之前的文章中我们已经搭建好框架，并且设计好了，数据库。

现在我们开始实现登录功能，这个可以说是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 name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>主页</title>
<!-- Bootstrap core CSS -->
<link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<link href="${contextPath }/static/bootstrap/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">
<link href="${contextPath }/static/alert/jquery-confirm.min.css" rel="external nofollow" rel="stylesheet">
<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 class="container">
  <div class="form row">
   <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
    <h3 class="form-title">登录</h3>
    <div class="col-sm-9 col-md-9">
     <div class="form-group">
      <i class="fa fa-user fa-lg"></i> <input
       class="form-control required" type="text" placeholder="请输入账号"
       name="loginAccount" autofocus="autofocus" maxlength="20" />
     </div>
     <div class="form-group">
      <i class="fa fa-lock fa-lg"></i> <input
       class="form-control required" type="password"
       placeholder="请输入密码" name="loginPass" maxlength="8" />
     </div>
     <div class="form-group">
      <label class="checkbox"> <input type="checkbox"
       name="rememberMe" value="1" /> 记住我
      </label>
      <hr />
      <a href="javascript:;" rel="external nofollow" id="register_btn" class="">注册？</a>
     </div>
     <div class="form-group">
      <input type="submit" class="btn btn-success pull-right" value="登录 " />
     </div>
    </div>
   </form>
  </div>
  <div class="form row">
   <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
    <h3 class="form-title">注册</h3>
    <div class="col-sm-9 col-md-9">
     <div class="form-group">
      <i class="fa fa-user fa-lg"></i> <input
       class="form-control required" type="text" placeholder="请输入账号"
       name="loginAccount" autofocus="autofocus" id="register_account" />
     </div>
     <div class="form-group">
      <i class="fa fa-lock fa-lg"></i> <input
       class="form-control required" type="password"
       placeholder="请输入密码" id="register_password" name="loginPass" />
     </div>
     <div class="form-group">
      <i class="fa fa-check fa-lg"></i> <input
       class="form-control required" type="password"
       placeholder="请输入确认密码" name="rloginPass" />
     </div>
     <div class="form-group">
      <i class="fa fa-envelope fa-lg"></i> <input
       class="form-control eamil" type="text" placeholder="Email"
       name="userEmail" id="register_email"/>
     </div>
     <div class="form-group">
      <input type="submit" class="btn btn-success pull-right"
       value="注册" /> <input type="submit"
       class="btn btn-info pull-left" id="back_btn" 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> 

在$("#login_form").validate({...})方法中，login_form为你要验证的form的id；rules为要验证的字段；messages为要提示的内容，如果不填写，则会提示默认信息；submitHandler为点击提交(submit)按钮后的回调方法，这里面最后的return false是为了阻止form表单的提交，因为我这里要用ajax的方式提交；在注册中的loginAccount字段有一个属性remote这个是为了做ajax验证的，在没有提交表单之前，我们就验证用户输入的用户名是否在系统中已经存在。

我们在编程总，发现总是会有那么几个方法在相同的代码层总用到，比如在控制层中获取用户session，或者输出响应信息等；在dao层中调用Hibernate的save方法，update方法，delete方法等。所以我们应该在框架搭建的初期去建立一些通用的工具类或者是Base方法，下面我们新建BaseController方法，并且让后面的控制器都来继承它。

import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.ModelAttribute;
import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonFactory;
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.ObjectMapper;
import yfkj.gz.task.entity.SysUser;
import yfkj.gz.task.util.Result;
/**
 * 父类控制器
 * @author 胡汉三
 * @date 2017年1月9日 下午5:23:52
 */
@SuppressWarnings("deprecation")
public class BaseController{
 public static final String USER_SESSION = "USER_SESSION";
 protected static ObjectMapper mapper = new ObjectMapper();
 protected static JsonFactory factory = mapper.getJsonFactory();
 protected static Result result = new Result();
 protected HttpServletRequest request;
 protected HttpServletResponse response;
 protected HttpSession session;
 @ModelAttribute
 public void setReqAndRes(HttpServletRequest request, HttpServletResponse response){
  this.request = request;
  this.response = response;
  this.session = request.getSession();
 }
 /**将json字符串输出**/
 protected void writeJSON(String json) throws IOException {
  response.setContentType("text/html;charset=utf-8");
  response.getWriter().write(json);
 }
 /**将对象转成json输出**/
 protected void writeJSON(Object obj) throws IOException {
  response.setContentType("text/html;charset=utf-8");
  JsonGenerator responseJsonGenerator = factory.createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
  responseJsonGenerator.writeObject(obj);
 }
 /**
  * 获得session用户对象
  * @return
  */
 protected SysUser getUser(){
  Object userObj = session.getAttribute(USER_SESSION);
  if(userObj == null){
   return null;
  }
  return (SysUser)userObj;
 }
} 

用户的控制器SysUserController：

package yfkj.gz.task.controller;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.apache.shiro.crypto.hash.Sha256Hash;
import org.apache.shiro.subject.Subject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import yfkj.gz.task.entity.SysRole;
import yfkj.gz.task.entity.SysUser;
import yfkj.gz.task.service.ISysRoleService;
import yfkj.gz.task.service.ISysUserService;
import yfkj.gz.task.util.DateUtil;
import yfkj.gz.task.util.StringUtils;
import yfkj.gz.support.BTView;
import yfkj.gz.support.controller.BaseController;
/**
 * 用户控制器
 * @author 胡汉三
 * @date 2017年1月16日 下午2:31:39
 */
@Controller
@RequestMapping("/sysuser")
public class SysUserController extends BaseController{
 @Resource
 private ISysUserService userService;
 @Resource
 private ISysRoleService roleService;
 /**
  * 分页查询用户
  * @param response
  * @param user
  * @param btView
  * @throws IOException
  */
 @RequestMapping(value = "/findUser", method = { RequestMethod.POST, RequestMethod.GET })
 public void findUser(SysUser user,BTView<SysUser> btView) throws IOException{
  List<SysUser> list = userService.findSysUserPage(btView, null);
  btView.setRows(list);
  super.writeJSON(btView);
 }
 /**
  * 用户登录
  * @param response
  * @param user
  * @throws IOException
  */
 @RequestMapping(value = "/login", method = { RequestMethod.POST, RequestMethod.GET })
 public void login(SysUser user,boolean rememberMe) throws IOException{
  //用户登录
  SysUser userInfo = userService.getByProerties(new String[]{"loginAccount"}, new String[]{user.getLoginAccount()},null);
  if(userInfo==null){
   result.setMessage("用户名错误");
   super.writeJSON(result);
   return;
  }
  if(!userInfo.getLoginPass().equals(new Sha256Hash(user.getLoginPass()).toHex())){
   result.setMessage("密码错误");
   super.writeJSON(result);
   return;
  }
  //存入session
  Subject subject = SecurityUtils.getSubject();
  //记得传入明文密码
  subject.login(new UsernamePasswordToken(userInfo.getLoginAccount(), user.getLoginPass(), rememberMe));
  session.setAttribute(USER_SESSION, userInfo);
  result.setMessage("登录成功");
  result.setSuccess(true);
  super.writeJSON(result);
 }
 /**
  * 用户注册
  * @param response
  * @param user
  * @throws IOException
  */
 @RequestMapping(value = "/register", method = { RequestMethod.POST, RequestMethod.GET })
 public void register(SysUser user) throws IOException{
  Long count = userService.getCountByProerties(new String[]{"loginAccount"}, new String[]{user.getLoginAccount()});
  if(count>0){
   result.setMessage("账号已存在");
   super.writeJSON(result);
   return;
  }
  Long countEmail = userService.getCountByProerties(new String[]{"userEmail"}, new String[]{user.getUserEmail()});
  if(countEmail>0){
   result.setMessage("邮箱已存在");
   super.writeJSON(result);
   return;
  }
  try{
   //注册时间
   user.setRegisterTime(DateUtil.getDateTime(new Date()));
   //Sha256Hash加密
   user.setLoginPass(new Sha256Hash(user.getLoginPass()).toHex());
   //默认为注册用户
   SysRole role = roleService.getByProerties(new String[]{"roleKey"},new String[]{"ROLE_USER"},null);
   user.getRoles().add(role);
   userService.save(user);
   //存入session
   Subject subject = SecurityUtils.getSubject();
   subject.login(new UsernamePasswordToken(user.getLoginAccount(), user.getLoginPass()));
   session.setAttribute(USER_SESSION, user);
   result.setMessage("注册成功");
   result.setSuccess(true);
  }catch(Exception e){
   result.setMessage("注册失败");
  }
  super.writeJSON(result);
 }
 /**
  * 判断用户账号是否已存在
  * @param response
  * @param user
  * @throws IOException
  */
 @RequestMapping(value = "/getUserNameCount", method = { RequestMethod.POST, RequestMethod.GET })
 public void getUserNameCount(String loginAccount) throws IOException{
  result.setSuccess(false);
  if(StringUtils.isBlank(loginAccount)){
   result.setMessage("账号不能为空");
   super.writeJSON(result);
   return;
  }
  Long count = userService.getCountByProerties(new String[]{"loginAccount"}, new String[]{loginAccount});
  if(count>0){
   result.setMessage("账号已存在");
  }else{
   result.setSuccess(true);
   result.setMessage("该账号可用");
  }
  super.writeJSON(result);
 }
 /**
  * 判断用户邮箱是否已存在
  * @param response
  * @param email
  * @throws IOException
  */
 @RequestMapping(value = "/getEMailCount", method = { RequestMethod.POST, RequestMethod.GET })
 public void getEMailCount(String email) throws IOException{
  result.setSuccess(false);
  if(StringUtils.isBlank(email)){
   result.setMessage("邮箱不能为空");
   super.writeJSON(result);
   return;
  }
  Long count = userService.getCountByProerties(new String[]{"userEmail"}, new String[]{email});
  if(count>0){
   result.setMessage("邮箱已存在");
  }else{
   result.setSuccess(true);
   result.setMessage("该邮箱可用");
  }
  super.writeJSON(result);
 }
 // 登出
 @RequestMapping("/logout")
 public void logout() throws IOException {
  //退出权限验证
  SecurityUtils.getSubject().logout();
  //销毁session
  session.invalidate();
  response.sendRedirect(request.getContextPath()+"/login.jsp");
 }
} 

至此，登录跟注册就OK啦！

其中还使用到啦jquery-confirm.js，这是一个弹出框的插件：点击查看

源码地址：https://git.oschina.net/gzsjd/task

以上所述是小编给大家介绍的Spring shiro + bootstrap + jquery.validate 实现登录、注册功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！