后台ui框架------sitemesh

àì夳堔傛蜴生んèń 2022-06-18 07:09 206阅读 0赞

1.简洁

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

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

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

![Center][]

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,具体目录结构如下图：

![Image 1][]

说明：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页面

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

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

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

1.  **<****html****>**  
2.  **<****head****>**  
3.  **<****title****>**QuickStart示例:被装饰（目标）页面title**</****title****>**  
4.  **<****meta** http-equiv="Content-Type" content="text/html;charset=utf-8" **/>**  
5.  **<****meta** http-equiv="Cache-Control" content="no-store" **/>**  
6.  **<****meta** http-equiv="Pragma" content="no-cache" **/>**  
7.  **<****meta** http-equiv="Expires" content="0" **/>**  
8.    
9.  **<****link** type="image/x-icon" href="/SpringMVC/static/images/favicon.ico" rel="shortcut icon"**>**  
10. **<****link** href="/SpringMVC/sc/bootstrap/2.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" **/>**  
11. **<****link** href="/SpringMVC/sc/jquery-validation/1.11.0/validate.css" type="text/css" rel="stylesheet" **/>**  
12. **<****link** href="/SpringMVC/css/base/default.css" type="text/css" rel="stylesheet" **/>**  
13. **<****script** src="/SpringMVC/sc/jquery/jquery-1.9.1.min.js" type="text/javascript"**>****</****script****>**  
14. **<****script** src="/SpringMVC/sc/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"**>****</****script****>**  
15. **<****script** src="/SpringMVC/sc/jquery-validation/1.11.0/messages\_bs\_zh.js" type="text/javascript"**>****</****script****>**  
16.   
17.   
18. **<****meta** http-equiv="Content-Type" content="text/html; charset=utf-8"**>**  
19.   
20. **<****script** type="text/javascript" src="/js/hello.js"**>****</****script****>**  
21.   
22. **</****head****>**  
23.   
24. **<****body****>**  
25.     **<****div** class="container"**>**  
26. **<****span** style="white-space:pre"**>**    **</****span****>****<****div** id="header"**>**  
27. **<****span** style="white-space:pre"**>**    **</****span****>****</****div****>**  
28.         **<****div** id="content"**>**  
29.               
30.     **<****h4****>**被装饰（目标）页面body标签内内容。**</****h4****>**  
31.     **<****h3****>**使用SiteMesh的好处?**</****h3****>**  
32.     **<****ul****>**  
33.         **<****li****>**被装饰（目标）页面和装饰页面完全分离。**</****li****>**  
34.         **<****li****>**做到真正的页面复用，一个装饰页面装饰多个被装饰（目标）页面。**</****li****>**  
35.         **<****li****>**更容易实现统一的网站风格。**</****li****>**  
36.         **<****li****>**还有。。。**</****li****>**  
37.     **</****ul****>**  
38.   
39.         **</****div****>**  
40.           
41. **<****div** id="footer"**>**  
42.     Copyright &copy; 2005-2012 **<****a** href=""**>**spring.org.cn**</****a****>**  
43. **</****div****>**  
44.   
45.   
46.     **</****div****>**  
47.     **<****script** src="/SpringMVC/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"**>****</****script****>**  
48. **</****body****>**  
49. **</****html****>**

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

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

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

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

[Link 1]: http://baike.baidu.com/item/%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91
[Center]: /images/20220618/f0cacdcec618417ca7290da27521ef55.png
[Image 1]: