您的位置：首页 > Web前端

前端框架之SiteMesh

2016-07-29 17:48 441 查看

SiteMesh简介

SiteMesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观，如一致的导航条，一致的banner，一致的版权，等等。它不仅仅能处理动态的内容，如jsp，php，asp等产生的内容，它也能处理静态的内容，如htm的内容，使得它的内容也符合你的页面结构的要求。甚至于它能将HTML文件象include那样将该文件作为一个面板的形式嵌入到别的文件中去。所有的这些，都是GOF的Decorator模式的最生动的实现。尽管它是由java语言来实现的，但它能与其他Web应用很好地集成。

SiteMesh是由Java 2 with Servlet, JSP and XML等技术来实现的，这使得他能很好地与J2EE应用结合，但它能与其他Web应用很好地集成，例如CGI (Perl/Python/C/C++/etc), PHP, Cold Fusion,等

SiteMesh是很容易扩展的，并且他的设计方式使得它很容易实现自定义扩展的需求。

SiteMesh原理

SiteMesh框架是OpenSymphony团队开发的一个非常优秀的页面装饰器框架，它通过对用户请求进行过滤，并对服务器向客户端响应也进行过滤，然后给原始页面加入一定的装饰(header,footer等)，然后把结果返回给客户端。通过SiteMesh的页面装饰，可以提供更好的代码复用，所有的页面装饰效果耦合在目标页面中，无需再使用include指令来包含装饰效果，目标页与装饰页完全分离，如果所有页面使用相同的装饰器，可以是整个Web应用具有统一的风格。

下面说一下SiteMesh再项目中的实际用法

1、我的是一个Java Web项目，是Maven形式的，首先贴出pom配置：

<!-- 依赖版本 -->
<sitemesh.version>2.4.2</sitemesh.version>
<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>${sitemesh.version}</version>
</dependency>

2、下面贴出web.xml配置

<!-- SiteMesh 页面装饰器 -->
<filter>
<filter-name>sitemeshFilter</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>
<filter-mapping><!-- 这个mapping可以根据自己项目的需求设置多个 -->
<filter-name>sitemeshFilter</filter-name>
<url-pattern>/admin/*</url-pattern><!-- 这里的路径自己设定,可/* -->
</filter-mapping>
<filter-mapping>
<filter-name>sitemeshFilter</filter-name>
<url-pattern>/blog/*</url-pattern>
</filter-mapping>

3、需要在[项目路径/WEB-INF]下建立decorators.xml内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/views">
<!-- 此处用来定义不需要过滤的页面 -->
<excludes>
</excludes>

<!-- 默认装饰页面, 在需要装饰的页面增加 <meta name="decorator" content="default"/> -->
<!-- CMS基础主题装饰页面 -->
<decorator name="cms_default_basic" page="/default.jsp" />

</decorators>

以上基本配置就是这些，下面我将贴出我自己项目的页面

CMS基础主题装饰页面default.jsp

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- SiteMesh引用被装饰页面头 -->
<sitemesh:head/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"><!-- 固定位置的导航条 -->
<div class="container">
<div class="navbar-header">

</div>
<div id="bs-navbar" class="navbar-collapse collapse">

</div><!--/.nav-collapse-head -->
</div>
</nav>
<!-- Blog主体部分 -->
<div class="container" id="main">
<div class="blog-header">

</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- SiteMesh引用被装饰页面体 -->
<sitemesh:body/>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">

</div>
<div class="sidebar-module sidebar-module-inset">

</div>
</div><!-- /.blog-sidebar -->
</div>
</div><!-- /container -->
<br>
<!-- 页脚部分 -->
<footer class="blog-footer">

</footer>
<!-- 返回顶部 -->
<div id="scrollUp" style="position: fixed; display: none;"><i class="glyphicon glyphicon-menu-up"></i></div>
</body>
</html>

下面是被装饰页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<!-- 引用decorators.xml中的定义配置 -->
<meta name="decorator" content="cms_default_basic"/>
</head>
<body>

<c:forEach items="${page.list}" var="article">
<div class="blog-post">

<p class="blog-post-meta">发布时间： 发布者：;访问量：</p>
<div class="post-content">

</div>
</div>
</c:forEach>

<nav>${page}</nav>

</body>
</html>

下面贴出页面效果

红框的地方则是被装饰页面，其他的地方是基础主题装饰页面default.jsp

到这里本篇文章分享就结束了，望博友们共同学习！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端框架 web应用布局 SiteMesh

相关文章推荐

新的分享

章节导航