为了账号安全,请及时绑定邮箱和手机立即绑定

JSP+Servlet培训班作业管理系统[3]

标签:
Java Html/CSS

继续我们的事业task2-1task2-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!

点击查看更多内容
10人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.5万
获赞与收藏
1523

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消