本文完成员工管理系统的员工信息列表的搜索页面。其需求功能如下图所示:
员工信息列表页面实现从首页点击查看员工列表进去员工列表的html页面
其页面代码如下:
员工管理系统-员工信息列表
员工信息列表
员工编号
员工姓名
员工年龄
员工性别
入职时间
部门名称
功能 *** 作
在列表页面加载完毕后，自动向服务器发送ajax请求，要求服务器从数据库中获得三部分的数据，
1.获得数据库中所有部门信息
2.获得所有员工的入职时间
3.获得所有员工的信息
因此我们创建ListServlet类，其代码如下:
package com.emp.controller;
import com.emp.service.EmpServiceImp;
import com.emp.service.IEmpService;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet(urlPatterns = "/ListServlet")
public class ListServlet extends HttpServlet {
IEmpService service=new EmpServiceImp();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//1.从数据库中获取现有的所有部门名称
List work = service.getWork();
//2.从数据库中获取现有的入职时间
List dateList = service.getDateList();
//3.从数据库中获取所有员工信息
List> workList = service.getWorkList();
//将三部分数据封装在map集合中，然后转换成json格式
Map map=new HashMap<>();
map.put("work",work);
map.put("dateList",dateList);
map.put("workList",workList);
//{"work":["","",""],"dateList":["","",""],"workList":[{"id":1,"name":"张三"},{},{},{}]}
new ObjectMapper().writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
分别调用业务逻辑层中的三个方法获得三部分的数据:
List getWork(); //获取所有入职时间
List getDateList(); //获得所有员工信息
List> getWorkList(); 对应于业务逻辑层实现类实现该三个方法:
@Override
public List getWork() {
return dao.getWork();
}
@Override
public List getDateList() {
return dao.getDateList();
}
@Override
public List> getWorkList() {
return dao.getWorkList();
} 并在数据访问层接口中定义准备执行的方法：
List getWork();
//获取所有入职时间
List getDateList();
//获得所有员工信息
List> getWorkList(); 数据访问层实现类分别执行各自的sql语句方法获得数据库的对应部分的数据:
@Override
public List getWork() {
return DBUtil.jt.query("select distinct workClass from emp",
new MyRowMapper("workClass") );
} @Override
public List getDateList() {
return DBUtil.jt.query("select distinct openDate from emp order by openDate ASC",
new MyRowMapper("openDate"));
} @Override
public List> getWorkList() {
return DBUtil.jt.queryForList("select * from emp");
} class MyRowMapper implements RowMapper{
String str="";
public MyRowMapper(String str){
this.str=str;
}
@Override
public String mapRow(ResultSet resultSet, int i) throws SQLException {
return resultSet.getString(str);
}
} 最后三部分的数据右控制层的servlet将数据转换成json格式发送给列表页面进行解析，并显示出来，其页面效果如下:
实现部门和入职时间的二级联动功能
当用户选择部门后，触发文本内容改变事件OnChang事件，将用户选择的部门名称通过ajax请求发送给服务器，要求服务器根据部门名称查询出该部门下所有员工的入职时间并且去除重复:
其ajax请求代码如下:
function f(obj) {
var info =obj.value;
//根据用户选择的部门名称，发送ajax请求
//要求服务器根据部门名称作为条件查询该部门中的员工的入职时间
$.ajax({
url:"ListServlet",
type:"GET",
data:"workClass="+info,
success:function (json) {
//["","","",""]
//将之前加载的入职时间进行清除
$("#d3").empty();
for (var i = 0; i "+json[i]+"");
}
},
error:function () {
alert("连接失败");
},
dataType:"json"
});
} 接着在ListServlet的doget方法中接收该请求:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
request.setCharacterEncoding("UTF-8");
response.setContentType("UTF-8");
//根据部门名称作为条件查询该部门中的员工的入职时间
String workClass = request.getParameter("workClass");
List dateByWorkClass = service.getDateByWorkClass(workClass);
//["","","",""]
new ObjectMapper().writeValue(response.getWriter(),dateByWorkClass);
} 控制层将任务递交给业务逻辑层接口执行:
//根据部门名称查询该部门下的员工的入职时间
List getDateByWorkClass(String workClass); 并有业务逻辑层实现类进行 *** 作递交给数据访问层执行:
@Override
public List getDateByWorkClass(String workClass) {
workClass=(workClass==null)?"%%":"%"+workClass+"%";
return dao.getDateByWorkClass(workClass);
} 业务逻辑层对数据进行判断，判断用户是否选择部门，如果未选择部门，说明用户需要查询所有员工的入职时间。递交给数据访问层接口:
//根据部门名称查询该部门下的员工的入职时间
List getDateByWorkClass(String workClass); 并由实现类实现:
@Override
public List getDateByWorkClass(String workClass) {
return DBUtil.jt.query("select distinct openDate from emp where workClass like ? order by openDate",
new Object[]{workClass},
new MyRowMapper("openDate"));
} 最后将查询的结果返回控制层，由控制层转换成json格式返回html页面中，通过选择部门，可以发现入职时间也在随着变化。
根据部门，时间实现搜索功能分析思路:
1.用户不选择部门，也不选择入职时间，说明用户想查询所有员工信息
2.用户只选择部门，不选择入职时间，说明用户想查看该部门下的所有员工信息
3.用户不选择部门，只选择入职时间，说明用户想查看该入职时间下的所有部门的员工信息
4.用户即选择部门，又选择入职时间，说明用户想查看该部门中某个入职时间的员工信息
因此在用户点击搜索按钮的时间，我们需要为按钮添加onClink点击时间，其代码如下:
function btn() {
//点击搜索按钮，触发该点击事件
//获得用户选择的部门名称以及入职时间
var text1=$("input[name='workClass']").val();
var text2=$("input[name='openDate']").val();
//该服务器发送ajax请求，根据选择的部门名称和入职时间查询员工信息
$.ajax({
url:"SearchServlet",
type:"POST",
data:"workClass="+text1+"&openDate="+text2,
success:function (json) {
//[{},{},{}]
//要刷新表格中的数据
//要将表格中的数据进行清除
$("#tab").empty();
$("#tab").html(html);
for (var i = 0; i \n" +
" "+json[i].id+" \n" +
" "+json[i].name+" \n" +
" "+json[i].age+" \n" +
" "+json[i].sex+" \n" +
" "+json[i].openDate+" \n" +
" "+json[i].workClass+" \n" +
" \n" +
" \n" +
" ")
}
},
error:function () {
alert("连接失败");
},
dataType:"json"
});
} ajax的请求发送给服务器的servlet，其代码如下:
package com.emp.controller;
import com.emp.service.EmpServiceImp;
import com.emp.service.IEmpService;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;
@WebServlet(urlPatterns = "/SearchServlet")
public class SearchServlet extends HttpServlet {
IEmpService service=new EmpServiceImp();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//接收浏览器发送过来的部门信息和入职时间
String workClass = request.getParameter("workClass");
String openDate = request.getParameter("openDate");
List> list = service.getList(workClass, openDate);
//map，自定义实体类转换成json格式是{},并且大括号里面一定会产生键值对的格式
//数组，list，set转换成json格式是[]
//[{},{},{}]
new ObjectMapper().writeValue(response.getWriter(),list);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
控制器将接收的数据发送给业务逻辑层接口:
//根据部门名称和入职时间查询员工信息
List> getList(String workClass,String openDate); 并有实现类实现:
@Override
public List> getList(String workClass, String openDate) {
//1.用户不选择部门，也不选择入职时间，说明用户想查询所有员工信息
//2.用户只选择部门，不选择入职时间，说明用户想查看该部门下的所有员工信息
//3.用户不选择部门，只选择入职时间，说明用户想查看该入职时间下的所有部门的员工信息
//4.用户即选择部门，又选择入职时间，说明用户想查看该部门中某个入职时间的员工信息
workClass= (workClass!=null)?"%"+workClass+"%":"%%";
openDate= (openDate!=null)? "%"+openDate+"%":"%%";
return dao.getList(workClass,openDate);
} 接着将经过逻辑处理后的数据递交给数据访问层接口:
//根据部门名称和入职时间查询员工信息
List> getList(String workClass,String openDate); 并由实现类执行sql语句查询 *** 作:
@Override
public List> getList(String workClass, String openDate) {
return DBUtil.jt.queryForList("select * from emp where workClass like ? and openDate like ?",
new Object[]{workClass,openDate});
} 其最后实现的效果如下:
1.用户只选择部门名称，不选择入职时间，说明用户想查看当前部门的所有员工信息
2.用户不选择部门名称，只选择入职时间，说明用户想查看某一天中所入职的所有员工信息
3.用户即选择部门名称，也选择入职时间，说明用户想查看某一个部门某一天的入职的员工信息
4.用户即不选择部门名称，也不选择入职时间，说明用户想查看任何部门的任何时间段的员工信息
总结
本文对员工列表信息页面的功能实现，读者可以根据该页面的功能，对需求的分析以及对于ajax和json格式的综合运用和学习有一定的帮助，读者也可自行在本页面中追加功能，使其更完善！！！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）