struts2 spring4 hibernate4(s2sh)整合开发--简单实体的增删改查操作
在前一篇博客的基础上,现在介绍一下对User这个实体的增删改查操作,其中后端的代码实现以及在UserAction中全部贴出来了,想要介绍的其实前端页面如何与后端(其实就是Action)交互。我采用的是企业比较实用的jquery ajax异步交互,特别是删除与批量删除,我觉得使用到的jquery比较实用!
回顾一下上篇博文,我登录采用的是jquery的post方法,后台action处理完毕会返回success,success有两个取值“yes”和“no”,当为yes的时候,响应user-main.action。可以见如下代码:
$(function(){
var serverUrl=$('#serverUrl').val();
$('#loginBtn').bind('click',function(){
//alert("登录");
var userName=$('#userName').val();
var password=$('#password').val();
//也就是说如果你dataType写的是json格式,jQuery在返回时已经把返回值转换成了json对象,
//这时就不需要再用eval转换了,如果dataType写的是text才需要用eval转换。
console.log(userName+" -- "+password);
$.post(serverUrl+"/user-login.action",{
userName:userName,
password:password
},function(result){
if (result.success=='yes') {
window.location.href=serverUrl+"/user-main.action";
} else {
window.location.href=serverUrl+"/index.jsp";
}
},"json");
});
});
响应user-main.action,其实就是响应了UserAction.java中的main方法(这就是struts2层层过滤匹配的过程)。至于main这个方法干了啥事,在上一篇博文的UserAction已经贴出来了,下面就是执行的结果响应页面(即登录成功后的页面):
这个jsp页面就是success.jsp,其源码如下:
<%@page import="com.steadyjack.server.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆成功</title>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<script type="text/javascript" src="${ctx}/style/js/common/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
//异步删除
$('.delete').click(function(){
//获取自定属性
var id=$(this).attr('data-option');
//当前的链接
var url=this.href;
//找到那条tr,以便后面动态删除
var $tr=$(this).parent().parent().parent();
//jquery的查找
var delName=$tr.children().eq(2).text();
console.log(id+" -- "+url+" -- "+delName);
if(confirm("是否删除用户名为: "+delName+" ?")){
$.post(url,{userId:id},function(requestData){
alert(requestData);
//动态删除这一行,而不会去整个刷新页面
$tr.remove();
});
}
//取消a href本身的超链接属性(不写的话或者忘记写的话,如果没注意,会很蛋疼)
return false;
});
//实现checkbox的全选与反选
$("#allAndNotAll").click(function() {
if (this.checked){
$("input[name='items']:checkbox").each(function(){
$(this).attr("checked", true);
});
} else {
$("input[name='items']:checkbox").each(function() {
$(this).attr("checked", false);
});
}
});
//批量删除
$('.batchDelete').live('click',function(){
var ids=[];
//获取被选中的checkbox,然后将其id塞进ids中
$("input[name='items']:checked").each(function(){
ids.push($(this).attr('data-option'));
});
//采用逗号隔开塞进ids的每个id
var delIds=ids.join(",");
//console.log(ids+" -- "+ids.length);
if(delIds.length==0){
alert('请选择需要删除的数据');
return false;
}
if(confirm('是否批量删除选中的数据?')){
var url=this.href;
console.log(delIds);
$.post(url,{delIds:delIds},function(requestData){
alert(requestData);
window.location.reload(true);
});
}
return false;
});
});
</script>
</head>
<%
User currUser=(User)request.getSession().getAttribute("currentUser");
if(currUser==null){
response.sendRedirect(request.getContextPath()+"/index.jsp");
}
%>
<body>
<input id="serverUrl" value="${ctx}" type='hidden'/>
<h2>登陆成功!!! 当前用户: ${currentUser.userName }</h2>
<a href="${ctx}/user-input.action" style="cursor: pointer;text-decoration: underline;">添加用户</a>
<a href="${ctx}/user-batchDelete.action" class="batchDelete" style="cursor: pointer;text-decoration: underline;">批量删除</a>
<br><br>
<table cellpadding="10px" cellspacing="0" border="1px solid #cdcdcd">
<thead>
<tr>
<td><input type="checkbox" id="allAndNotAll" /></td>
<td><label>编号 </label></td>
<td><label>姓名 </label></td>
<td><label>密码 </label></td>
<td><label>住址 </label></td>
<td><label>联系电话 </label></td>
<td><label>创建时间 </label></td>
<td><label>更新时间 </label></td>
<td><label>操作 </label></td>
</tr>
</thead>
<tbody id="itemBodyTemplate">
<c:forEach items="${userList}" var="user">
<tr>
<td><input type="checkbox" name="items" data-option="${user.id}"/></td>
<td><label>${user.id} </label></td>
<td><label id="currName">${user.userName} </label></td>
<td><label>${user.password} </label></td>
<td><label>${user.address} </label></td>
<td><label>${user.phoneNumber} </label></td>
<td><label>${user.createTime} </label></td>
<td><label>${user.updateTime} </label></td>
<td><label>
<a href="${ctx}/user-modify.action?userId=${user.id}" class="modify" style="cursor: pointer;text-decoration: underline;">修改</a>
<br>
<a href="${ctx}/user-delete.action" data-option="${user.id}" class="delete" style="cursor: pointer;text-decoration: underline;">删除</a>
</label></td>
</tr>
</c:forEach>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
上面jsp页面,已经给出了删除、批量删除的前端代码,其中涉及到的jquery ajax的知识还是不少的,好好研究一下还是对诸位博友是有好处的!!!
而“添加”跟“修改”功能的后端代码虽然不一样,但最终跳转的jsp页面是同一个的!即userInfo.jsp:
<%@page import="com.steadyjack.server.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改用户信息</title>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<script type="text/javascript" src="${ctx}/style/js/common/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#saveUser').bind('click',function(){
$('#userForm').submit();
});
});
</script>
</head>
<body>
<form action="${ctx}/user-save.action" id="userForm" method="post">
用户名:<input type="text" id="userName" name="user.userName" value="${modifyUser.userName}"/><br><br>
密码:<input type="text" id="password" name="user.password" value="${modifyUser.password}"/><br><br>
地址:<input type="text" id="address" name="user.address" value="${modifyUser.address}"/><br><br>
电话号码<input type="text" id="phoneNumber" name="user.phoneNumber" value="${modifyUser.phoneNumber}"/><br><br>
<input type="hidden" id="userId" name="user.id" value="${modifyUser.id}"/><br>
<input type="button" value="保存" id="saveUser"/>
</form>
</body>
</html>
其保存功能,我直接在js代码中提交表单了!
下面演示效果,点击“添加”:
用户名的唯一性我就没有做了,如果需要的话,可以到我的这篇博客 点击打开链接里面的UserController与相应的页面查看!!!!
点击“保存”,即可以在用户列表中查看到刚刚新添加的用户:
现在,将这条信息进行修改,点击“修改”:
都加上222,然后保存,即可以看到该信息以及被修改了!!!而且还更新了“更新时间”。
接下来我们多添加几条信息,以便于测试删除与批量删除功能。
下面,我们删除“jack2”这个用户名,删除过程会提示是否进行删除,删除成功之后会提示“删除成功”,并将该条数据动态移除:
下面,我们将“四大天王”全部都删除,采用的是“批量删除”的功能:
点击“确定”:
最终的效果:
好了,先介绍到这里吧!
后面我已经想好了要练手什么功能了,在这里不妨提一条:分页、预览、图片的上传、批量导入导出、、、、、