现在我们开始实现登录功能，这个可以说是Web应用最最最普遍的功能了。
先来说说我们登录的逻辑：
输入用户名、密码(validate进行前端验证)——ajax调用后台action方法——根据用户名调用业务层到数据层查询数据库信息——查询的密码跟用户输入的密码比对——shiro登录身份验证——将用户信息存入session——响应前端——前端跳转
这个是我要告诉大家的姿势，还有很多很多的姿势。下面我们来看具体的代码。
首先前端验证，这里使用了jquery.validate来进行验证，jquery.validate的使用很简单，这里我们说说存js的方式：
rush: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;
}
}
},minlength: 5,maxlength:20
},rloginPass: {
equalTo: "#register_password"
},userEmail: {
required: true,email: true,remote: {
url: "sysuser/getEMailCount.action",data: {
email: function () {
return $("#register_email").val();
}
},dataFilter: function (data) { //判断控制器返回的内容
data = jQuery.parseJSON(data);
return data.success;
}
}
}
},messages: {
loginAccount:{
required: "请输入姓名",remote: "用户名已存在"
},minlength: jQuery.format("密码不能小于{0}个字 符"),maxlength: jQuery.format("密码不能大于{0}个字 符"),rloginPass: {
required: "请输入确认密码",equalTo: "两次密码不一样"
},userEmail: {
required: "请输入邮箱",email: "请输入有效邮箱",remote: "邮箱已存在"
}
},url : "sysuser/register.action",data : $("#register_form").serialize(),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页面：
rush:js;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
contextpath" value="${pageContext.request.contextpath}">
<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="">
主页
contextpath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
contextpath }/static/bootstrap/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">
contextpath }/static/alert/jquery-confirm.min.css" rel="external nofollow" rel="stylesheet">