JSP+Servlet培训班作业管理系统[3]–点击菜单加载功能页面

1. 背景

上一篇我们已经实现了后台管理页面基本的布局。本篇我们要实现一个重要功能,就是点击左侧菜单后,跳转对应页面的功能。


例如左侧点击“课程管理”菜单,右侧就要显示课程管理对应的jsp页面。


2. 创建演示页面

为了便于演示,我们创建两个演示页面page1.jsp和page2.jsp。代码如下:


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标签需要添加本行代码 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

</head>

<body>这里是page1.jsp

</body>

</html>

1

2

3

4

5

6

7

8

9

10

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标签需要添加本行代码 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

</head>

<body>这里是page2.jsp

</body>

</html>

1

2

3

4

5

6

7

8

9

10

3. 构造超级链接

改造index.jsp左侧菜单,将固定文字替换为超级标签导航。


 <div id="left">

  <ul>

   <li><a href="page1.jsp">页面1</a></li>

   <li><a href="page2.jsp">页面2</a></li>

  </ul>

 </div>

1

2

3

4

5

6

此时点击左侧菜单,会直接跳转到page1.jsp,并未实现我们想要的page1.jsp内容显示到右侧内容区域的效果。


此路不通!


4. 实现jsp页面的动态包含

jsp提供了<jsp:include>标签用于动态的将jsp页面内容嵌入当前页面。


我们的思路修改下,首先超级链接a标签后,跳转servlet,servlet获取a标签指定的页面信息,然后再跳回index.jsp页面。


此时可以将页面信息通过<jsp:include>将指定页面放入右侧内容区域,这样就实现了我们想要的效果。


4.1 修改左侧菜单部分的超级链接。

       <div id="left">

  <ul>

   <li><a href="/HomeworkSystem/RouteServlet?childPage=page1.jsp">页面1</a></li>

   <li><a href="/HomeworkSystem/RouteServlet?childPage=page2.jsp">页面2</a></li>

  </ul>

 </div>

1

2

3

4

5

6

4.2 创建用于导航的servlet

创建RouteServlet,功能很简单,就是接受超级链接发起的请求,还是返回index.jsp页面,但是告知index.jsp页面右侧内容区域要加载的页面信息,即子页面childPage名称。



@WebServlet("/RouteServlet")

public class RouteServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

 // 设置输入输出格式、编码

 response.setContentType("text/html");

 request.setCharacterEncoding("utf-8");

 response.setCharacterEncoding("utf-8");

 // 获取用户在网页输入的用户名和密码

 String childPage = request.getParameter("childPage");

 request.setAttribute("childPage", childPage);

 request.getRequestDispatcher("/index.jsp").forward(request, response);// 跳转到index.jsp

}

}

  • ????

4.3 右侧区域动态包含

右侧内容区域就根据childPage,动态加载指定页面即可。注意当childPage不存在时(尚未点击菜单),直接显示固定文字即可。


 <div id="right">

  <c:if test="${empty childPage}">

     欢迎来到猫哥培训班管理系统

    </c:if>

  <c:if test="${not empty childPage}">

   <jsp:include page="${childPage}" flush="true"></jsp:include>

  </c:if>

 </div>

5. 测试验证

点击相应菜单1、菜单2,右侧即可显示page1.jsp、page2.jsp的内容,大功告成!非常完美啊。

上一篇:ECshop详细页面 颜色 尺码 等规格和库存相连动 和淘宝的格式一样


下一篇:DRV8848通道输出不正常原因