在struts2项目的基础上,配置decorator修饰器。
举例:
csdn顶栏的导航条和页面底部的版权信息,如果用JSP实现,那么一般人的实现可能会使用<include> 标签。可以实现没有问题。
其实include的视图也是一个完整的页面,那么会有资源重复引入和主干标签重复定义的问题。
此处并不是要来说include多么不好,而是要说使用decorator会有多好。[其实include也有其使用的恰到好处的地方,不然该标签存在这么多年就没有意义了]
decorator既然是修饰器,那么就不是简单的只是为引入视图,其实此处概念有点混淆,不是decorator的修饰被引入到视图,而是把视图的元素填入到修饰器,那么就合模板一个样了呀,但是为什么叫修饰器呢?
先配置一个项目跑起来,然后看看效果再说。
首先配置struts的集成,
然后添加jar包:
sitemesh-2.4.2.jar
struts2-sitemesh-plugin-2.3.16.3.jar
配置web.xml,添加sitemesh:
<filter> <filter-name>sitemesh</filter-name> <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
然后就是定义一个修饰器(如,WEB-INF/decorators/main.jsp):[此处直接拖csdn页面样式代码好了]
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator"%> <%@taglib prefix="page" uri="http://www.opensymphony.com/sitemesh/page"%> <%@taglib prefix="s" uri="/struts-tags"%> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta name="description" content="Struts2 Showcase for Apache Struts Project"> <meta name="author" content="The Apache Software Foundation"> <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> <script id="allmobilize" charset="utf-8" src="http://a.yunshipei.com/46aae4d1e2371e4aa769798941cef698/allmobilize.min.js"></script> <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/ad.js?v=1.1"></script> <!--new top--> <link rel="stylesheet" href="http://static.csdn.net/public/common/toolbar/css/index.css"> <!--new top--> <link rel="Stylesheet" type="text/css" href="http://static.blog.csdn.net/skin/dark1/css/style.css?v=1.1" /> <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="/gopain/rss/list" /> <link rel="shortcut icon" href="http://csdnimg.cn/public/favicon.ico" /> <link type="text/css" rel="stylesheet" href="http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/default.css" /> <script id="toolbar-tpl-scriptId" fixed="true" prod="blog" skin="black" src="http://static.csdn.net/public/common/toolbar/js/html.js" type="text/javascript"></script> <link href="http://static.blog.csdn.net/css/comment1.css" type="text/css" rel="stylesheet" /> <link href="http://static.blog.csdn.net/css/style1.css" type="text/css" rel="stylesheet" /> <script language='JavaScript' type='text/javascript' src='http://download.csdn.net/js/jquery.cookie.js'></script> <script type="text/javascript" src="http://csdnimg.cn/rabbit/search-service/main.js"></script> <title><decorator:title default="Struts2 Showcase" /></title> <decorator:head /> </head> <body> <div class="csdn-toolbar csdn-toolbar-skin-black "> <div class="container row center-block "> <div class="col-md-3 pull-left logo clearfix"> <a href="http://www.csdn.net?ref=toolbar" title="CSDN首页" target="_blank" class="icon"></a><a title="频道首页" href="http://blog.csdn.net?ref=toolbar_logo" target="_blank" class="img blog-icon"></a> </div> <div class="pull-right login-wrap "> <ul class="btns"> <li class="loginlink"><a href="https://passport.csdn.net/account/login?ref=toolbar" target="_top">登录 </a>|<a target="_top" href="https://passport.csdn.net/account/register?ref=toolbar"> 注册</a></li> <li class="search"> <div class="icon on-search-icon"> <div class="wrap"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <form action="http://so.csdn.net/search" method="get" target="_blank"> <input type="hidden" value="toolbar" name="ref" accesskey="2"> <div class="border"> <input placeholder="搜索" type="text" value="" name="q" accesskey="2"><span class="icon-enter-sm"></span> </div> </form> </div> </div> </li> <li class="favor"> <div class="icon on-favor-icon"> <div class="wrap"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <div style="display: none;" class="favor-success"> <span class="msg">收藏成功</span> <div class="btns"> <span class="btn btn-primary ok">确定</span> </div> </div> <div style="display: none;" class="favor-failed"> <span class="icon-danger-lg"></span><span class="msg">收藏失败,请重新收藏</span> <div class="btns"> <span class="btn btn-primary ok">确定</span> </div> </div> <form role="form" class="form-horizontal favor-form"> <div class="form-group"> <div class="clearfix"> <label for="input-title" class="col-sm-2 control-label">标题</label> <div class="col-sm-10"> <input id="inputTitle" type="text" placeholder="" class="title form-control"> </div> </div> <div class="alert alert-danger"> <strong></strong>标题不能为空 </div> </div> <div class="form-group"> <label for="input-url" class="col-sm-2 control-label">网址</label> <div class="col-sm-10"> <input id="input-url" type="text" placeholder="" class="url form-control"> </div> </div> <div class="form-group"> <label for="input-tag" class="col-sm-2 tag control-label">标签</label> <div class="col-sm-10"> <input id="input-tag" type="text" class="form-control tag"> </div> </div> <div class="form-group"> <label for="input-description" class="description col-sm-2 control-label">摘要</label> <div class="col-sm-10"> <textarea id="input-description" class="form-control description"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10 ft"> <div class="col-sm-4 pull-left"> <div class="checkbox"> <label> <input type="checkbox" name="share" checked="checked" class="share">公开 </label> </div> </div> <div class="col-sm-8 pull-right favor-btns"> <button type="button" class="cancel btn btn-default">取消</button> <button type="submit" class="submit btn btn-primary">收藏</button> </div> </div> </div> </form> </div> </div> </li> <li class="notify"> <div style="display: none" class="number"></div> <div style="display: none;" class="icon-hasnotes-sm"></div> <div id="header_notice_num"> <div class="icon-hasnotes" style="display: none;"></div> </div> <div class="icon on-notify-icon"> <div class="wrap"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <div id="note1" class="csdn_note" style="left: -212px; top: 25px; display: none;"> <div class="box"> <div class="notifications notice_list_con curr"> <div class="menu_title"> <span class="title"><a href="http://msg.csdn.net/" target="_blank" class="read_all">全部设为已读</a><a href="http://msg.csdn.net/" target="_blank" class="go_all">查看所有通知</a></span> </div> <div class="loading"></div> <div class="empty">暂没有新通知</div> <div class="notice_content"></div> </div> <div class="notifications detail_con" style="display: none"> <div class="menu_title"> <span class="title"> <a class="go_back" href="javascript:void 0;">返回通知列表</a> <a class="notifications_page_none nextnote" href="javascript:void 0;">下一条</a> <a class="notifications_page prvnote" href="javascript:void 0;">上一条</a> </span> </div> <div class="notice_content"></div> </div> <div class="error"></div> </div> <iframe src="about:block" frameborder="0" allowtransparency="true" style="z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent"></iframe> </div> </div> </div> </li> <li class="ugc"> <div class="icon on-ugc-icon"> <div class="wrap clearfix"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <dl> <dt> <a href="http://geek.csdn.net/news/expert?ref=toolbar" target="_blank" class="p-news clearfix"><em class="icon"></em><span>分享资讯</span></a> </dt> <dt> <a href="http://share.csdn.net/slides/new?ref=toolbar" target="_blank" class="p-doc clearfix"><em class="icon"></em><span>传PPT/文档</span></a> </dt> <dt> <a href="http://bbs.csdn.net/topics/new?ref=toolbar" target="_blank" class="p-ask clearfix"><em class="icon"></em><span>提问题</span></a> </dt> <dt> <a href="http://write.blog.csdn.net/postedit?ref=toolbar" target="_blank" class="p-blog clearfix"><em class="icon"></em><span>写博客</span></a> </dt> <dt> <a href="http://u.download.csdn.net/upload?ref=toolbar" target="_blank" class="p-src clearfix"><em class="icon"></em><span>传资源</span></a> </dt> <dt> <a href="https://code.csdn.net/projects/new?ref=toolbar" target="_blank" class="c-obj clearfix"><em class="icon"></em><span>创建项目</span></a> </dt> <dt> <a href="https://code.csdn.net/snippets/new?ref=toolbar" target="_blank" class="c-code clearfix"><em class="icon"></em><span>创建代码片</span></a> </dt> </dl> </div> </div> </li> <li class="profile"> <div class="icon on-profile-icon"> <img src="http://yspe2371e4aa7697989.yunshipei.cn/dHlwZT1mdyZzaXplPTY0MCZzcmM9YUhSMGNDVXpRU1V5UmlVeVJtRjJZWFJoY2k1amMyUnVMbTVsZENVeVJrWWxNa1kzSlRKR01DVXlSakpmWjI5d1lXbHVMbXB3Wnc9PQ==" class="curr-icon-img" data-am-src="http://avatar.csdn.net/F/7/0/2_gopain.jpg"> <div class="wrap clearfix"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <div class="bd"> <dl class="clearfix"> <dt class="pull-left img"> <a target="_blank" href="http://my.csdn.net?ref=toolbar" class="avatar"><img src="http://yspe2371e4aa7697989.yunshipei.cn/dHlwZT1mdyZzaXplPTY0MCZzcmM9YUhSMGNDVXpRU1V5UmlVeVJtRjJZWFJoY2k1amMyUnVMbTVsZENVeVJrWWxNa1kzSlRKR01DVXlSakpmWjI5d1lXbHVMbXB3Wnc9PQ==" data-am-src="http://avatar.csdn.net/F/7/0/2_gopain.jpg"></a> </dt> <dd class="info"> <a target="_blank" href="http://my.csdn.net?ref=toolbar" class="nickname">gopain</a><span class="dec">别人的成功,最不可复制的成分是幸运。</span> </dd> </dl> </div> <div class="ft clearfix"> <a target="_blank" href="http://my.csdn.net/my/account/changepwd?ref=toolbar" class="pull-left"><span class="icon-cog"></span>帐号设置</a><a href="https://passport.csdn.net/account/logout?ref=toolbar" target="_top" class="pull-right "><span class="icon-signout"></span><span class="out">退出</span></a> </div> </div> </div> </li> <li class="apps"> <div class="icon on-apps-icon"> <div class="wrap clearfix"> <div class="curr-icon-wrap"> <div class="curr-icon"></div> </div> <div class="detail"> <dl> <dt> <h5>社区</h5> </dt> <dd> <a href="http://blog.csdn.net?ref=toolbar" target="_blank">博客</a> </dd> <dd> <a href="http://bbs.csdn.net?ref=toolbar" target="_blank">论坛</a> </dd> <dd> <a href="http://download.csdn.net?ref=toolbar" target="_blank">下载</a> </dd> <dd> <a href="http://share.csdn.net?ref=toolbar" target="_blank">Share</a> </dd> <dd> <a href="http://geek.csdn.net?ref=toolbar" target="_blank">极客头条</a> </dd> </dl> </div> <div class="detail"> <dl> <dt> <h5>服务</h5> </dt> <dd> <a href="https://code.csdn.net?ref=toolbar" target="_blank">CODE</a> </dd> <dd> <a href="http://hero.csdn.net?ref=toolbar" target="_blank">英雄会</a> </dd> <dd> <a href="http://huiyi.csdn.net/?ref=toolbar" target="_blank">活动</a> </dd> <dd> <a href="http://www.csto.com?ref=toolbar" target="_blank">CSTO</a> </dd> </dl> </div> <div class="detail last"> <dl> <dt> <h5>俱乐部</h5> </dt> <dd> <a href="http://cto.csdn.net?ref=toolbar" target="_blank">CTO俱乐部</a> </dd> <dd> <a href="http://student.csdn.net?ref=toolbar" target="_blank">高校俱乐部</a> </dd> </dl> </div> </div> </div> </li> </ul> </div> </div> </div> <decorator:body /> <script type="text/javascript" src="http://csdnimg.cn/rabbit/cnick/cnick.js"></script> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/newblog.min.js"></script> <script type="text/javascript" src="http://medal.blog.csdn.net/showblogmedal.ashx?blogid=1946923"></script> <script type="text/javascript" src="http://www.csdn.net/ui/scripts/Csdn/counter.js"></script> <script type="text/javascript" src="http://ad.csdn.net/scripts/ad-blog.js"></script> <script type="text/javascript" src="http://zz.csdn.net/js/count.js"></script> <!--new top--> <script id="csdn-toolbar-id" btnId="header_notice_num" wrapId="note1" count="5" subCount="5" type="text/javascript" src="http://static.csdn.net/public/common/toolbar/js/toolbar.js"></script> <!--new top--> </body> </html>
然后申明那些请求的返回需要修饰,在WEB-INF/下创建decorator.xml:
<?xml version="1.0" encoding="ISO-8859-1"?> <decorators defaultdir="/WEB-INF/decorators"> <decorator name="main" page="main.jsp"> <pattern>/*</pattern> </decorator> <!--<decorator name="panel" page="panel.jsp"/>--> <!--<decorator name="dashedBox" page="dashedBox.jsp"/>--> <!--<decorator name="printable" page="printable.jsp"/>--> </decorators>
还可以添加excludes来配置不加修饰的请求:
<excludes> <pattern>/debug.jsp</pattern> </excludes>
启动服务器,然后访问站点可以看到,所有没有配置在excludes中的请求都添加了csdn导航栏的修饰。
如:
正如这句好所说,被修饰的视图,所有的样式可以继承来自main.jsp(修饰器页面)中引用的样式,还有js也可以引用,这样就避免资源的重复加载了,不过HTML5好像就已经有了。
其实简单的模板功能已经够了,多数人用这个也就当模板使用。
那么,就当模板用吧,挺好的......