在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>
此处配置debug.jsp页面不加修饰。
启动服务器,然后访问站点可以看到,所有没有配置在excludes中的请求都添加了csdn导航栏的修饰。
如:
正如这句好所说,被修饰的视图,所有的样式可以继承来自main.jsp(修饰器页面)中引用的样式,还有js也可以引用,这样就避免资源的重复加载了,不过HTML5好像就已经有了。
其实简单的模板功能已经够了,多数人用这个也就当模板使用。
那么,就当模板用吧,挺好的......