学生信息管理系统----班级信息管理
嵌入班级信息到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这个特定的JSP文件. 查看其中部分代码内容时, 请注意右侧的结构已经被预先配置好. 我们之前已经将左侧菜单栏的部分功能模块已经完成搭建工作. 当用户点击左侧菜单栏中的"班级列表"选项时, 请确保右边的区域能够正确显示 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中的某一行代码执行时，在该组件接收一个来自某个特定Servlet（如ClazzServlet）的请求。该请求被转发至另一个组件（如toClazzListView），并传递了toClazzListView这个参数。通过该参数的值我们实现了对该请求的转发。
{"menuid":"42","menuname":"班级列表","icon":"icon-house","url":"ClazzServlet?method=toClazzListView"},目前实现了将clazzList.jsp页面作为动态组件嵌入到System.jsp系统中，并且该组件能够实时更新和维护最新的班级信息库。访问该页面时会发现几段代码片段：这些代码的主要作用是展示各班信息，并通过指定的方法获取完整的班级数据。
$('#dataList').datagrid({
....
....(部分代码省略)
method: "post",
// 给服务器发送请求
url:"ClazzServlet?method=getClazzList&t="+new Date().getTime(),
idField:'id',
....
....(部分代码省略)
})我们通过指定此处提供的URL并在ClazzServlet中执行参数传输操作,使得该 servlet的 doPost方法呈现出以下形式.我们则利用获取类名单的方法以展示从数据库中读取的数据信息.
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，并将相应的方法提供给该类。
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;
}
....(部分代码省略)
}有了之后模型可用时，在对应的包下我们可以生成一个ClazzDao实例。
为此，在此之前我们需要先创建关于Page的数据模型。
但这个模型并不是直接映射到数据库中的实体数据表，并只是为了满足分页操作的需求而设计。
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语句可以看出，这里的分页查询采用了拼接的方式进行处理。其中这部分实现了功能：即在字符串' limit '之后追加页码起始位置以及每页显示的数量参数。
我们已经在上文中完成了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();
}
}当程序运行时返回的响应的形式是什么样的？可以通过查看后台数据获取详细信息。
请返回至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中用于获取班级列表的功能模块已实现了；其中核心代码就是当我们在 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层也需要调用该方法以完成类似的逻辑功能。例如，在上图中标记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请求所访问的目标地址为'ClazzServlet?method=AddClazz'；随后，在进入该ServletContext后需继续创建应对AddClazZ的方法；在doPost方法中添加相应的代码实现。
public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
....
}else if("AddClazz".equals(method)){
addClazz(req,res);
}
}实现一个名为addClazz()的方法，在获取前台数据后通过调用Dao层的方法来进行数据查询。如果发现存在对应的数据，则会向浏览器发送成功响应。随后，由浏览器依据该响应来执行相应的处理流程。
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方法中若操作完成则会返回布尔值true，并将此结果传递给ServletContext从而实现页面的成功反馈功能。
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变量用于存储相关的信息，在之前为DataGridView配置时各列的属性设定如下：可以通过调用DataGridView.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);
}
}我们能够获得id、name和info均源自编辑框中的填写内容
我们能够获得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);
}关于班级列表的增删改查就基本上整理完了。