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的内容，大功告成！非常完美啊。