学生信息管理系统----班级信息管理
嵌入班级信息到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>ClazzServletservlet-name>
<servlet-class>com.ischoolbar.programmer.servlet.ClazzServletservlet-class>
servlet>
<servlet-mapping>
<servlet-name>ClazzServletservlet-name>
<url-pattern>/ClazzServleturl-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>