这里做一个联系人管理系统，实现了对联系人的增、删、改、查；表现层，service层和dao层都写了大致框架，还没学数据库，所以都是模拟一下，等学了数据库再来完善。( ^_^ )
先上效果图：
增加联系人：
删除联系人：
修改联系人（前）：
修改联系人（后）：
这是整个项目用的类：
主页index.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>联系人管理系统 </title>
<link href="<c:url value='/css/table.css' ></c:url>" rel="stylesheet" type="text/css" />
<!-- 若js代码很多则采取外部导入方式 -->
<script type="text/javascript" src="<c:url value='/js/table.js'></c:url>">
</script>
<script type="text/javascript">
var path="<c:url value='/' />";//获取项目根路径("/canMvcWeb2/")，因为在js中无法认识c:url标签
</script>
</head>
<body>
<div>
<button οnclick="add();">添加联系人</button>
<button οnclick="del();">删除联系人</button>
<button οnclick="update();">修改联系人</button>
</div>
<table id="tb">
<tr><th><input type="checkbox" name="parentChk" οnclick="chk(this)">选择</th><th>姓名</th><th>年龄</th><th>电话</th><th class="iid">ID</th></tr>
</table>
<!-- 专门用于实现ajax提交ids信息的表单和隐藏帧 -->
<form action="<c:url value='/DelServlet' />" target="iff" method="post" name="form1">
<input type="hidden" name="ids" />
</form>
<iframe name="iff" style="display:none">
</iframe>
</body>
</html>
</span>
主页中的js代码很多，所以采用分离导入式table.js
<span style="font-size:14px;">function add(){
//alert(path);
var url=path+"/jsps/input.jsp";
//alert(url);
var resObj=window.showModalDialog(url,{},"dialogHeight:200px;dialogHide:300px;");
if(resObj){
addToTable(resObj);
}
}
function addToTable(obj){
var oTb=document.getElementById("tb");
var oTr=oTb.insertRow();
var cell_1=oTr.insertCell();
cell_1.innerHTML="<input type='checkbox' name='chk' οnclick='subChk()' />";
var cell_2=oTr.insertCell();
cell_2.innerHTML=obj.name;
var cell_3=oTr.insertCell();
cell_3.innerHTML=obj.age;
var cell_4=oTr.insertCell();
cell_4.innerHTML=obj.tel;
//添加ID列，(为接下来删除)，并设类样式iid
var cell_5=oTr.insertCell();
cell_5.className="iid";
cell_5.innerHTML=obj.id;
subChk();//从新刷新一下列表
}
function chk(obj){
var chks=document.getElementsByName("chk");
for(var i=0;i<chks.length;i++){
chks[i].checked=obj.checked;
}
}
function subChk(){
var sum=0;
var chks=document.getElementsByName("chk");
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
sum++;
}
}
var parentChk=document.getElementsByName("parentChk")[0];
if(sum==0){
parentChk.indeterminate=false;
parentChk.checked=false;
}else if(sum==chks.length){
parentChk.indeterminate=false;
parentChk.checked=true;
}else{
parentChk.indeterminate=true;
}
}
function del(){
var str="";
var chks=document.getElementsByName("chk");
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
var oTd=chks[i].parentNode;
var oTr=oTd.parentNode;
var id=oTr.cells[4];
if(str==""){
str=id;
}else{
str+="$%"+id;//把将要删除的联系人id用$%连接
}
}
}
if(str==""){
alert("请选择要删除的用户");
return;
}else{
document.getElementsByName("ids")[0].value=str;
//document.forms["form1"].submit();
document.getElementsByName("form1")[0].submit();
}
}
function relDel(boo){
if(!boo){
alert("删除失败!");
return;
}
var chks=document.getElementsByName("chk");
for(var i=chks.length-1;i>=0;i--){
if(chks[i].checked){
var oTd=chks[i].parentNode;
var oTr=oTd.parentNode;
oTr.parentNode.removeChild(oTr);
}
}
subChk();//从新刷新一下列表
}
function update(){
var n=0;
var x=0;
var chks=document.getElementsByName("chk");
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
n++;
x=i;
}
}
if(n==0){
alert("请选择要修改的联系人！");
return;
}else if(n>1){
alert("一次只能修改一个联系人！");
return;
}
var id=chks[x].parentNode.parentNode.cells[4].innerHTML;
var name=chks[x].parentNode.parentNode.cells[1].innerHTML;
var age=chks[x].parentNode.parentNode.cells[2].innerHTML;
var tel=chks[x].parentNode.parentNode.cells[3].innerHTML;
//alert(id);
//这里封装一个对象，传值到模式窗口
var obj={"id":id,"name":name,"age":age,"tel":tel};
var url=path+"/jsps/input2.jsp";
var resObj=window.showModalDialog(url,obj,"dialogHeight:200px;dialogHide:300px;");
if(resObj){//如果res为0、null、undefined、false----这些结果都为false
//直接修改页面表格
chks[x].parentNode.parentNode.cells[1].innerHTML =resObj.name;
chks[x].parentNode.parentNode.cells[2].innerHTML=resObj.age;
chks[x].parentNode.parentNode.cells[3].innerHTML=resObj.tel;
}
}
</span>
主页的样式也采用了导入table.css
<span style="font-size:14px;">body{
text-align: center;
}
table{
clear:left;
border: 1px solid blue;
border-collapse: collapse;
width: 500px;
}
th,td{
border: 1px solid blue;
}
.iid{
display: none;
}
div {
float: left;
margin: 5px;
padding: 5px;
}
div button{
margin: 3px;
}</span>
增加联系人input.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>增加联系人</title>
<script type="text/javascript">
function save(){
//document中有form集合，用form的name值也可以找到此form
//按理应该先检验表单的数据是否合法，然后在提交，此处省略了
//alert("aaaa");
document.forms["ff"].submit();
}
function relSave(obj){
//在弹出窗口向主页面传值
//alert(obj.name);
window.returnValue=obj;//窗口关闭后的返回值
//window.returnValue=obj;
window.close();
}
</script>
</head>
<body>
请输入联系人信息
<form action='<c:url value="/SaveServlet" ></c:url>' name="ff" target="iframe" method="post">
姓名：<input type="text" name="name" /><br/>
年龄：<input type="text" name="age" /><br/>
电话：<input type="text" name="tel" /><br/>
</form>
<button οnclick="save()">保存</button>
<button οnclick="window.close();">取消</button><br/>
<iframe name="iframe" style="display: none;">
</iframe>
</body>
</html>
</span>
表单提交的SaveServlet.java
<span style="font-size:14px;">
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.hncu.domain.User;
import cn.hncu.service.IUserService;
import cn.hncu.service.IUserServiceImpl;
public class SaveServlet extends HttpServlet {
//注入service
IUserService service=new IUserServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//收集(省去对数据的有效性防护)
String name=request.getParameter("name");
Integer age=Integer.parseInt(request.getParameter("age"));
String tel=request.getParameter("tel");
//封装
User user =new User();
user.setName(name);
user.setAge(age);
user.setTel(tel);
//调用service层
user=service.save(user);
//根据结果导向不同结果界面
if(user!=null){
request.setAttribute("user", user);
}
request.getRequestDispatcher("/jsps/saveback.jsp").forward(request, response);
}
}
</span>
servlet调用的service层
IUserService.java接口
<span style="font-size:14px;">
package cn.hncu.service;
import cn.hncu.domain.User;
public interface IUserService {
public User save(User user);
public boolean del(String[] ids);
public User update(User user);
}
</span>
IUserServiceImpl.java实现类
<span style="font-size:14px;">
package cn.hncu.service;
import cn.hncu.dao.UserDAO;
import cn.hncu.dao.UserDAOJdbc;
import cn.hncu.domain.User;
public class IUserServiceImpl implements IUserService{
//注入dao
UserDAO dao=new UserDAOJdbc();
@Override
public User save(User user) {
return dao.save(user);
}
@Override
public boolean del(String[] ids) {
return dao.del(ids);
}
@Override
public User update(User user) {
return dao.update(user);
}
}
</span>
service层调用DAO层
UserDAO.java接口
<span style="font-size:14px;">
package cn.hncu.dao;
import cn.hncu.domain.User;
public interface UserDAO {
public User save(User user);
public boolean del(String[] ids);
public User update(User user);
}
</span>
UserDAOJdbc.java实现类
<span style="font-size:14px;">
package cn.hncu.dao;
import java.util.UUID;
import cn.hncu.domain.User;
public class UserDAOJdbc implements UserDAO{
@Override
public User save(User user) {
//等学了数据库再来完善，这里模拟一下
String id=UUID.randomUUID().toString().replace("-", "");
user.setId(id);
System.out.println("User到了："+user);
return user;
}
@Override
public boolean del(String[] ids) {
for(String id:ids){
System.out.println("要删除联系人的id:"+id);
}
return true;
}
@Override
public User update(User user) {
//对比数据库的user.id，然后进行修改
System.out.println("这里对"+user+"修改:");
return user;
}
}
</span>
Servlet导向saveback.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<!-- 该页面是ajax返回界面,隐藏在显示帧中 -->
<!-- 技术学习：如何从web容器中把后台返回的数据读取并传递给js -->
<!-- 两种方式：一是用input组件，二是直接在js中拿 -->
<input type="text" id="id" value='<c:out value="${requestScope.user.id}"></c:out>'/>
<script type="text/javascript">
var id=document.getElementById("id").value;
//alert(id);
var obj=new Object();
obj.id="<c:out value='${requestScope.user.id}' />";
obj.name="<c:out value='${requestScope.user.name}' />";
obj.age="<c:out value='${requestScope.user.age}' />";
obj.tel="<c:out value='${requestScope.user.tel}' />";
parent.relSave(obj);
</script>
</body>
</html>
</span>
删除的DelServlet.java
<span style="font-size:14px;">
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.hncu.service.IUserService;
import cn.hncu.service.IUserServiceImpl;
public class DelServlet extends HttpServlet {
IUserService service=new IUserServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//收集
String strIds=request.getParameter("ids");
String[] ids=strIds.split("$%");
//封装
//调用service
boolean boo=service.del(ids);
if(boo){
request.setAttribute("suc", true);
}
request.getRequestDispatcher("/jsps/delback.jsp").forward(request, response);
}
}
</span>
导向的delback.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<!-- 该页面是ajax返回界面,隐藏在显示帧中 -->
<!-- 技术学习：如何从web容器中把后台返回的数据读取并传递给js -->
<!-- 两种方式：一是用input组件，二是直接在js中拿 -->
<input type="text" id="id" value='<c:out value="${requestScope.suc}"></c:out>'/>
<script type="text/javascript">
//var boo=document.getElementById("id").value;
var boo="<c:out value='${requestScope.suc}' />";
//alert(boo);
parent.relDel(boo);
</script>
</body>
</html>
</span>
修改的弹出窗口input2.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户登录</title>
<script type="text/javascript">
function save(){
//document中有form集合，用form的name值也可以找到此form
//按理应该先检验表单的数据是否合法，然后在提交，此处省略了
//alert("aaaa");
document.forms["ff"].submit();
};
function relUpdate(obj){
//在弹出窗口向主页面传值
//alert(obj.name);
window.returnValue=obj;//窗口关闭后的返回值
//window.returnValue=obj;
window.close();
};
οnlοad=function(){
//在这里接收传来的对象，并给表单中的文本框赋值
var obj=window.dialogArguments;
if(obj!=null){
document.getElementsByName("name")[0].value=obj.name;
document.getElementsByName("age")[0].value=obj.age;
document.getElementsByName("tel")[0].value=obj.tel;
document.getElementsByName("id")[0].value=obj.id;
}
};
</script>
</head>
<body>
请输入联系人信息
<form action='<c:url value="/UpdateServlet" ></c:url>' name="ff" target="iframe" method="post">
姓名：<input type="text" name="name" /><br/>
年龄：<input type="text" name="age" /><br/>
电话：<input type="text" name="tel" /><br/>
<input type="hidden" name="id" />
</form>
<button οnclick="save()">保存</button>
<button οnclick="window.close();">取消</button><br/>
<iframe name="iframe" style="display: none;">
</iframe>
</body >
</html>
</span>
表单提交的UpdateServlet.java
<span style="font-size:14px;">
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.hncu.domain.User;
import cn.hncu.service.IUserService;
import cn.hncu.service.IUserServiceImpl;
public class UpdateServlet extends HttpServlet {
//注入service
IUserService service=new IUserServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//收集(省去对数据的有效性防护)
String name=request.getParameter("name");
Integer age=Integer.parseInt(request.getParameter("age"));
String tel=request.getParameter("tel");
String id=request.getParameter("id");
//封装
User user =new User();
user.setName(name);
user.setAge(age);
user.setTel(tel);
user.setId(id);
//调用service层
user=service.update(user);
//根据结果导向不同结果界面
if(user!=null){
request.setAttribute("user", user);
}
request.getRequestDispatcher("/jsps/updateback.jsp").forward(request, response);
}
}
</span>
servlet导向的updateback.jsp
<span style="font-size:14px;">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<script type="text/javascript">
//var boo=document.getElementById("id").value;
var obj=new Object();
obj.name="<c:out value='${requestScope.user.name}' />";
obj.age="<c:out value='${requestScope.user.age}' />";
obj.tel="<c:out value='${requestScope.user.tel}' />";
parent.relUpdate(obj);
</script>
</body>
</html>
</span>
在修改的时候我是从前台页面直接传的值，没有根据联系人的id去后台拿，实时性可能会差点。
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
