嵌入班級信息到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 stubtry {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 blocke.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")); // 獲取前臺數據轉為IntegerInteger 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 blocke.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 blocke.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 blocke.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 blocke.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 stubInteger 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 blocke.printStackTrace();}finally{clazzDao.closeCon();}}}

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

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

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

總結

以上是生活随笔為你收集整理的学生信息管理系统----班级信息管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。