联系人管理系统(MVC框架)

这里做一个联系人管理系统，实现了对联系人的增、删、改、查；表现层，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列，(为接下来删除)，并设类样式iidvar 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 {//注入serviceIUserService 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{//注入daoUserDAO dao=new UserDAOJdbc();@Overridepublic User save(User user) {return dao.save(user);}@Overridepublic boolean del(String[] ids) {return dao.del(ids);}@Overridepublic 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{@Overridepublic User save(User user) {//等学了数据库再来完善，这里模拟一下String id=UUID.randomUUID().toString().replace("-", "");user.setId(id);System.out.println("User到了："+user);return user;}@Overridepublic boolean del(String[] ids) {for(String id:ids){System.out.println("要删除联系人的id:"+id);}return true;}@Overridepublic 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("$%");//封装//调用serviceboolean 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 {//注入serviceIUserService 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去后台拿，实时性可能会差点。

联系人管理系统(MVC框架)相关推荐

Java Web图书管理系统(MVC框架)-包含源码
Java Web图书管理系统一.前言这是大二写的系统,因此这个系统并没有用到很多框架,只是使用了MVC框架,前端使用的是Layui框架.bootstrap框架.JSP技术.JSTL表达式和EL表达 ...
mvc的宿舍管理系统源码基于jsp_[源码和文档分享]基于JSP的MVC框架实现的图书推荐系统展示平台网站...
推荐系统是目前互联网中最常见的一种智能产品形式.由于网络中信息量的快速增长以及图书出版行业出版量的攀升,人们需要一种办法,来解决信息过载的问题.此外,用户访问网络是为了获取信息,但并不是所有的访问都有 ...
ssh名片管理系统ssh框架 MVC模式myeclipse开发
一.源码特点 JSPssh名片管理系统是一套完善的WEB设计系统,对理解JSP java 编程开发语言有帮助,系统采用ssh框架 MVC模式进行开发,系统具有完整的源代码和数据库,系统主要采 ...
JSP 房产租赁销售管理系统ssh框架 MVC模式mysql数据库
一.源码特点 JSP 房产租赁销售管理系统是一套完善的WEB设计系统,对理解JSP java 编程开发语言有帮助,系统采用ssh框架 MVC模式进行开发,系统具有完整的源代码和数据库,系统 ...
ssh研究生毕业环节管理系统 ssh框架 MVC模式MYSQL
一.源码特点 JSPssh研究生毕业环节管理系统是一套完善的WEB设计系统,对理解JSP java 编程开发语言有帮助,系统采用ssh框架 MVC模式进行开发,系统具有完整的源代码和数据库, ...
C#基于MVC框架的图书管理系统
一.介绍 1.MVC框架 MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.比如一批统计数 ...
MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)
前言: 刚刚学完了MVC,根据自己的感悟和理解写了一个小项目. 完全按照MVC模式,后面有一个MVC的理解示意图. 用MVC模式重新完成了联系人的管理系统: 用户需求: 多用户系统,提供用户注册.登录 ...
Spring MVC框架在进行表单提交，自动封装成对象提交，在以对象的形式入参
最近做了一个超市订单管理系统的项目,使用的是Spring MVC 和Spring 框架. 如上图:进行新用户添加.此处jsp页面代码如下: <div class="right" ...
WEB阶段7:综合练习-联系人管理系统-增删改查查询分页
综合练习-联系人管理系统-增删改查&查询分页回顾能够说出过滤器的作用解决全局乱码问题用户权限访问控制用户输入文本内容进行过滤能够编写过滤器创建一个类实现javax.servlet ...

联系人管理系统(MVC框架)

联系人管理系统(MVC框架)相关推荐

最新文章

热门文章