java简单博客系统导航标签页点击后页面内容改变及背景色改变

Posted 2021-01-19 三云

一、同一个Servlet处理多个请求，显示不同的页面内容

导航标签页

bootStrap模板：

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

在前面介绍到主页中这样用：

    <div class="blogNav">
        <ul class="nav nav-tabs" id="navUrl">
          <li role="presentation"><a href="Home?action=showByTime">首页</a></li>
          <li role="presentation"><a href="Home?action=showByViews">48小时阅读排行榜</a></li>
         <li role="presentation"><a href="Home?action=showByLikes">10天推荐排行榜</a></li>
    </ul>
    </div>

这个的关键是home,jsp中链接的href加了个action参数，这样一来，处理页面请求的HomeServlet（在web.xml中配置）中，就可以根据action参数的不同，调用不同的函数查询数据库，返回不同的博客信息放在请求属性中提供给前端获取：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        String action=request.getParameter("action");
        if(StringUtil.isNotEmpty(action)){
            if(action.equals("showByViews")){
                showBlogsByViews(request,response);
            }else if(action.equals("showByLikes")){
                showBlogsByLikes(request,response);
            }else if (action.equals("showByTime")){
                showBlogsByTime(request,response);
            }
        }else{
            showBlogsByTime(request,response);
        }
        showNavContent(request,response);
        request.getRequestDispatcher("home.jsp").forward(request, response);
    }
  

在前面说到的前端设计中，博客列表项总是获取${blogList}中的对象信息，因此，上面showBlogsByViews，showBlogsByLikes，showBlogsByTime，返回的请求参数明都是“blogList”，从而实现代码复用：

 

request.setAttribute("blogList", viewsBlogList);//action不同，设置的blogList内容不同

 

（二）点击导航标签页后背景色保持不变知道点击另一个标签页

重新看下bootstrap导航标签模板，活跃状态的标签页有class属性，取值为active。

 <li role="presentation" class="active"><a href="#">Home</a></li>

 

为了实现想要的页面效果，在html页面加载出来后，判断当前URL的参数，根据参数的不同，设置背景色

参数action="showByTime" ——“首页“ 为active状态

参数action="showByViews" ——“48小时阅读排行榜为active状态"

参数action="showByLikes"——“10天推荐排行榜为active状态”

<script type="text/javascript">
    window.onload=function(){
        //var currentPath=location.pathname;   /*获取的是连接地址/Blog/Home
        var paramsObj=location.search;       /*获取的是链接参数 ？action=action=showByLikes*/
        var navAs=document.getElementById("navUrl").getElementsByTagName("a");
        if(paramsObj!=null&&paramsObj!=""){
            var paramsStr=paramsObj.substring((paramsObj.indexOf("?")+1));   /*截取问号之后的字符串action=showByLikes*/
            var paramsArr=new Array();
            paramsArr=paramsStr.split("&");  /*多个参数会以&分隔开*/
            var actionParam=paramsArr[0].split("=")[1];    /*获取第一个参数action=showByLikes并以"="号分离出showByLikes*/
            var find=0;    
            for(var i=0;i<navAs.length;i++){
                if(navAs[i].href.indexOf(actionParam)!=-1){
                    navAs[i].parentNode.className="active";
                    find=true;
                    break;    /*遍历导航标签的所有链接找到包含当前url的actio参数值的，找到就调出循环*/
                }
            }
            if(!find){
                navAs[0].parentNode.className="active";//默认首页标签是active状态
            }
        }else{
            navAs[0].parentNode.className="active";
        }
        
    };  //脚本用于点击不同链接是导航栏标签背景色的变化
</script>