基于struts+hibernate+ajax的登录注册验证与购物车demo解析

本博文主要介绍使用struts完成页面跳转和hibernate访问数据库的方式，完成简单的ajax注册验证和购物车功能demo实例。将搭建过程和一些心得分享出来。此文为流程分析，并不介绍具体实现过程的每个细节，源代码放在了下载页。页面截图如下（请忽略页面丑，只为功能齐全...）

一：struts+hibernate环境搭建

二：用户登录实现

三. 注册功能的动态刷新验证

四：加入购物车

一：struts+hibernate环境搭建

在此demo中，使用struts完成跳转、hibernate访问数据库，则需要配置struts与hibernate。新建web项目，配置struts（web.xml新建filter-struts.xml），src下struts.xml文件如下：

<struts>
	<include file="struts/login.xml"></include>
	<include file="struts/product.xml"></include>
</struts>

配置hibernate，src下新建hibernate.cfg.xml，配置请参考hibernate使用博文。

新建user类，id,name,userName,passWord属性，并配置与数据库映射关系 。

<hibernate-mapping package="pojo">
	<class name="User" table="user_">
		<id name="id" column="id">
			<generator class="native"/>
		</id>
		<property name="name" column="name"/>
		<property name="userName" column="username"/>
		<property name="passWord" column="password"/>
		<property name="createTime" column="createtime"/>
	</class>
</hibernate-mapping>

二：用户登录实现

1. 新建login.jsp，登录验证实现思路主要为以下几要点：

form表单提交用户输入的数据，表单内容的name属性为user.name等对象.属性名的形式，提交form表单，请求login.action，交给struts跳转到后台，后台通过hibernate查询数据库，如果输入正确跳转至首页，否则重新跳转至登录页面，并在session中存入log提示信息，告诉用户登录失败。

2. struts-login.xml:

<struts>
	<package name="login" extends="struts-default" namespace="/login">
		<!-- 登录验证 -->
		<action name="loginCheck" class="action.LoginCheck" method="loginCheck">
			<result name="success">index.jsp</result>
			<result name="fail" type="redirect">/</result>
		</action>
		<!-- 执行注册操作 -->
		<action name="zhuce" class="action.LoginCheck" method="zhuce">
			<result name="success" type="redirect">/</result>
			<result name="fail">fail.jsp</result>
		</action>
		<!-- 注册时检测用户名是否重复 -->
		<action name="zhuceCheck" class="action.LoginCheck" method="zhuceCheck">
		</action>	
		<action name="myMsg" class="action.LoginCheck" method="myMsg">
			<result name="myIndex">/user/myIndex.jsp</result>
		</action>
		<!-- 用户点击退出登录 -->
		<action name="exit" class="action.LoginCheck" method="exit">
			<result name="login" type="redirect">/</result>
		</action>
	</package>
</struts>

login.jsp:

<% Map m = ActionContext.getContext().getSession();
	String result = (String)m.get("result");
	if(result == "yes") {%>
		<font color="green">注册成功</font>
	<% }%>
	<%if(result == "fail") { %>
		<font color="red">账号密码不正确，请重新登录！</font>
	<%} %>
<% m.remove("result"); %>
	<form action="login/loginCheck" method="post">
		用户名：<input type="text" name="user.userName"/><br/>
		密码：<input type="password" name="user.passWord"/><br/>
		<input type="submit" value="登录"/>
		<a href="login/zhuce.jsp">新用户注册</a>
	</form>

action.LoginCheck.java:

public String loginCheck() {
		Session s = sf.openSession();
		Map m = ActionContext.getContext().getSession();//获取session
		s.beginTransaction();
		if(user != null) {
			Query q = s.createQuery("from User where username=? and password=?");
			q.setString(0, user.getUserName());
			q.setString(1, user.getPassWord());
			List<User> lu = q.list();
			if(lu.size() > 0) {
				for (User u : lu) {
					user = u;
				}
				m.put("loginOk", user.getName());//登录成功，在session中存放用户姓名
				m.put("userId", user.getId());//登陆成功，在session存放用户ID，以便后续使用
				return "success";
			}else {
				m.put("result", "fail");//验证失败，则session存放验证结果，在前台显示
				return "fail";
			}
		}else {
			m.put("result", "fail");
			return "fail";
		}
	}

至此，登录验证完成。相比不比我多解释，大家都能看懂。

三. 注册功能的动态刷新验证

1. zhuce.jsp:

<form method="post">
	用户名：<input type="text" name="user.userName" id="userName"/><font id="check" color=""></font><br/>
	密码：<input type="password" name="user.passWord" id="passWord"/><br/>
	再次输入密码：<input type="password" id="passWord2"/><br/>
	姓名：<input type="text" name="user.name" id="name"/><br/>
	<button onclick="check()">注册</button>
</form>
<script src="../js/login/zhuce.js?t=2018007"></script>

form表单中，编写注册所需填写信息，用户名后面加一个font标签，用以显示是否存在验证结果显示。

button注册按钮，对应js中的check()方法。用以提交用户输入的信息提交form表单。

用户名的ajax动态验证在js中预加载函数中，通过对用户名input框的输入监控函数keyup()，也就是当键盘弹起式，触发该函数，来完成用户名的ajax验证。

2. zhuce.js

var userNameIOk;      //用来验证form提交时，用户名是否存在，设为全局变量
$(function() {
	$("#userName").keyup(function() {               //用户名输入键盘弹起时，触发该方法
		var userName = $("#userName").val();
		var url = "zhuceCheck";   //请求action地址
		$.ajax({
			url:url,
			data:{
				userName:userName
			},
			type:"post",
			dataType:"text",
			success:function(result) {
				if(result == '1') {
					userNameIOk = "OK";
					$("#check").attr("color","green");   //修改fone标签的颜色属性值
					$("#check").html("可以使用");
				}
				if(result == '0') {
					userNameIOk = "NO";
					$("#check").attr("color","red");
					$("#check").html("已经存在");
				}
			}
		});
	});
});

//该方法为点击提交时，验证用户是否输入完整以及数据的正确性，然后确定提不提交from
function check() {
	var userName = $("#userName").val();
	var passWord = $("#passWord").val();
	var passWord2 = $("#passWord2").val();
	var name = $("#name").val();
	var resulrt;
	if(userName == "" || userName == null) {
		alert("用户名不能为空");
		resulrt = 0;
	}else if(passWord == "" || passWord == null) {
		alert("密码不能为空");
		resulrt = 0;
	}else if(passWord2 == "" || passWord2 == null) {
		alert("请再次输入密码");
		resulrt = 0;
	}else if(name == "" || name == null) {
		alert("姓名不能为空");
		resulrt = 0;
	}else if(passWord2 != passWord) {
		alert("两次输入的密码不一致，请检查！");
		resulrt = 0;
	}else if (userNameIOk != "OK") {
		alert("该用户名已经存在，请重新输入");
		resulrt = 0;
	}else {
		resulrt = 1;
	}
	if(resulrt == 1) {
		var form = window.document.forms[0];  //获取该html文档中的form
		form.action = "zhuce";                //设置该form的action地址
		form.submit();                        //提交该form
	}else {
		$("form").submit(function() {        //获取所有的form表单，并设置submit属性执行
                                             //function，返回false，代表不提交
			return false;
		});
	}
}

3. 请求的后台方法：

public void zhuceCheck() {
		HttpServletResponse response = ServletActionContext.getResponse();//获取response对象
		response.setCharacterEncoding("UTF-8");
		System.out.println(userName);
		checkResult = loginService.clickUserName(userName);  //hibernate验证用户名是否存在
		try {
			response.getWriter().write(checkResult);//通过response返回ajax返回结果
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

至此，通过ajax完成动态验证完成。点击注册，插入数据库的操作，这里不再赘述。

四：加入购物车

1. 新建product实体类，并配置好hibernate映射关系，添加几条商品信息，然后通过hibernate查询所有商品信息存在list集合中，struts返回jsp页面，此过程不再赘述，以下为返回的jsp页面：

<table style="width: 555px" border="1" cellpadding="0" align="center">
	<tr>
		<td><font color="blue">服务编号</font></td>
		<td><font color="blue">服务名称</font></td>
		<td colspan="2"><font color="blue">服务价格</font></td>
	</tr>
	<s:iterator value="lc" var="p" status="st">
		<tr>
			<td>${p.id}</td>
			<td>${p.name}</td>
			<td>${p.price}</td>
			<td>
				<input class="addCart" pid="${p.id}" type="submit" value="加入购物车">
			</td>
		</tr>
	</s:iterator>
</table>
<a href="carList">查看我的购物车</a>
<font id="msg"></font>

使用struts的s:标签，遍历循环出list中的数据，并加入一个加入购物车的按钮，js中设置该按钮的点击事件，通过ajax根据该产品的id获取该产品信息，并存在后台购物车中（购物车使用session存放），实现不跳转加入到购物车，并在下方添加fone标签，用来显示添加成功或者失败的提示信息。

2. js文件如下：class为addCart的input触发点击事件，并执行函数，该函数中设置了ajax请求，获取到该条产品的id，并把id值传到后台，根据后台response返回的结果显示添加成功或者失败的提示信息

$(function(){
	$("#msg").hide();
	$("input.addCart").click(function(){
		var url = "joinCar";
		var pid = $(this).attr("pid");
		$.ajax({
			url:url,
			type:"post",
			data:{
				pid:pid
			},
			dataType:"text",
			success:function(rel) {
				if(rel == "joinOk") {
					$("#msg").attr("color","green");
					$("#msg").html("添加成功！");
					$("#msg").fadeIn(1200);  //设置fone延迟1200ms显示
					$("#msg").fadeOut(1200);//设置fone延迟1200ms隐藏
				}
				if(rel == "joinFail") {
					$("#msg").attr("color","red");
					$("#msg").html("添加失败，请重新添加到购物车！");
					$("#msg").fadeIn(1200);
					$("#msg").fadeOut(1200);
				}
			}
			
		});
	});
});

3. 后台方法：

public void joinCar() {
		HttpServletResponse response = ServletActionContext.getResponse();
		List<Product> mapPro;
		if(pid > 0) {
			pro = proService.getById(pid);//根据ajax传来的id获取该产品的全部信息
            //获取session中的该用户购物车中的内容，key为proCar+id用来区分不用登录用户使用不同                        
            //的key值
			mapPro = (List<Product>) m.get("proCar"+id);
			if(mapPro == null) {
				mapPro = new ArrayList<Product>();
			}
			mapPro.add(pro);//将该条产品加入到购物车
			m.remove("proCar");
			m.put("proCar"+id, mapPro);加入该条产品的list重新放回session中
			msg = "joinOk";
		}else {
			msg = "joinFail";
		}
		try {
			response.getWriter().write(msg);  //返回ajax的结果值
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

至此，购物车动态加入功能结束。