1. 程式人生 > >基於web的網路考勤系統(ajax+ligerUI+MVC+簡單工廠)

基於web的網路考勤系統(ajax+ligerUI+MVC+簡單工廠)

序言     

 最近在整理自己的舊U盤的時候發現了幾個貢獻比較大對於整個系統比較熟悉的例子來給大家分享一下,因為該專案是17年大二的時候所作,稍有瑕疵請各位諒解。因為是鄙人第一個專案,所以不打算修改了,留作個紀念。

本系統框架利用了ligerUI的整體佈局與樣式,具體程式碼就不放出了,有需要的讀者可自行去官網中的示例檢視:ligerUI官網

目錄

正文

  • 本系統的功能模組圖如下(各部分對資料庫的增刪改查均已省略)​​​​​​

  • 使用者分類

1.超級管理員--負責基本設定裡面的修改

2.考勤員--負責考勤項的管理

模組分類與功能簡介

基本設定(伺服器端均用web3.0的註解配置)

1.使用者管理模組--此模組包含對使用者表的增刪改查操作

(1)前端功能演示圖:

使用者管理:

使用者新增:

使用者修改:

(2)核心程式碼概要:

A.實體層(model層):

package com.ambow.entity;

/**
 * @author TianZW
 * @Admin使用者表實體類
 * */
public class Admin {
	private int AdminID ;//使用者ID
	private String AdminAccount ;//賬號
	private String AdminPwd;//密碼
	private int AdminState;//是否啟用此賬戶
	private int AdminRight;//是否為超級管理員
	private String AdminName;//使用者名稱
}

此部分只貼上了類中的欄位摘要,還有該類的空參構造與滿參建構函式和個欄位的get/set方法。不過注意的是,getAdminPwd部分的get方法應該是需要遮蔽的,即便是超級管理員也應無權檢視考勤員密碼。

B.前端顯示部分(view層):

<!-- 煙臺大學 計算機與控制工程學院 田志偉 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>職位管理</title>
<link href="js/ligerUI/ligerUI/skins/Aqua/css/ligerui-all.css"
	rel="stylesheet" type="text/css" />
<script src="js/ligerUI/jquery/jquery-1.9.0.min.js"
	type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<style type="text/css">
    .l-case-title
    {
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
    
    }
</style>
<script type="text/javascript">
        var win1;
        function f_open()
        {
            if (win1) win1.show();
            else win1 = $.ligerDialog.open({
            	height: 400,
            	url: '/checkWork/userAdd.html',
            	width: 400,
            	showMax: true, 
            	showToggle: true,
				showMin: true,
				isResize: true, 
				slide: true }); 
            setgrid(queryData);
        }
</script>
<script type="text/javascript">
var grid = null;	
var queryData = null;
var numReg ="^(0|[1-9][0-9]*)\$";//數字的正則表示式
	$(function() {
		$.ajax({
			type : "POST",
			url : "user.do?opt=queryAll&timeid="+new Date().getTime(),
			success : function(list) {
				setgrid(list);
			},
			dataType : "json"
		});
		//設定表格分頁
		$("#pageloading").hide();
		
		$("#btnQuery").click(function(){
	    	  var num = $("#userno").val();
	    	  
	    	 if(num.match(numReg)){
	    		 $.ajax({
	      			type : "POST",
	      			data : {'num' : num},
	      			url : "user.do?opt=queryByPK&timeid="+new Date().getTime(),
	      			success : function(result) {
	      				setgrid(result);
	      				},dataType : "json"
	        	  });
	    	 }else
	    		 window.location.reload();
		});
		
		$("#btnQueryByName").click(function(){
	    	  var Byname = $("#Byname").val();
	    		 $.ajax({
	      			type : "POST",
	      			data :{'Byname':Byname},
	      			url : "user.do?opt=queryByName&timeid=" + new Date().getTime(),
	      			success : function(result) {
	      				setgrid(result);
	      				},dataType : "json"
	        	  });
		});
		
	});
/***************************************************************************************************/
	function setgrid(queryData) {
		grid = $("#divBody").ligerGrid({
			columns :  [ 
				{
					display : '使用者編號',
					name : 'adminID',	
					minWidth : 60
				},{
					display : '使用者賬號',
					editor: { type: 'text' },
					name : 'adminAccount',
					minWidth : 60
				} ,{
					display : '使用者密碼',
					editor: { type: 'text' },
					name : 'adminPwd',
					minWidth : 60
				} ,{
					display : '賬號狀態',
					render : function(rowdata, rowindex, value){
						if(value==0)
							return "停用";
						else
							return "啟用";
					},
					editor: { type: 'select',
						data:[{id:"1",text:"啟用"},{id:"0",text:"停用"}],	
					},
					name : 'adminState',
					minWidth : 60
				} ,{
					display : '賬號許可權',
					render : function(rowdata, rowindex, value){
						if(value==0)
							return "普通考勤員";
						else
							return "超級管理員";
					},
					editor: { type: 'select',
						data:[{id:"1",text:"超級管理員"},{id:"0",text:"普通考勤員"}],	
					},
					name : 'adminRight',
					minWidth : 60
				} ,{
					display : '使用者名稱稱',
					editor: { type: 'text' },
					name : 'adminName',
					minWidth : 60
				} ,{ display: '操作',
					
					minWidth : 140,
					width: 140, 
					render: function (rowdata, rowindex, value)
		            {
	                    var h = "";
	                    if (!rowdata._editing)
	                    {
	                        h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
	                        h += "<a href='javascript:deleteRow(" + rowindex + ")'>刪除</a> "; 
	                    }
                   		else
	                    {
	                        h += "<a href='javascript:endEdit(" + rowindex + ")'>提交</a> ";
	                        h += "<a href='javascript:cancelEdit(" + rowindex + ")'>取消</a> "; 
	                    }
	                    return h;
		            }
                }],
				pageSize : 10,
				enabledEdit: true,//是否允許編輯
				clickToEdit:false,//是否允許點選單一表格編輯
				isScroll: true,//是否固定底部
				data : $.extend(true, {}, queryData),
				width : '100%',
				height : '100%'
		});
	}

	function beginEdit(rowid) {
		grid.beginEdit(rowid);
	}
	function cancelEdit(rowid) {
		grid.cancelEdit(rowid);
	}
	function deleteRow(rowindex) {
		var val = grid.getSelected(rowindex);

		if (confirm('確定刪除?')) {
			$.ajax({
				type : "POST",
				data :val,
				url : "user.do?opt=delete&timeid="+ new Date().getTime(),
				success : function(msg) {
					alert(msg);
					window.location.reload();
				}
			});
		}
	}
	function endEdit(rowindex) {
		grid.endEdit(rowindex);
		var val = grid.getSelected(rowindex);
		if (confirm('確定修改?')) {
			$.ajax({
				type : "POST",
				datatype : "text",
				data : val,
				url : "user.do?opt=update&timeid=" + new Date().getTime(),
				success : function(msg) {
					alert(msg);
					window.location.reload();
				}
			});
		}
	}
</script>
</head>
<body style="padding: 6px; overflow: hidden;">
	 <div id="searchbar">
		使用者編號:<input id="userno" type="text" oninput ="value=value.replace(/[^\d]/g,'')"/> 
			<input id="btnQuery" type="button" value="查詢" />
		使用者名稱稱(模糊查詢):<input id="Byname" type="text" /> 
			<input id="btnQueryByName" type="button" value="查詢" />	
		<input type="button" onclick="f_open()" value="增加使用者" style="float: right;width: 200px"/>
	</div> 

	<div id="divBody" style="margin: 0; padding: 0"></div>
</body>
</html>

此部分利用的ligerUI的前端框架與部分自己完成的js程式碼,利用ajax非同步提交到伺服器,獲取在資料庫中儲存的使用者資料,同時利用非同步實現對資料的增刪改查。

C.伺服器端(controller層)

/**
*@煙臺大學 計算機與控制工程學院
*@author 田志偉
*@2017-8
*/
package com.ambow.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.alibaba.fastjson.JSON;
import com.ambow.DAO.userDao;
import com.ambow.entity.Admin;
import com.ambow.factory.userFactory;
import com.ambow.util.JSONUtil;

@WebServlet("/user.do")
public class UserController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
    public UserController() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ArrayList<Admin> list = new ArrayList<Admin>();
		PrintWriter out = response.getWriter();
		String opt = request.getParameter("opt");
		userDao userDao = userFactory.getUserInstance();
		if(opt.equals("add")) {
			String AdminAccount = request.getParameter("AdminAccount");
			String AdminPwd = request.getParameter("AdminPwd");
			int AdminState = Integer.parseInt(request.getParameter("AdminState"));
			int AdminRight = Integer.parseInt(request.getParameter("AdminRight"));
			String AdminName = request.getParameter("AdminName");
			
			Admin user = new Admin(0, AdminAccount, AdminPwd, AdminState, AdminRight, AdminName);
			try {
				userDao.add(user);
				out.write("success");
			} catch (SQLException e) {
				out.write("faied");
				e.printStackTrace();
			}
		}else if(opt.equals("queryAll")) {
			try {
				list = userDao.queryAll();
				String json = JSONUtil.AdminJSONString(list);

				out.write(json);
				
			} catch (Exception e) {
				e.printStackTrace();
			}
		}else if(opt.equals("queryAllnotHashMap")) {
			try {
				list = userDao.queryAll();
				String json = JSON.toJSONString(list);

				out.write(json);
				
			} catch (Exception e) {
				e.printStackTrace();
			}
		}else if(opt.equals("queryByPK")) {
			Admin user = new Admin();
			int userID = Integer.parseInt(request.getParameter("num"));
			try {
				user = userDao.queryByPK(userID);
				if(user.getAdminID()!=0) {
					list.add(user);
				}
				String json = JSONUtil.AdminJSONString(list);

				out.write(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if(opt.equals("queryByName")) {
			String name = request.getParameter("Byname");
			try {
				list = userDao.queryByName(name);
				String json = JSONUtil.AdminJSONString(list);
				out.write(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if(opt.equals("queryByPK2")) {
			Admin user = new Admin();
			int userID = Integer.parseInt(request.getParameter("num"));
			try {
				user = userDao.queryByPK2(userID);
				if(user.getAdminID()!=0) {
					list.add(user);
				}
				String json = JSONUtil.AdminJSONString(list);

				out.write(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if(opt.equals("queryByName2")) {
			String name = request.getParameter("Byname");
			try {
				list = userDao.queryByName2(name);
				String json = JSONUtil.AdminJSONString(list);
				out.write(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if(opt.equals("update")) {
			int userID = Integer.parseInt(request.getParameter("adminID"));
			String AdminAccount = request.getParameter("adminAccount");
			String AdminPwd = request.getParameter("adminPwd");
			int AdminState = Integer.parseInt(request.getParameter("adminState"));
			int AdminRight = Integer.parseInt(request.getParameter("adminRight"));
			String AdminName = request.getParameter("adminName");
			Admin user = new Admin(userID, AdminAccount, AdminPwd, AdminState, AdminRight, AdminName);

			try {
				userDao.update(user);
				out.write("修改成功!");
			} catch (SQLException e) {
				out.write("修改失敗!");
				e.printStackTrace();
			}
		}else if(opt.equals("delete")) {
			int userID = Integer.parseInt(request.getParameter("adminID"));
			try {
				userDao.delete(userID);
				out.write("刪除成功!");
			} catch (SQLException e) {
				out.write("刪除失敗!");
				e.printStackTrace();
			}	
		}else if(opt.equals("querySuperAdmin")) {
			try {
				list = userDao.querySuperAdmin();
				String json = JSONUtil.AdminJSONString(list);
				out.write(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else if(opt.equals("updatePwd")) {
			String code = request.getParameter("code");
			String vcode = (String)request.getSession().getAttribute("vCode");
			String name = (String)request.getSession().getAttribute("loginname");
			
			String pwd = (String)request.getSession().getAttribute("password");
			String newPwd = request.getParameter("newPwd");
			String oldPwd = request.getParameter("oldPwd");
			
			if(code.equalsIgnoreCase(vcode)) {
				if(oldPwd.equals(pwd)) {
					try {
						userDao.updatePwd(name,newPwd);
						HttpSession session = request.getSession();
						session.removeAttribute("password");
						session.setAttribute("password", newPwd);
						out.write("修改成功 ");
					} catch (SQLException e) {
						out.print("未知錯誤,修改失敗!");
					}
				}else
					out.print("原密碼錯誤!修改失敗!");
				
			}else
				out.print("驗證碼錯誤!修改失敗!");
		}else if(opt.equals("getUsername")) {
			HttpSession session = request.getSession();
			String username = (String)session.getAttribute("loginname");
			out.write(username);
		}
		
		
		out.flush();
		out.close();
	}

}

本部分使用了fasterjson中的一些方法,需要的讀者可去自行下載,本專案的其他jar包也在其中:密碼:pou4。本servlet中還存在著部分對許可權控制的程式碼,利用伺服器端封裝的session物件進行登入使用者的型別進行判斷,在view層(HTML端)進行控制顯示。

(3)功能說明:

此模組的為對使用者的增刪改查,其中實體類的AdminID對應資料庫中的主鍵,AdminAccount為使用者登入賬號,AdminRight為賬戶的許可權(即為超級管理員與考勤員的區別),在過濾器部分限制許可權也是靠的AdminRight欄位。

(4)其他相關程式碼:

使用者的新增

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增職位</title>
<script src="js/ligerUI/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>  
<script type="text/javascript">
var dialog = frameElement.dialog; //呼叫頁面的dialog物件(ligerui物件)
$(function(){   
	$("#confirm").click(function(){
		var t1 = $("#AdminAccount").val();
		var t2 = $("#AdminPwd").val();
		var t3 = $("#AdminPwd2").val();
		var t4 = $("#AdminName").val();
		
		if(t1==""||t2==""||t4=="")
			alert("各項均不能為空!");
		else if(t2==t3){
			$.ajax({
				 url:"user.do?opt=add&timeid="+new Date().getTime(),
			  	 type:"POST",
				 data : $("#bodyForm").serialize(),
				 success:function(msg){
			 	 alert(msg);
			 	 }
			});
			dialog.close();//關閉dialog 
		}else{
			alert("兩次密碼輸入不一致!");
			
		}
		window.location.reload();
	}); 
});

/**********************************************************************/

</script>
</head>
<body>
	<form id = "bodyForm">
		<table style="text-align:center;background-color: #D1EEEE" border="1">
			<tr style="text-align:center">
				<td style="text-align:center">賬號</td>
				<td style="text-align:center"><input type="text" id="AdminAccount" name="AdminAccount" oninput="this.value=this.value.replace(/^\s+$/gi,'');" /></td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center">密碼</td>
				<td style="text-align:center"><input type="password" id="AdminPwd" name="AdminPwd" oninput="this.value=this.value.replace(/^\s+$/gi,'');"/></td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center">重複密碼</td>
				<td style="text-align:center"><input type="password" id="AdminPwd2" oninput="this.value=this.value.replace(/^\s+$/gi,'');"/></td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center">賬號狀態</td>
				<td style="text-align:center">
					<select id ="AdminState" name ="AdminState">
						<option value = "0">停用</option>
						<option value = "1">啟用</option>
					</select>
				</td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center">管理許可權</td>
				<td style="text-align:center">
					<select id = "AdminRight" name = "AdminRight">
						<option value = "0">停用</option>
						<option value = "1">啟用</option>
					</select>
				</td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center">使用者名稱</td>
				<td style="text-align:center"><input type="text" id="AdminName" name="AdminName" oninput="this.value=this.value.replace(/^\s+$/gi,'');"/></td>
			</tr>
			<tr style="text-align:center">
				<td style="text-align:center"><input type="button" value = "提交" id = "confirm"/></td>
				<td style="text-align:center"><input type="reset" value = "清除"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

使用者的查詢功能(可對考勤員開放,僅供查詢用)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>職位查詢</title>
<link href="js/ligerUI/ligerUI/skins/Aqua/css/ligerui-all.css"
	rel="stylesheet" type="text/css" />
<link href="js/ligerUI/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
<script src="js/ligerUI/jquery/jquery-1.9.0.min.js"
	type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
<script src="js/ligerUI/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>

<script type="text/javascript">
var grid = null;	
var numReg ="^(0|[1-9][0-9]*)\$";//數字的正則表示式
	$(function() {
		$.ajax({
			type : "POST",
			url : "user.do?opt=queryAll&timeid="+new Date().getTime(),
			success : function(list) {
				setgrid(list);
			},
			dataType : "json"
		});
		//設定表格分頁
		$("#pageloading").hide();
		
		$("#btnQuery").click(function(){
	    	  var num = $("#userno").val();
	    	  
	    	 if(num.match(numReg)){
	    		 $.ajax({
	      			type : "POST",
	      			data : {'num' : num},
	      			url : "user.do?opt=queryByPK&timeid="+new Date().getTime(),
	      			success : function(result) {
	      				setgrid(result);
	      				},dataType : "json"
	        	  });
	    	 }else
	    		 window.location.reload();
		});
		
		$("#btnQueryByName").click(function(){
	    	  var Byname = $("#Byname").val();
	    		 $.ajax({
	      			type : "POST",
	      			data :{'Byname':Byname},
	      			url : "user.do?opt=queryByName&timeid=" + new Date().getTime(),
	      			success : function(result) {
	      				setgrid(result);
	      				},dataType : "json"
	        	  });
		});
		
	});
/***************************************************************************************************/
	function setgrid(queryData) {
		grid = $("#divBody").ligerGrid({
			columns :  [ 
				{
					display : '使用者編號',
					name : 'adminID',	
					minWidth : 60
				},{
					display : '使用者賬號',
					editor: { type: 'text' },
					name : 'adminAccount',
					minWidth : 60
				} ,{
					display : '賬號狀態',
					render : function(rowdata, rowindex, value){
						if(value==0)
							return "停用";
						else
							return "啟用";
					},
					editor: { type: 'text' },
					name : 'adminState',
					minWidth : 60
				} ,{
					display : '賬號許可權',
					render : function(rowdata, rowindex, value){
						if(value==0)
							return "超級管理員";
						else
							return "普通考勤員";
					},
					editor: { type: 'int' },
					name : 'adminRight',
					minWidth : 60
				} ,{
					display : '使用者名稱稱',
					editor: { type: 'text' },
					name : 'adminName',
					minWidth : 60
				} ],
				pageSize : 10,
				enabledEdit: true,//是否允許編輯
				clickToEdit:false,//是否允許點選單一表格編輯
				isScroll: true,//是否固定底部
				data : $.extend(true, {}, queryData),
				width : '100%',
				height : '100%'
		});
	}

</script>



</head>
<body style="padding: 6px; overflow: hidden;">
	 <div id="searchbar" style="height: 30px" >
		使用者編號:<input id="userno" type="text" oninput ="value=value.replace(/[^\d]/g,'')"/> 
			<input id="btnQuery" type="button" value="查詢" />
		使用者名稱稱(模糊查詢):<input id="Byname" type="text" /> 
			<input id="btnQueryByName" type="button" value="查詢" />	
			
	</div> 

	<div id="divBody" style="margin: 0; padding: 0 "></div>
</body>
</html>

2.部門管理模組--對部門表的增刪改查

(1)程式碼概要

/**未完待續/