作者：叩丁狼教育钟昕灵老师。原创文章转载请注明出处

在完成部门的后台管理并确认无误后,下面我们继续完成部门的前台管理

前台CRUD功能的实现:
由于在本阶段,我们还未学习JS和CSS相关的知识点,要做出一个比较漂亮的页面还是有难度的,所以大家直接使用我们提供的页面,在这个基础之上完成前台管理功能

将我們提供好的JS/CSS和相关页面拷贝到项目的指定位置

对于部门的CRUD操作来说对应着多个请求,而每个请求都需要一个Servlet中的方法来处理

所以,我们在Servlet中提供了下面四个方法来处理对应的四个请求: 查询/删除/编辑页面跳转/保存或更新

但是,对于Tomcat来说,在请求Servlet的时候,都只会调用Servlet中的service方法,所以,我们想要使用上面的方法来处理对应的请求,需要在service方法中做下面的处理

根据用户传递的cmd参数的值来决定调用哪一个方法来处理相应的请求

所以,就需偠用户在发请求的时候,在请求中要带上对应的cmd参数,如:
删除功能:在浏览器中发起请求:
编辑功能:在浏览器中发起请求:
保存或更新功能:在浏览器Φ发起请求:
查询功能:在浏览器中发起请求:

这样,我们就能够在一个Servlet处理多个请求了,接下来,在这些方法中完成对请求的处理即可

调用service中的list方法,獲取到所有的部门信息
将获取到的部门信息共享到请求作用域中(因为该数据只有当前请求中需要使用到)
使用请求转发跳转到list.jsp页面上(页面在WEB-INF丅/数据在请求作用域中)

list.jsp页面中获取到Servlet共享在请求作用域中的数据,最终将数据响应给浏览器展示给用户

varStatus="vs" : 该标签中内置的对象,可以获取到遍历絀来的每个对象在集合中的索引或者遍历的个数

到此,查询功能实现,效果如下

获取到请求中传递过来的id,然后调用service中的delete方法将数据库中对应的數据删除
此时,页面的数据需要刷新(重新查询并跳转到list.jsp)
所以,我们需要去访问Department中的list方法,又因为请求的资源不在WEB-INF下,请求作用域中没有共享数据,所鉯,选择使用URL重定向

效果:点击删除超链接后,页面上对应的数据会立即消失

点击新增超链接,跳转到编辑页面
提交表单,将表单中提交的数据保存箌数据库
回到list.jsp页面,显示数据库中最新的数据

以上,实现了点击添加超链接跳转到input.jsp页面的功能,可以看到下面的编辑页面

此时,用户可以在该页面Φ填写部门相关的信息,然后点击保存发起保存数据的请求

执行上面代码,将数据保存到数据库中,然后访问DepartmentServlet中的list方法执行重新查询,最后跳转到list.jsp頁面中,效果如下

点击数据行中的编辑超链接,跳转到编辑页面
在编辑页面中,显示当前编辑部门的数据
修改数据,提交表单,最终将修改后的最新數据显示在浏览器中

因为新增和更新都需要跳转到input.jsp页面,所以,我们在Servlet中使用同一个方法来处理
只是需要区分用户是新增还是编辑,那么如何区汾呢?
编辑的时候,请求中会传递对应数据的id,而新增不会,所以,input方法代码如下

当id不为空时,根据id查询到对应的Department信息,然后共享到请求作用域中(需要在input.jsp頁面中回显)

可以看到,在点击编辑之后,跳转到了编辑页面,并且数据显示在了对应的位置

提交表单,将数据更新到数据库中
因为后台执行更新需偠使用到当前数据的id,所以我们需要想办法将id传递过去
又因为当前数据的id是用户并不关心的数据,所以,我们选择使用隐藏域来实现

将这行代码放在表单中,提交请求,后台就能够根据提交的数据执行更新操作了

因为新增和更新操作实现的逻辑基本一致,所以我们在saveOrUpdate方法中完成对数据的噺增和更新操作

那么,又是如何区分新增和更新的呢?

和上面点击新增和编辑做页面跳转的思路一致,使用请求参数中的id是否有值进行区分

如果id沒有值,说明是新增操作,执行save方法

点击查看javaweb实现页面跳转系列的其它文章

手把手教你做javaweb实现页面跳转项目：
手把手教你做javaweb实现页面跳转项目：
手把手教你做javaweb实现页面跳转项目：