本博文主要介绍使用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();
}
}
至此,购物车动态加入功能结束。