JSP+Servlet培训班作业管理系统[3]-原创手记-慕课网

继续我们的事业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，然后点击人员管理、信息查询，都实现了我们想要的效果。

至于<c:if>这个标签的逻辑，跟<c:forEach>差不多，猫哥不多讲了，自行百度。

OVER！