[Struts 2] decorator(sitemesh)修饰器的配置和使用

在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>


对不起,太多了,时间仓促,直接从csdn博客界面扒下来了。


然后申明那些请求的返回需要修饰,在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好像就已经有了。

其实简单的模板功能已经够了,多数人用这个也就当模板使用。

那么,就当模板用吧,挺好的......


你可能感兴趣的:(struts,Decorator,模板,sitemesh,2,修饰器)