mvc+json+ajax架構製作客戶信息管理小項目

項目運行效果

項目架構：

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>

mvc+json+ajax架構製作客戶信息管理小項目

添加模塊

刪除模塊

python gdal 安裝使用（Windows， python 3.6.8）

javaEE之Hibernate架構之數據庫連接工具模版製作

小項目製作：javaWeb之郵箱驗證註冊（javaMail+jdbc+log4j）

mvc+json+ajax架構製作客戶信息管理小項目

javaWeb三大器之過濾器：Filter

通過過濾器進行敏感詞彙的屏蔽

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結