學生信息管理系統----班級信息管理

嵌入班級信息到System頁面

這一部分要實現班級信息的相關操作。
還是在名爲servlet的package下創建一個顯示班級列表的Servlet——ClazzServlet。這樣取名字是避免與系統關鍵字class起衝突，以免出現不必要的麻煩。

public class ClazzServlet extends HttpServlet {
	public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{
		doPost(req,res);
	}
	public void doPost(HttpServletRequest req,HttpServletResponse res){
	}
}

接下來還是要在web.xml中對這個Servlet進行配置，建立與訪問路徑的一個映射。

<servlet>
  	<description>班級信息管理</description>
  	<servlet-name>ClazzServlet</servlet-name>
  	<servlet-class>com.ischoolbar.programmer.servlet.ClazzServlet</servlet-class>
</servlet>
<servlet-mapping>
  	<servlet-name>ClazzServlet</servlet-name>
  	<url-pattern>/ClazzServlet</url-pattern>
</servlet-mapping>

第三步，我們打開素材文件，找到clazzList.jsp，將其複製到view目錄下。
打開裏面部分代碼如下面所示，我們之前已經將左邊的菜單欄佈置好了，當用戶點擊菜單欄中的班級列表時，我們需要將clazzList.jsp在右邊顯示出來。

public class ClazzServlet extends HttpServlet {
	private static final long serialVersionUID = -7264164305513332635L;
	public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{
		doPost(req,res);
	}
	public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		String method = req.getParameter("method");
		if("toClazzListView".equals(method)){
			clazzList(req,res);
		}
	}
	private void clazzList(HttpServletRequest req, HttpServletResponse res) throws IOException {
		// TODO Auto-generated method stub
		try {
			req.getRequestDispatcher("view/clazzList.jsp").forward(req, res);
		} catch (ServletException e) {
			e.printStackTrace();
		}
	}

從system.jsp中有這樣一行代碼，這個請求就是發往ClazzServlet的，並且傳入了一個參數 toClazzListView，我們根據這個參數實現了請求轉發。

{"menuid":"42","menuname":"班級列表","icon":"icon-house","url":"ClazzServlet?method=toClazzListView"},

現在已經將班級列表頁面，即clazzList.jsp能夠動態的嵌入到System.jsp中了，打開clazzList.jsp，有這樣的幾行代碼：功能是顯示班級列表，通過傳遞getClazzList來顯示班級列表。

    $('#dataList').datagrid({ 
    		....
    		....(部分代碼省略)
	        method: "post",
	        // 給服務器發送請求
	        url:"ClazzServlet?method=getClazzList&t="+new Date().getTime(),
	        idField:'id', 
	        ....
	        ....(部分代碼省略)
	})

我們按照這裏給出的url在ClazzServlet中進行參數的傳遞，ClazzServlet的doPost方法就成了下面的樣子。我們通過調用的getClazzList()方法來顯示從數據庫中讀取的數據。

	public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		String method = req.getParameter("method");
		if("toClazzListView".equals(method)){
			clazzList(req,res);
		}else if("getClazzList".equals(method)){
			getClazzList(req, res);
		}
	}

讀取數據庫的信息

但是我們還沒有實現從數據庫中讀取列表的方法。
接下來我們要創建一個班級列表的model類——Clazz.java，並且附上相應的get和set方法。

public class Clazz {
	private int id;
	private String name;
	private String info;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	....(部分代碼省略)
}

有了model，我們就可以相應的在dao的package下創建一個dao——ClazzDao。
我們還要根據顯示的頁面來實現數據的分頁顯示，在這之前我們創建一個Page的model，但是這個類並沒有在數據庫中對應存在的數據表，只是方便在分頁的時候做處理。

public class Page {
	private int start;			// 起始頁
	private int currentPage;	// 當前頁
	private int pageSize;		// 每頁顯示的數量
	public Page(int curruntPage,int pageSize){
		this.start = (curruntPage-1)*pageSize;
		this.currentPage = curruntPage;
		this.pageSize = pageSize;
	}
	public int getStart() {
		return start;
	}
	....(部分代碼省略)

從這個類的的構造函數中可以看出，每一頁的起始頁都是當前的頁數減一再乘以每一頁的數目，這一點不難理解。
有了page之後，可以在ClazzDao中實現查詢班級列表的方法。

	public List<Clazz> getClazzList(Clazz clazz,Page page){
		List<Clazz> ret = new ArrayList<Clazz>();
		String sql = "select * from s_clazz";
		if(!StringUtil.isEmpty(clazz.getName())){
			sql += " where name like '%" + clazz.getName() +"'"; // 模糊查詢
		}
		sql += " limit " + page.getStart() +","+page.getPageSize();
		ResultSet resultSet = query(sql);
		try {
			while(resultSet.next()){
				Clazz c1 = new Clazz();
				c1.setId(resultSet.getInt("id"));
				c1.setName(resultSet.getString("name"));
				c1.setInfo(resultSet.getString("info"));
				ret.add(c1);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return ret;
	}

從上面代碼中顯示的sql語句來看，這裏的分頁查詢是基於了sql語句的拼接。是" limit " + page.getStart() +","+page.getPageSize();這部分起到了作用。

我們在上面的ClazzServlet已經給出了getClazzList(req, res);方法，但是還沒有具體實現。回到ClazzServlet，在doPost方法下可以寫。

private void getClazzList(HttpServletRequest req,HttpServletResponse res){
	String name = req.getParameter("name");				// 獲取前臺參數
	Integer currentPage = Integer.parseInt(req.getParameter("page"));		// 獲取前臺數據轉爲Integer
	Integer pageSize = Integer.parseInt(req.getParameter("rows"));
	Clazz clazz = new Clazz();		//創建一個Clazz對象
	clazz.setName(name);			// 給班級對象的班級名屬性進行賦值，這個值是前臺傳來的，用於在數據庫中按照班級名進行條件查詢的
	ClazzDao clazzDao = new ClazzDao();	
	List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize));		// 獲取數據庫的數據，多條查詢結果，所以用List存儲
	clazzDao.closeCon();
	
	JsonConfig jsonConfig = new JsonConfig();	
	String clazzListString = JSONArray.fromObject(clazzList, jsonConfig).toString();
	System.out.println(clazzListString);		// 查詢的結果轉爲Json串
	res.setCharacterEncoding("utf-8");			// 設置字符集，防止亂碼
	try {
		res.getWriter().write(clazzListString);	// 返回相應給客戶端
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
}

那麼返回的響應，是什麼樣子的呢，可以打開F12調試窗口看一下我們從後臺得到的數據是什麼樣子的。

回到clazzList.jsp，以下就是數據顯示的表格，所以一切查詢到的數據都是動態的添加在這個表格中的。記住，這裏的id爲dataList，是先在html中定義數據顯示的行和列。

<!-- 數據列表 -->
	<table id="dataList" cellspacing="0" cellpadding="0"> </table>

使用Id選擇器選擇到了上面的數據列表，並且創建了一個數據網絡（datagrid）。

//datagrid初始化 
$('#dataList').datagrid({ 
       ....
      url:"ClazzServlet?method=getClazzList&t="+new Date().getTime(),
      ....
      columns: [[  
		{field:'chk',checkbox: true,width:50},
	    {field:'id',title:'ID',width:50, sortable: true},    
	    {field:'name',title:'班級名稱',width:200},
	    {field:'info',title:'班級介紹',width:100},
	  ]], 
});

最終獲取的數據將會在這裏顯示出來。

模糊查詢

根據條件來查詢相關的數據在clazzDao查詢班級列表的功能中已經實現好了，其核心代碼就是在我們輸入了關鍵信息，並且根據這個信息作爲條件來返回數據。

if(!StringUtil.isEmpty(clazz.getName())){
	sql += " where name like '%" + clazz.getName() +"'"; // 模糊查詢
}

這裏我們要完成的功能是按照條件進行模糊查詢，但是素材中並沒有搜索框與搜索按鈕，這裏要我們自己去設定。所以仍然是在clazzList.jsp中進行修改。

<div style="margin-top: 3px">班級名稱：<input id="clazzName" class="easyui-textbox" name="clazzName" />
	<a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">搜索</a>	
</div>

接着要給搜索按鈕添加一個事件的監聽，當點擊的時候觸發 datagrid.load方法。把參數clazzName傳入到後臺，通過requet.getParamete(‘clazzName’)來獲取。

$("#search-btn").click(function(){
	$('#dataList').datagrid('load',{
		clazzName:$('#clazzName').val()
	})
});

模糊查詢也是查詢，所以可以使用之前定義在Servlet層的getClazzList方法，Dao層也仍然要使用getClazzList方法。如上圖中標誌2的部分，我們需要統計出符合模糊查詢條件的數據個數，所以需要在Dao層定義一個便於統計個數的方法。

public int getClazzListTotal(Clazz clazz){
	int total = 0;
	String sql = "select count(*) as total from s_clazz ";
	if(!StringUtil.isEmpty(clazz.getName())){
		sql += "where name like '%" + clazz.getName() +"%'";
	}
	ResultSet resultSet = query(sql);
	try {
		while(resultSet.next()){
			total = resultSet.getInt("total");
		}
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return total;
}

因爲查詢到的數據仍然是使用list來返回的，現在需要對getClazzList()方法進行修改，將統計查詢結果的個數和查得到的數據一起返回給瀏覽器。

private void getClazzList(HttpServletRequest req,HttpServletResponse res){
	res.setCharacterEncoding("utf-8");
	res.setContentType("text/html;charset=utf-8");
	String name = req.getParameter("clazzName"); // 獲取模糊查詢的條件
	Integer currentPage = Integer.parseInt(req.getParameter("page"));
	Integer pageSize = Integer.parseInt(req.getParameter("rows"));
	Clazz clazz = new Clazz();
	clazz.setName(name);		// 給Clazz對象的name屬性進行賦值
	ClazzDao clazzDao = new ClazzDao();		
	List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize));
	clazzDao.closeCon();
	int total = clazzDao.getClazzListTotal(clazz);	// 獲取模糊查詢結果的總結果數
	clazzDao.closeCon();
	Map<String,Object> ret = new HashMap<String,Object>();
	ret.put("total", total);
	ret.put("rows", clazzList);
	try {
		res.getWriter().write(JSONObject.fromObject(ret).toString());// 將map中的數據轉換爲json
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
}

打開瀏覽器調試窗口，也可以查看到返回的響應信息。

添加數據

因爲要添加數據，我們所想自然也需要一個填寫信息的彈窗來做爲填寫數據的載體。而素材文件中也包含這一部分代碼。

<!-- 添加窗口 -->
<div id="addDialog" style="padding: 10px">  
   	<form id="addForm" method="post">
    	<table cellpadding="8" >
    		<tr>
    			<td>班級名稱:</td>
    			<td><input id="add_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="name"  data-options="required:true, missingMessage:'不能爲空'" /></td>
    		</tr>
    		<tr>
    			<td>班級介紹:</td>
    			<td>
    				<textarea name="info" style="width:200px; height:60px;"cols=""></textarea>
    			</td>
    		</tr>
    	</table>
    </form>
</div>

	  	//設置添加班級窗口
	    $("#addDialog").dialog({
	    	title: "添加班級",
	    	....(部分代碼省略)
	    	buttons: [
	    		{
					....(部分代碼省略)
					handler:function(){
					....(部分代碼省略)
						} else{
							$.ajax({
								type: "post",
								url: "ClazzServlet?method=AddClazz",
								data: $("#addForm").serialize(),
								success: function(msg){
									....(部分代碼省略)
									}
								}
							});
			....(部分代碼省略)
	    });

上面ajax所請求的url爲"ClazzServlet?method=AddClazz"，接下來，回到Servlet中繼續創建應對AddClazz的方法。
在doPost中添加代碼。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		....
		}else if("AddClazz".equals(method)){
			addClazz(req,res);
		}
	}

創建addClazz()方法，從前臺獲取數據之後再調用Dao層的方法進行查詢，如果查詢到那麼久給瀏覽器個success的響應，瀏覽器再根據這個響應進行處理。

private void addClazz(HttpServletRequest req, HttpServletResponse res) {
	String name = req.getParameter("name");
	String info = req.getParameter("info");
	Clazz clazz = new Clazz();
	clazz.setName(name);
	clazz.setInfo(info);
	ClazzDao clazzDao = new ClazzDao();
	if(clazzDao.addClazz(clazz)){
		try {
			res.getWriter().write("success");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			clazzDao.closeCon();
		}
	}
}

在來看看Dao的addClazz方法。

public boolean addClazz(Clazz clazz){
	String sql = "insert into s_clazz values(null,'"+clazz.getName()+"','"+clazz.getInfo()+"') ";
	return update(sql);
}

因爲這個更新的操作使用的比較頻繁，就將其定義到了BaseDao中，從這裏我們就知道了如果我們執行成功就說明數據庫的操作是沒有問題的，那麼在addClazz方法中就會返回一個真，並且將這個結果發往Servlet，就能給瀏覽器發送“success”的響應。

public boolean update(String sql){
	try {
		return dbUtil.getConnection().prepareStatement(sql).executeUpdate()>0;
	} catch (SQLException e) {
		e.printStackTrace();
	}
	return false;
}

我們看看前臺收到success之後的操作，當添加數據成功後，重新刷新頁面。

success: function(msg){
	if(msg == "success"){
		$.messager.alert("消息提醒","添加成功!","info");
		//關閉窗口
		$("#addDialog").dialog("close");
		//清空原表格數據
		$("#add_name").textbox('setValue', "");
		$("#Info").val("");
		//重新刷新頁面數據
		$('#dataList').datagrid("reload");		
	} else{
		$.messager.alert("消息提醒","添加失敗!","warning");
		return;
	}

測試一下

我們看成功之後返回了一個success。

刪除功能

刪除功能上面的流程一致，這就不貼刪除鍵的html了，我們將刪除按鈕給一個id=delete。通過id選擇器來實現單擊後的操作。
第一件事，先獲取行號，確定要刪除的數據。這裏的行號傳到後臺使用req.getParameter(“clazzid”)來進行獲取。

	    $("#delete").click(function(){
	    	var selectRow = $("#dataList").datagrid("getSelected");  // 獲取行號
        	if(selectRow == null){
            	$.messager.alert("消息提醒", "請選擇數據進行刪除!", "warning");
            } else{
            	var clazzid = selectRow.id;
            	$.messager.confirm("消息提醒", "將刪除與班級信息（如果班級下存在學生或教師則不能刪除），確認繼續？", function(r){
            		if(r){
            			$.ajax({
							type: "post",
							url: "ClazzServlet?method=DeleteClazz",
							data: {clazzid: clazzid},
							success: function(msg){
								if(msg == "success"){
									$.messager.alert("消息提醒","刪除成功!","info");
									//刷新表格
									$("#dataList").datagrid("reload");
								} else{
									$.messager.alert("消息提醒","刪除失敗!","warning");
									return;
								}
							}
						});
            		}
            	});
            }
	    });

通過上面的代碼，我們明確了要訪問的地址，以及傳送的數據等，接下來和之前一樣，在doPost中添加代碼。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		....
		}else if("DeleteClazz".equals(method)){
			deleteClazz(req,res);
		}
	}

後面也是一樣要創建一個deleteClazz()方法：

private void deleteClazz(HttpServletRequest req, HttpServletResponse res) {
	Integer id = Integer.parseInt(req.getParameter("clazzid"));
	ClazzDao clazzDao = new ClazzDao();
	if(clazzDao.deleteClazz(id)){
		try {
			res.getWriter().write("success");
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			clazzDao.closeCon();
		}
	}
}

後面的操作和上面的步驟差不多，只是Dao層所使用的的sql語句不一樣，就不進行說明了。

修改功能

修改操作是在已有數據的基礎上進行的，這裏需要一個新的按鈕，並且觸發一個編輯的彈窗出來，便於修改其中的數據。修改按鈕也給一個id名稱爲edit-btn。

$("#edit-btn").click(function(){
	var selectRow = $("#dataList").datagrid("getSelected");
   	if(selectRow == null){
       	$.messager.alert("消息提醒", "請選擇數據進行修改!", "warning");
       	return;
       }
   	$("#editDialog").dialog("open");
});

定義了一個selectRow變量用來保存我們所選行的數據，我們之前創建datagrid的時候，我們的列是這樣定義的，可以使用datagrid(“getSelected”)來選擇到，並且可以獲得各個列屬性值。

	        columns: [[  
				{field:'chk',checkbox: true,width:50},
 		        {field:'id',title:'ID',width:50, sortable: true},    
 		        {field:'name',title:'班級名稱',width:200},
 		        {field:'info',title:'班級介紹',width:100, 
 		        },
	 		]],

後面我們會在ajax中的url請求地址是"ClazzServlet?method=EditClazz"，在這個模塊最後，有這樣的幾行代碼，它確保了我們打開彈窗出現的值是之前選擇的行中所對應的值。

onBeforeOpen: function(){
	var selectRow = $("#dataList").datagrid("getSelected");
	//設置值
	$("#edit_name").textbox('setValue', selectRow.name);
	$("#edit_info").val(selectRow.info); // 設置input框的值
	$("#edit-id").val(selectRow.id);
}

和之前一樣，我們需要在doPost中添加代碼。

public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		....
		}else if("EditClazz".equals(method)){
			editClazz(req,res);
		}
	}

之後再創建一個名爲editClazz()的方法，我們獲取到，其中id，name，info都是獲取的編輯框中填寫的值。

	private void editClazz(HttpServletRequest req, HttpServletResponse res) {
		// TODO Auto-generated method stub
		Integer id = Integer.parseInt(req.getParameter("id"));
		String name = req.getParameter("name");
		String info = req.getParameter("info");
		Clazz clazz = new Clazz();
		clazz.setName(name);
		clazz.setInfo(info);
		clazz.setId(id);
		ClazzDao clazzDao = new ClazzDao();
		if(clazzDao.editClazz(clazz)){
			try {
				res.getWriter().write("success");
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}finally{
				clazzDao.closeCon();
			}
		}
	}

上面也調用到了ClazzDao的方法，如果更改數據庫的數據成功之後仍然會返回一個true，方便前臺進行處理。

public boolean editClazz(Clazz clazz) {
	// TODO Auto-generated method stub
	String sql = "update s_clazz set name= '"+clazz.getName()+"' , info = '"+clazz.getInfo()+"' "
			+ "where id = '"+ clazz.getId() +"'";
	return update(sql);
}

關於班級列表的增刪改查就基本上整理完了。

學生信息管理系統----班級信息管理

嵌入班級信息到System頁面

讀取數據庫的信息

模糊查詢

添加數據

刪除功能

修改功能

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

學生信息管理系統----登錄實現

學生信息管理系統----班級信息管理

matlab變量，關鍵字

防火牆技術及應用（二）

學生信息管理系統----登錄攔截功能

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

linux以太網驅動總結