后台ui框架------sitemesh_css decorators js lib meta-inf templates web-inf-优快云博客

本文链接：https://blog.youkuaiyun.com/u011104294/article/details/68924384

1.简洁

SiteMesh 是一个网页布局和修饰的框架，用来实现页面结构共享的。能够帮助网站开发人员较容易实现页面中动态内容和静态装饰外观的分离。

SiteMesh是基于Servlet的filter的，即过滤流。它是通过截取response，并进行装饰后再交付给客户。

2.Sitemesh修饰网页的基本原理（图转自：脚本之家：http://www.jb51.net/web/70208.html）

3.项目中的配置以及运用

1）WEB-INF/web.xml中加入filter定义

<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

2）创建WEB-INF/decorators.xml，代码如下：

<?xml version="1.0" encoding="UTF-8"?>  
<decorators defaultdir="/WEB-INF/layouts/">  
      
    <!-- 此处用来定义不需要过滤的页面 -->  
    <excludes>  
        <pattern>/js/**</pattern>  
        <pattern>/css/**</pattern>  
        <pattern>/images/**</pattern>  
        <pattern>/ueditor/**</pattern>  
        <pattern>/static/**</pattern>  
    </excludes>  
      
    <!-- 用来定义装饰器要过滤的页面 -->  
    <decorator name="default" page="default.jsp">  
        <pattern>/*</pattern>  
    </decorator>  
      
</decorators>

在该文件中配置了哪些模板页面，以及每个模板修饰的URL，另外也可以配置哪些URL不需要模板控制过滤。

例子：我项目中用到的是spring mvc,具体目录结构如下图：

说明：default.jsp 动态内容；menu.jsp、header.jsp以及footer.jsp全都是静态html标签内容。

<html>  
<head>  
<title>QuickStart示例:<sitemesh:title/></title>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<meta http-equiv="Cache-Control" content="no-store" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" />  
  
<link type="image/x-icon" href="${ctx}/static/images/favicon.ico" rel="shortcut icon">  
<link href="${ctx}/sc/bootstrap/2.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />  
<link href="${ctx}/sc/jquery-validation/1.11.0/validate.css" type="text/css" rel="stylesheet" />  
<link href="${ctx}/css/base/default.css" type="text/css" rel="stylesheet" />  
<script src="${ctx}/sc/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>  
<script src="${ctx}/sc/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>  
<script src="${ctx}/sc/jquery-validation/1.11.0/messages_bs_zh.js" type="text/javascript"></script>  
  
<sitemesh:head/>  
</head>  
  
<body>  
    <div class="container">  
        <%@ include file="/WEB-INF/layouts/header.jsp"%>  
        <div id="content">  
            <sitemesh:body/>  
        </div>  
        <%@ include file="/WEB-INF/layouts/footer.jsp"%>  
    </div>  
    <script src="${ctx}/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"></script>  
</body>  
</html>

在这里引入了SiteMesh标签。

<sitemesh:title/> 会自动替换为被过滤页面的title。

<sitemesh:head/> header里面的东西（除了title）放在这个地方。

<sitemesh:body/> body里面的内容放在这里。

在div[id=content]的上下引入了header.jsp和footer.jsp。

这里是动态公共部分，所以我们在这个jsp中引入的js和css都可以重用。

3）使用，下面是一个普通jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>被装饰（目标）页面title</title>
<script type="text/javascript" src="/js/hello.js"></script>
</head>
<body>
<h4>被装饰（目标）页面body标签内内容。</h4>
<h3>使用SiteMesh的好处?</h3>
<ul>
<li>被装饰（目标）页面和装饰页面完全分离。</li>
<li>做到真正的页面复用，一个装饰页面装饰多个被装饰（目标）页面。</li>
<li>更容易实现统一的网站风格。</li>
<li>还有。。。</li>
</ul>
</body>
</html>

被SiteMesh装饰之后，就会自动把相应的东西放在对应的模板上。

下面是被SiteMesh装饰后的html源码：

<html>
<head>
<title>QuickStart示例:被装饰（目标）页面title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link type="image/x-icon" href="/SpringMVC/static/images/favicon.ico" rel="shortcut icon">
<link href="/SpringMVC/sc/bootstrap/2.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/SpringMVC/sc/jquery-validation/1.11.0/validate.css" type="text/css" rel="stylesheet" />
<link href="/SpringMVC/css/base/default.css" type="text/css" rel="stylesheet" />
<script src="/SpringMVC/sc/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/SpringMVC/sc/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="/SpringMVC/sc/jquery-validation/1.11.0/messages_bs_zh.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/hello.js"></script>
</head>
<body>
<div class="container">
<span style="white-space:pre"> </span><div id="header">
<span style="white-space:pre"> </span></div>
<div id="content">
<h4>被装饰（目标）页面body标签内内容。</h4>
<h3>使用SiteMesh的好处?</h3>
<ul>
<li>被装饰（目标）页面和装饰页面完全分离。</li>
<li>做到真正的页面复用，一个装饰页面装饰多个被装饰（目标）页面。</li>
<li>更容易实现统一的网站风格。</li>
<li>还有。。。</li>
</ul>
</div>
<div id="footer">
</div>
</div>
<script src="/SpringMVC/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

4.总结

1) Sitemesh最为重要的就是做用于修饰的模板，并在decorators.xml中配置这些模板用于修饰哪些页面。因此使用Sitemesh的主要过程就是：做装饰模板，然后在decorators.xml中配置URL Pattern
2) 分析整个工程，看哪些页面需要抽象成模板，例如二级页面、三级页面、弹出窗口等等可能都需要做成相应的模板，一般来说，一个大型的OA系统，模板不会超过8个。

3) 如果某个特殊的需求请求路径在过滤器的范围内，但又不想使用模板怎么办？

SiteMesh早就考虑到这一点了，上面第2步说道的decorators.xml这个时候就起到作用了!

4) SiteMesh配置简单，使用灵活，大家可以尝试使用。