嵌入班級(jí)信息到System頁(yè)面

??這一部分要實(shí)現(xiàn)班級(jí)信息的相關(guān)操作。
??還是在名為servlet的package下創(chuàng)建一個(gè)顯示班級(jí)列表的Servlet——ClazzServlet。這樣取名字是避免與系統(tǒng)關(guān)鍵字class起沖突，以免出現(xiàn)不必要的麻煩。

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

??接下來(lái)還是要在web.xml中對(duì)這個(gè)Servlet進(jìn)行配置，建立與訪問(wèn)路徑的一個(gè)映射。

<servlet><description>班級(jí)信息管理</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>

??第三步，我們打開(kāi)素材文件，找到clazzList.jsp，將其復(fù)制到view目錄下。
打開(kāi)里面部分代碼如下面所示，我們之前已經(jīng)將左邊的菜單欄布置好了，當(dāng)用戶點(diǎn)擊菜單欄中的班級(jí)列表時(shí)，我們需要將clazzList.jsp在右邊顯示出來(lái)。

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中有這樣一行代碼，這個(gè)請(qǐng)求就是發(fā)往ClazzServlet的，并且傳入了一個(gè)參數(shù) toClazzListView，我們根據(jù)這個(gè)參數(shù)實(shí)現(xiàn)了請(qǐng)求轉(zhuǎn)發(fā)。

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

??現(xiàn)在已經(jīng)將班級(jí)列表頁(yè)面，即clazzList.jsp能夠動(dòng)態(tài)的嵌入到System.jsp中了，打開(kāi)clazzList.jsp，有這樣的幾行代碼：功能是顯示班級(jí)列表，通過(guò)傳遞getClazzList來(lái)顯示班級(jí)列表。

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

??我們按照這里給出的url在ClazzServlet中進(jìn)行參數(shù)的傳遞，ClazzServlet的doPost方法就成了下面的樣子。我們通過(guò)調(diào)用的getClazzList()方法來(lái)顯示從數(shù)據(jù)庫(kù)中讀取的數(shù)據(jù)。

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);}}

讀取數(shù)據(jù)庫(kù)的信息

??但是我們還沒(méi)有實(shí)現(xiàn)從數(shù)據(jù)庫(kù)中讀取列表的方法。
接下來(lái)我們要?jiǎng)?chuàng)建一個(gè)班級(jí)列表的model類——Clazz.java，并且附上相應(yīng)的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，我們就可以相應(yīng)的在dao的package下創(chuàng)建一個(gè)dao——ClazzDao。
??我們還要根據(jù)顯示的頁(yè)面來(lái)實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)顯示，在這之前我們創(chuàng)建一個(gè)Page的model，但是這個(gè)類并沒(méi)有在數(shù)據(jù)庫(kù)中對(duì)應(yīng)存在的數(shù)據(jù)表，只是方便在分頁(yè)的時(shí)候做處理。

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

??從這個(gè)類的的構(gòu)造函數(shù)中可以看出，每一頁(yè)的起始頁(yè)都是當(dāng)前的頁(yè)數(shù)減一再乘以每一頁(yè)的數(shù)目，這一點(diǎn)不難理解。
有了page之后，可以在ClazzDao中實(shí)現(xiàn)查詢班級(jí)列表的方法。

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語(yǔ)句來(lái)看，這里的分頁(yè)查詢是基于了sql語(yǔ)句的拼接。是" limit " + page.getStart() +","+page.getPageSize();這部分起到了作用。

??我們?cè)谏厦娴腃lazzServlet已經(jīng)給出了getClazzList(req, res);方法，但是還沒(méi)有具體實(shí)現(xiàn)。回到ClazzServlet，在doPost方法下可以寫(xiě)。

private void getClazzList(HttpServletRequest req,HttpServletResponse res){String name = req.getParameter("name"); // 獲取前臺(tái)參數(shù)Integer currentPage = Integer.parseInt(req.getParameter("page")); // 獲取前臺(tái)數(shù)據(jù)轉(zhuǎn)為IntegerInteger pageSize = Integer.parseInt(req.getParameter("rows"));Clazz clazz = new Clazz(); //創(chuàng)建一個(gè)Clazz對(duì)象clazz.setName(name); // 給班級(jí)對(duì)象的班級(jí)名屬性進(jìn)行賦值，這個(gè)值是前臺(tái)傳來(lái)的，用于在數(shù)據(jù)庫(kù)中按照班級(jí)名進(jìn)行條件查詢的ClazzDao clazzDao = new ClazzDao(); List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize)); // 獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，多條查詢結(jié)果，所以用List存儲(chǔ)clazzDao.closeCon();JsonConfig jsonConfig = new JsonConfig(); String clazzListString = JSONArray.fromObject(clazzList, jsonConfig).toString();System.out.println(clazzListString); // 查詢的結(jié)果轉(zhuǎn)為Json串res.setCharacterEncoding("utf-8"); // 設(shè)置字符集，防止亂碼try {res.getWriter().write(clazzListString); // 返回相應(yīng)給客戶端} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} }

??那么返回的響應(yīng)，是什么樣子的呢，可以打開(kāi)F12調(diào)試窗口看一下我們從后臺(tái)得到的數(shù)據(jù)是什么樣子的。

??回到clazzList.jsp，以下就是數(shù)據(jù)顯示的表格，所以一切查詢到的數(shù)據(jù)都是動(dòng)態(tài)的添加在這個(gè)表格中的。記住，這里的id為dataList，是先在html中定義數(shù)據(jù)顯示的行和列。

<!-- 數(shù)據(jù)列表 --><table id="dataList" cellspacing="0" cellpadding="0"> </table>

??使用Id選擇器選擇到了上面的數(shù)據(jù)列表，并且創(chuàng)建了一個(gè)數(shù)據(jù)網(wǎng)絡(luò)（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:'班級(jí)名稱',width:200},{field:'info',title:'班級(jí)介紹',width:100},]], });

最終獲取的數(shù)據(jù)將會(huì)在這里顯示出來(lái)。

模糊查詢

??根據(jù)條件來(lái)查詢相關(guān)的數(shù)據(jù)在clazzDao查詢班級(jí)列表的功能中已經(jīng)實(shí)現(xiàn)好了，其核心代碼就是在我們輸入了關(guān)鍵信息，并且根據(jù)這個(gè)信息作為條件來(lái)返回?cái)?shù)據(jù)。

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

??這里我們要完成的功能是按照條件進(jìn)行模糊查詢，但是素材中并沒(méi)有搜索框與搜索按鈕，這里要我們自己去設(shè)定。所以仍然是在clazzList.jsp中進(jìn)行修改。

<div style="margin-top: 3px">班級(jí)名稱：<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>

??接著要給搜索按鈕添加一個(gè)事件的監(jiān)聽(tīng)，當(dāng)點(diǎn)擊的時(shí)候觸發(fā) datagrid.load方法。把參數(shù)clazzName傳入到后臺(tái)，通過(guò)requet.getParamete(‘clazzName’)來(lái)獲取。

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

??模糊查詢也是查詢，所以可以使用之前定義在Servlet層的getClazzList方法，Dao層也仍然要使用getClazzList方法。如上圖中標(biāo)志2的部分，我們需要統(tǒng)計(jì)出符合模糊查詢條件的數(shù)據(jù)個(gè)數(shù)，所以需要在Dao層定義一個(gè)便于統(tǒng)計(jì)個(gè)數(shù)的方法。

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; }

??因?yàn)椴樵兊降臄?shù)據(jù)仍然是使用list來(lái)返回的，現(xiàn)在需要對(duì)getClazzList()方法進(jìn)行修改，將統(tǒng)計(jì)查詢結(jié)果的個(gè)數(shù)和查得到的數(shù)據(jù)一起返回給瀏覽器。

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對(duì)象的name屬性進(jìn)行賦值ClazzDao clazzDao = new ClazzDao(); List<Clazz> clazzList = clazzDao.getClazzList(clazz, new Page(currentPage, pageSize));clazzDao.closeCon();int total = clazzDao.getClazzListTotal(clazz); // 獲取模糊查詢結(jié)果的總結(jié)果數(shù)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中的數(shù)據(jù)轉(zhuǎn)換為json} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} }

打開(kāi)瀏覽器 調(diào)試窗口，也可以查看到返回的響應(yīng)信息。

添加數(shù)據(jù)

??因?yàn)橐砑訑?shù)據(jù)，我們所想自然也需要一個(gè)填寫(xiě)信息的彈窗來(lái)做為填寫(xiě)數(shù)據(jù)的載體。而素材文件中也包含這一部分代碼。

<!-- 添加窗口 --> <div id="addDialog" style="padding: 10px"> <form id="addForm" method="post"><table cellpadding="8" ><tr><td>班級(jí)名稱:</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>班級(jí)介紹:</td><td><textarea name="info" style="width:200px; height:60px;"cols=""></textarea></td></tr></table></form> </div> //設(shè)置添加班級(jí)窗口$("#addDialog").dialog({title: "添加班級(jí)",....(部分代碼省略)buttons: [{....(部分代碼省略)handler:function(){....(部分代碼省略)} else{$.ajax({type: "post",url: "ClazzServlet?method=AddClazz",data: $("#addForm").serialize(),success: function(msg){....(部分代碼省略)}}});....(部分代碼省略)});

??上面ajax所請(qǐng)求的url為"ClazzServlet?method=AddClazz"，接下來(lái)，回到Servlet中繼續(xù)創(chuàng)建應(yīng)對(duì)AddClazz的方法。
在doPost中添加代碼。

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

??創(chuàng)建addClazz()方法，從前臺(tái)獲取數(shù)據(jù)之后再調(diào)用Dao層的方法進(jìn)行查詢，如果查詢到那么久給瀏覽器個(gè)success的響應(yīng)，瀏覽器再根據(jù)這個(gè)響應(yīng)進(jìn)行處理。

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();}} }

在來(lái)看看Dao的addClazz方法。

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

??因?yàn)檫@個(gè)更新的操作使用的比較頻繁，就將其定義到了BaseDao中，從這里我們就知道了如果我們執(zhí)行成功就說(shuō)明數(shù)據(jù)庫(kù)的操作是沒(méi)有問(wèn)題的，那么在addClazz方法中就會(huì)返回一個(gè)真，并且將這個(gè)結(jié)果發(fā)往Servlet，就能給瀏覽器發(fā)送“success”的響應(yīng)。

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

??我們看看前臺(tái)收到success之后的操作，當(dāng)添加數(shù)據(jù)成功后，重新刷新頁(yè)面。

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

測(cè)試一下

??我們看成功之后返回了一個(gè)success。

刪除功能

??刪除功能上面的流程一致，這就不貼刪除鍵的html了，我們將刪除按鈕給一個(gè)id=delete。通過(guò)id選擇器來(lái)實(shí)現(xiàn)單擊后的操作。
第一件事，先獲取行號(hào)，確定要?jiǎng)h除的數(shù)據(jù)。這里的行號(hào)傳到后臺(tái)使用req.getParameter(“clazzid”)來(lái)進(jìn)行獲取。

$("#delete").click(function(){var selectRow = $("#dataList").datagrid("getSelected"); // 獲取行號(hào)if(selectRow == null){$.messager.alert("消息提醒", "請(qǐng)選擇數(shù)據(jù)進(jìn)行刪除!", "warning");} else{var clazzid = selectRow.id;$.messager.confirm("消息提醒", "將刪除與班級(jí)信息（如果班級(jí)下存在學(xué)生或教師則不能刪除），確認(rèn)繼續(xù)？", 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;}}});}});}});

??通過(guò)上面的代碼，我們明確了要訪問(wèn)的地址，以及傳送的數(shù)據(jù)等，接下來(lái)和之前一樣，在doPost中添加代碼。

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

后面也是一樣要?jiǎng)?chuàng)建一個(gè)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語(yǔ)句不一樣，就不進(jìn)行說(shuō)明了。

修改功能

??修改操作是在已有數(shù)據(jù)的基礎(chǔ)上進(jìn)行的，這里需要一個(gè)新的按鈕，并且觸發(fā)一個(gè)編輯的彈窗出來(lái)，便于修改其中的數(shù)據(jù)。修改按鈕也給一個(gè)id名稱為edit-btn。

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

??定義了一個(gè)selectRow變量用來(lái)保存我們所選行的數(shù)據(jù)，我們之前創(chuàng)建datagrid的時(shí)候，我們的列是這樣定義的，可以使用datagrid(“getSelected”)來(lái)選擇到，并且可以獲得各個(gè)列屬性值。

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

??后面我們會(huì)在ajax中的url請(qǐng)求地址是"ClazzServlet?method=EditClazz"，在這個(gè)模塊最后，有這樣的幾行代碼，它確保了我們打開(kāi)彈窗出現(xiàn)的值是之前選擇的行中所對(duì)應(yīng)的值。

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

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

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

??之后再創(chuàng)建一個(gè)名為editClazz()的方法，我們獲取到，其中id，name，info都是獲取的編輯框中填寫(xiě)的值。

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();}}}

??上面也調(diào)用到了ClazzDao的方法，如果更改數(shù)據(jù)庫(kù)的數(shù)據(jù)成功之后仍然會(huì)返回一個(gè)true，方便前臺(tái)進(jìn)行處理。

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); }

關(guān)于班級(jí)列表的增刪改查就基本上整理完了。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。