项目运行效果
项目架构:
index页面:登录页面
<%@ 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>
<form action="<c:url value='/LoginServlet'/>" method="Post">
<input type="text" name="name"><br/>
<input type="password" name="pwd"><br/>
<input type="submit">
</form>
</body>
</html>
loginServlet:用于处理用户登录的后台servlet
package cn.hncu.info.servlets;
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;
public class LoginServlet extends HttpServlet {
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");
String pwd = request.getParameter("pwd");
if (name != null && name.startsWith("hncu") && pwd != null
&& pwd.length() > 3) {
request.getSession().setAttribute("name", name);
request.getSession().setAttribute("pwd", pwd);
request.setAttribute("name", name);
request.getRequestDispatcher("/jsps/table.jsp").forward(request,
response);
} else {
response.sendRedirect(request.getContextPath() + "/index.jsp");
}
}
}
table.jsp:用户信息显示模块
<%@ 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">
var path = '<c:url value="/"/>';
</script>
<script type="text/javascript" src="<c:url value='/js/table.js'/>"></script>
<c:if test="${empty sessionScope.name }">
<c:redirect url="../index.jsp"></c:redirect>
</c:if>
</head>
<body>
<h2>客户信息管理</h2>
<div>
<input type="button" onclick="add();" value="添加" /> <input
type="button" onclick="del();" value="删除" />
</div>
<table id="tb">
<tr>
<th>选择<input type="checkbox" id="parentChk" onclick="chk(this);"></th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th class="iid">ID</th>
</tr>
</table>
<iframe name="delframe" style="display: none">
</iframe>
<form id="f1" target="delframe" action='<c:url value="/DelServlet"/>' method="post">
<input id="ids" name="ids" type="hidden" />
</form>
</body>
<script type="text/javascript">
</script>
</html>
table.js:用于用户表单操作和显示的功能
function add() {
var url = path + "jsps/input.jsp";
var res = window.showModalDialog(url, "","dialogWidth:300px;dialogHeight:400px;status:no;");
if (res) { // 如果该值是false,0,undefined,null,,在js中统一认为是false
realAdd(res);
}
}
function chk(obj) {
var chks = document.getElementsByName("chk");
var len = chks.length;
for ( var i = 0; i < len; i++) {
chks[i].checked = obj.checked;
}
}
function subchk(obj) {
var chks = document.getElementsByName("chk");
var n = 0; // 统计表格行中被勾选中的行数
for ( var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
n++;
}
}
var parentChk = document.getElementById("parentChk");
if (n == 0) {
parentChk.indeterminate = false;// ※※※不能省
parentChk.checked = false;
} else if (n == chks.length) {
parentChk.indeterminate = false;// ※※※不能省
parentChk.checked = true;
} else {
parentChk.indeterminate = true;
}
}
function realAdd(obj) {
var tb = document.getElementById("tb");
var oTr = tb.insertRow();
var oCell = oTr.insertCell();
oCell.innerHTML = '<input type="checkbox" name="chk" onclick="subchk(this);"/>';
oCell = oTr.insertCell();
oCell.innerHTML = obj.name;
oCell = oTr.insertCell();
oCell.innerHTML = obj.age;
oCell = oTr.insertCell();
oCell.innerHTML = obj.phone;
oCell = oTr.insertCell();
oCell.innerHTML = obj.id;
oCell.className = "iid";
}
function del() {
var tb = document.getElementById("tb");
var chks = document.getElementsByName("chk");
var ids = "";
for ( var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
var oTr = chks[i].parentNode.parentNode;
var id = oTr.cells[4].innerText;
if (ids == "") {
ids = id;
} else {
ids = ids + "," + id;
}
}
}
if (ids == "") {
alert("请选择要删除的行");
} else {
document.getElementById("ids").value = ids;
document.forms['f1'].submit();
}
}
function realDel(boo) {
if (boo) {
var tb = document.getElementById("tb");
var chks = document.getElementsByName("chk");
var len = chks.length;
for ( var i = len - 1; i >= 0; i--) {
if (chks[i].checked) {
tb.deleteRow(i + 1);
}
}
} else {
alert("删除失败");
}
}
添加模块
input.jsp:用户添加页面:
<%@ 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>
</head>
<body>
<form target="iframe" name="form1"
action="<c:url value='/SaveServlet'/>" method="post">
Name:<input type="text" name="name"><br /> Age:<input
type="text" name="age"><br /> Phone<input type="text"
name="phone"><br /> <input type="button" onclick="save();"
value="添加" /> <input type="button" onclick="window.close()"
value="取消" />
</form>
<iframe name="iframe" style="display: none"></iframe>
<script type="text/javascript">
function save(){
document.forms['form1'].submit();
}
function realSave(obj){
window.returnValue=obj;
window.close();
}
</script>
</body>
</html>
saveservlet:用于存储用户信息的后台servlet:
package cn.hncu.info.servlets;
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.info.domain.User;
import cn.hncu.info.service.IUserService;
import cn.hncu.info.service.UserServiceImpl;
public class SaveServlet extends HttpServlet {
IUserService service=new UserServiceImpl();
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");
String age = request.getParameter("age");
String phone = request.getParameter("phone");
// 封装成javaBean
User user = new User();
if (name != null) {
user.setName(name);
}
if (age != null) {
user.setAge(Integer.parseInt(age));
}
if (phone != null) {
user.setPhone(phone);
}
user=service.save(user);
request.setAttribute("user", user);
request.getRequestDispatcher("/jsps/saveback.jsp").forward(request, response);
}
}
saveback.jsp:将后台存储信息返回到前端
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript">
//json
var obj=new Object();
obj.id = "<c:out value='${user.id}'/>";
obj.name = "<c:out value='${user.name}'/>";
obj.age = "<c:out value='${user.age}'/>";
obj.phone = "<c:out value='${user.phone}'/>";
parent.realSave(obj);
</script>
删除模块
delservlet用于处理删除的后台servlet:
package cn.hncu.info.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;
public class DelServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String ids=request.getParameter("ids");
String strs[]=ids.split(",");
for(int i=0;i<strs.length;i++){
System.out.println("删除"+strs[i]);
}
boolean boo=true;
if(boo){
request.getSession().setAttribute("succ", true);
request.getRequestDispatcher("/jsps/delback.jsp").forward(request, response);
}
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
//用jstl在js页面中把从后台获取出来
var boo = "<c:out value='${succ}' />";
parent.realDel(boo);
</script>