作者：叩丁狼教育，钟昕灵老师。原创文章，转载请注明出处
在完成部门的后台管理并确认无误后,下面我们继续完成部门的前台管理
前台CRUD功能的实现:
由于在本阶段,我们还未学习JS和CSS相关的知识点,要做出一个比较漂亮的页面还是有难度的,所以大家直接使用我们提供的页面,在这个基础之上完成前台管理功能
准备工作:
将我们提供好的JS/CSS和相关页面拷贝到项目的指定位置
Servlet中的请求分发
对于部门的CRUD操作来说对应着多个请求,而每个请求都需要一个Servlet中的方法来处理
所以,我们在Servlet中提供了下面四个方法来处理对应的四个请求: 查询/删除/编辑页面跳转/保存或更新
protected void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}
protected void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}
protected void input(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}
protected void saveOrUpdate(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}
但是,对于Tomcat来说,在请求Servlet的时候,都只会调用Servlet中的service方法,所以,我们想要使用上面的方法来处理对应的请求,需要在service方法中做下面的处理
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String cmd = req.getParameter("cmd");
if ("saveOrUpdate".equals(cmd)) {
saveOrUpdate(req, resp);
} else if ("input".equals(cmd)) {
input(req, resp);
} else if ("delete".equals(cmd)) {
delete(req, resp);
} else {
list(req, resp);
}
}
根据用户传递的cmd参数的值来决定调用哪一个方法来处理相应的请求
所以,就需要用户在发请求的时候,在请求中要带上对应的cmd参数,如:
删除功能:在浏览器中发起请求:http://localhost:80/department?cmd=delete
编辑功能:在浏览器中发起请求:http://localhost:80/department?cmd=input
保存或更新功能:在浏览器中发起请求:http://localhost:80/department?cmd=saveOrUpdate
查询功能:在浏览器中发起请求:http://localhost:80/department
这样,我们就能够在一个Servlet处理多个请求了,接下来,在这些方法中完成对请求的处理即可
查询功能:
调用service中的list方法,获取到所有的部门信息
将获取到的部门信息共享到请求作用域中(因为该数据只有当前请求中需要使用到)
使用请求转发跳转到list.jsp页面上(页面在WEB-INF下/数据在请求作用域中)
protected void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Department> list = service.list();
req.setAttribute("list", list);
req.getRequestDispatcher("/WEB-INF/views/department/list.jsp").forward(req, resp);
}
list.jsp页面中获取到Servlet共享在请求作用域中的数据,最终将数据响应给浏览器展示给用户
<table class="table table-striped table-hover" >
<thead>
<tr>
<th>序号</th>
<th>部门名称</th>
<th>部门编号</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${list}" var="entity" varStatus="vs">
<tr>
<td>${vs.count}</td>
<td>${entity.name}</td>
<td>${entity.sn}</td>
<td>
<a class="btn btn-info btn-xs" href="/department?cmd=input&id=${entity.id}">
<span class="glyphicon glyphicon-pencil"></span>编辑
</a>
<a href="/department?cmd=delete&id=${entity.id}" class="btn btn-danger btn-xs" >
<span class="glyphicon glyphicon-trash"></span>删除
</a>
</td>
</tr>
</c:forEach>
</table>
items="${list}" : 循环遍历从作用域中获取到的之前在Servlet中共享的List集合
var="entity" : 使用entity变量名接收每次遍历的Department对象,默认是存储在page作用域中的
varStatus="vs" : 该标签中内置的对象,可以获取到遍历出来的每个对象在集合中的索引或者遍历的个数
到此,查询功能实现,效果如下
删除功能:
点击删除超链接,传递需要删除数据的id
url:/department?cmd=delete&id=${entity.id}
protected void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
if (!StringUtils.isNullOrEmpty(id)) {
service.delete(Long.valueOf(id));
}
resp.sendRedirect("/department");
}
获取到请求中传递过来的id,然后调用service中的delete方法将数据库中对应的数据删除
此时,页面的数据需要刷新(重新查询并跳转到list.jsp)
所以,我们需要去访问Department中的list方法,又因为请求的资源不在WEB-INF下,请求作用域中没有共享数据,所以,选择使用URL重定向
效果:点击删除超链接后,页面上对应的数据会立即消失
新增功能
需求:
点击新增超链接,跳转到编辑页面
提交表单,将表单中提交的数据保存到数据库
回到list.jsp页面,显示数据库中最新的数据
新增超链接:
<a href="/department?cmd=input" class="btn btn-success">添加</a>
Servlet中input方法:
protected void input(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getRequestDispatcher("/WEB-INF/views/department/input.jsp").forward(req, resp);
}
以上,实现了点击添加超链接跳转到input.jsp页面的功能,可以看到下面的编辑页面
此时,用户可以在该页面中填写部门相关的信息,然后点击保存发起保存数据的请求
<form class="form-horizontal" action="/department?cmd=saveOrUpdate" method="post" id="editForm">
Servlet中saveOrUpdate方法
protected void saveOrUpdate(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String sn = req.getParameter("sn");
Department department = new Department();
department.setName(name);
department.setSn(sn);
service.save(department);
resp.sendRedirect("/department");
}
执行上面代码,将数据保存到数据库中,然后访问DepartmentServlet中的list方法执行重新查询,最后跳转到list.jsp页面中,效果如下
编辑功能:
需求:
点击数据行中的编辑超链接,跳转到编辑页面
在编辑页面中,显示当前编辑部门的数据
修改数据,提交表单,最终将修改后的最新数据显示在浏览器中
编辑超链接
<a class="btn btn-info btn-xs" href="/department?cmd=input&id=${entity.id}">
Servlet中的input方法:
因为新增和更新都需要跳转到input.jsp页面,所以,我们在Servlet中使用同一个方法来处理
只是需要区分用户是新增还是编辑,那么如何区分呢?
编辑的时候,请求中会传递对应数据的id,而新增不会,所以,input方法代码如下
protected void input(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
if (!StringUtils.isNullOrEmpty(id)) {
Department department = service.get(Long.valueOf(id));
req.setAttribute("department", department);
}
req.getRequestDispatcher("/WEB-INF/views/department/input.jsp").forward(req, resp);
}
当id不为空时,根据id查询到对应的Department信息,然后共享到请求作用域中(需要在input.jsp页面中回显)
可以看到,在点击编辑之后,跳转到了编辑页面,并且数据显示在了对应的位置
提交表单,将数据更新到数据库中
因为后台执行更新需要使用到当前数据的id,所以我们需要想办法将id传递过去
又因为当前数据的id是用户并不关心的数据,所以,我们选择使用隐藏域来实现
<input type="hidden" value="${department.id}" name="id">
将这行代码放在表单中,提交请求,后台就能够根据提交的数据执行更新操作了
因为新增和更新操作实现的逻辑基本一致,所以我们在saveOrUpdate方法中完成对数据的新增和更新操作
那么,又是如何区分新增和更新的呢?
和上面点击新增和编辑做页面跳转的思路一致,使用请求参数中的id是否有值进行区分
如果id没有值,说明是新增操作,执行save方法
如果id有值,说明是更新操作,将id设值给Department对象后,再执行update方法
protected void saveOrUpdate(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String sn = req.getParameter("sn");
String id = req.getParameter("id");
Department department = new Department();
department.setName(name);
department.setSn(sn);
if (StringUtils.isNullOrEmpty(id)) {
service.save(department);
} else {
department.setId(Long.valueOf(id));
service.update(department);
}
resp.sendRedirect("/department");
}
更新效果实现
部门的WEB CRUD实现完毕。
点击查看JavaWeb系列的其它文章
手把手教你做JavaWeb项目：项目需求分析
手把手教你做JavaWeb项目：多条件过滤
手把手教你做JavaWeb项目：登录模块
前往叩丁狼官网获取更多技术视频
