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

来源：互联网发布：php弱类型编辑：程序博客网时间：2024/04/28 19:44

继续我们的事业task2-1到task2-3中，猫哥基本实现了shoolmater.jsp显示方面的问题，也就是校长登录后看到的后台页面显示问题。
本篇继续完善shoolmater.jsp页面，主要有以下三点：

task2-4:完成顶部标题栏设计，使右侧显示登录用户的信息task2-5:完善左侧菜单栏的设计，使菜单栏每个选项指向一个网页task2-6:完善右侧内容区域设计，点击菜单栏对应菜单，内容区域显示相应网页的内容

一步步来，首先task2-4，比较简单，我们修改网页部分代码为：

    <div id="top">            <div id="top_title">                猫哥培训班作业管理系统            </div><!-- 标题部分 -->            <div id="top_info">                已登录用户名：张三            </div><!-- 登录用户信息部分 -->        </div><!-- top部分是标题栏 -->

为了让top_title部分靠左，top_info部分靠右，修改CSS代码部分为：

/*宽度占满它爹的宽度，高度64px是瞎试的，不好看再调整，猫哥喜欢用16px、32px、64px、128px这些，你懂的。    背景色猫哥继续取色器    line-height表示文字占用的高度，它也是64那就是文字占用高度跟top区域高度是一样的嘛，所以文字就居中了*/    #top{        width:100%;        height:64px;        background-color:#000000;        line-height:64px;       }    /*文字颜色取色器，标题部分啊文字用微软雅黑，大气！*/    #top_title{        line-height:64px;        font-family:"微软雅黑";        color:#FFFFFF;        float:left;        font-size:32px;        margin-left:16px;    }    /*颜色依然是自己取色的*/    #top_info{        color:#71777D;        float:right;        line-height:64px;        font-size:16px;        margin-right:16px;    }

task2-5，根据之前的设计，校长主要功能有校长：人员管理（教师、学生的增、删、改、查），信息查询（课程、作业情况查询），所以设置两个菜单人员管理、信息查询，分别对应网页：userManage.jsp，viewInfo.jsp，先把这两个网页建上。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <title>userManage.jsp</title>  </head>  <body>    这里是人员管理页面  </body></html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <title>viewInfo.jsp</title>  </head>  <body>     这里是信息查询界面  </body></html>

好的，既然已经有了网页，我们将左侧菜单栏修改为：

<div id="left">            <ul>                <li><a href="userManage.jsp">人员管理</a></li>                <li><a href="viewInfo.jsp">信息查询</a></li>            </ul></div><!-- left部分是菜单栏 -->

我们修改下CSS部分，让链接的样式好看点，不然也确实够难看的了：

  /*注意逗号表示同时设置两组对象的CSS属性    a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/    #left a:link, #left a:visited {        color: #333333;        text-decoration:none;/*不要下划线*/    }    /*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/    #left a:hover, #left a:active {        color: #0AA770;        text-decoration:none;    }

哎吆不错哦，这样感觉就很大气了。现在点击这两个标签，就跳转到响应的页面。但是，好像跟我们预期效果不一样，跳转到的userManage.jsp是全新的页面，而猫哥想要的效果是userManage.jsp显示在右侧内容区。

task2-6，我们翻阅jsp相关的标签，发现一个有用的：<jsp:include page="XXXX.jsp" flush="true">，include的意思包含，page=”xxxx.jsp”应该是包含的内容，flush=”true”应该就是把缓存输出把，就像Servlet里面的 out.flush();

OK，那么我们可以这样设计：

1，通过<a>标签将请求抛给Servlet，同时通过参数区分具体跳转到哪个网页2，Servlet根据参数，设置跳转到的网页链接到request的attribute中3，schoolmaster.jsp页面通过${}取servlet设定的值，并将对应网页显示到内容位置

修改源代码：

<%@ 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>schoolmaster.jsp</title>    <style type="text/css">    /*星号表示选择全部，设置外边距0，内边距0，字体大小12px，宋体*/    *{        margin:0px;        padding:0px;        font-size:12px;        font-family:"宋体";    }    /*整个body区域背景色为#F5F5F5，这个很简单，自己下载个取色器，找个漂亮的网页，取个颜色就行*/    body {        background-color: #FCFCFC;    }    /*在top、left、right外面套用一层main是为了控制宽度，并且整体居中*/    #main{        width:1000px;        margin:0px auto;    }    /*宽度占满它爹的宽度，高度64px是瞎试的，不好看再调整，猫哥喜欢用16px、32px、64px、128px这些，你懂的。    背景色猫哥继续取色器    line-height表示文字占用的高度，它也是64那就是文字占用高度跟top区域高度是一样的嘛，所以文字就居中了*/    #top{        width:100%;        height:64px;        background-color:#000000;        line-height:64px;       }    /*文字颜色取色器，标题部分啊文字用微软雅黑，大气！*/    #top_title{        line-height:64px;        font-family:"微软雅黑";        color:#FFFFFF;        float:left;        font-size:32px;        margin-left:16px;    }    /*颜色依然是自己取色的*/    #top_info{        color:#71777D;        float:right;        line-height:64px;        font-size:16px;        margin-right:16px;    }    /*宽度占200px差不多了吧    float表示漂浮，left的话就是靠左了，所以这个left区域就得靠左飘飘了        内部的东西跟边距有点距离好看点，暂时定为10px，上下左右都是哦*/    #left{        width:200px;        height:536px;/*猫哥认为600-64=536*/        float:left;        background-color:#EEEEEE;        padding:10px;    }    /*调整id=left的div中的ul标签下的li标签的样式为上边距10px，左边距15px*/    #left ul li{        margin:10px 0px 0px 15px;    }    /*注意逗号表示同时设置两组对象的CSS属性    a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/    #left a:link, #left a:visited {        color: #333333;        text-decoration:none;/*不要下划线*/    }    /*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/    #left a:hover, #left a:active {        color: #0AA770;        text-decoration:none;    }    /*同理right向右飘*/    #right{        width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度，有志于前端的可以专门去研究下*/        min-width:600px;        height:536px;/*猫哥认为600-64=536*/        float:right;        background-color:#FFFFFF;        padding:10px;    }    </style>  </head>  <body>    <div id="main">        <div id="top">            <div id="top_title">                猫哥培训班作业管理系统            </div><!-- 标题部分 -->            <div id="top_info">                已登录用户名：张三            </div><!-- 登录用户信息部分 -->        </div><!-- top部分是标题栏 -->        <div id="left">            <ul>                <li><a href="/HomeworkSystem/RouteServlet?type=userManage">人员管理</a></li>                <li><a href="/HomeworkSystem/RouteServlet?type=viewInfo">信息查询</a></li>            </ul>        </div><!-- left部分是菜单栏 -->        <div id="right">            <jsp:include page="${type}" flush="true"></jsp:include>        </div><!-- right部分是具体内容显示区 -->    </div>  </body></html>

对应RouteServlet如下：（别忘了要改下web.xml）

package servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RouteServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        this.doPost(request, response);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {//处理post请求        //设置输入输出格式、编码        response.setContentType("text/html");        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        //获取用户在网页输入的用户名和密码        String type=request.getParameter("type")+".jsp";        request.setAttribute("type",type);        request.getRequestDispatcher("/schoolmaster.jsp").forward(request,response);//跳转到schoolmaster.jsp    }}

哈哈，一访问http://127.0.0.1:8080/HomeworkSystem/schoolmaster.jsp肯定要报错啦，因为直接访问jsp页面的时候，没有经过servlet，也就还没有给type设值呢。那如果没设值咋办，可以如下解决：

<div id="right">            <c:if test="${empty type}">                欢迎来到猫哥培训班管理系统            </c:if>            <c:if test="${not empty type}">                <jsp:include page="${type}" flush="true"></jsp:include>            </c:if></div><!-- right部分是具体内容显示区 -->

这下牛X了，访问：http://127.0.0.1:8080/HomeworkSystem/schoolmaster.jsp，然后点击人员管理、信息查询，都实现了我们想要的效果。

至于这个标签的逻辑，跟差不多，猫哥不多讲了，自行百度。

OVER！

0 0