mvc+json+ajax架构制作客户信息管理小项目

来源：互联网发布：淘宝卖农产品要什么证编辑：程序博客网时间：2024/06/05 15:40

项目运行效果
这里写图片描述

项目架构：

这里写图片描述
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="添加" />&nbsp; <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>

阅读全文

0 0