zoukankan      html  css  js  c++  java
  • sitemesh入门

    今天在公司用到了sitemesh这个框架。

    网上的资料已经有很多了。  在此就不做具体介绍了, 仅仅做个笔记。

    sitemesh是一种模板框架,是为了解决页面重复代码而设计的。

    设计思想

    sitemesh的设计思想是装饰者设计模式。

    由于本文讨论的是sitemesh,并不是设计模式。故在此简单地说明一下装饰者这个设计模式。

    java io就是常见的装饰者设计模式应用的地方。 用各种FilterInputStream装饰InputStream。

    一个常见的例子就是读取文本文件中的文本。

    用FileInputStream这种文件流读取的时候,速度较慢,而用BufferedInputStream装饰FileInputStream的时候效率提高了很多。

    因为BufferedInputStream对FileInputStream读取的数据做了二次处理,内部有个缓冲区对读取的数据进行暂存。

    sitemesh也是同样的道理,通过装饰器将返回的页面需要装饰的部分用其他页面先装饰好,然后再处理不需要装饰的页面。

    实例

    实例使用idea作用ide,用maven构建项目。 前端框架使用bootstrap和jQuery。

    项目结构如下:

    maven加入sitemesh依赖即可。

    <dependency>
          <groupId>opensymphony</groupId>
          <artifactId>sitemesh</artifactId>
          <version>2.4.2</version>
     </dependency>

    效果图:

     从实例可以看出,头部logo和底部,还有导航条这3个东西是固定不变的。

    点击导航条这些内容是不变的,变的只是导航条下面的内容。 因此sitemesh在这种场景就用上了。

    使用sitemesh还是非常简单的。 只需要3步。

    1. 配置filter

      <filter>
          <filter-name>SiteMeshFilter</filter-name>
          <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
      </filter>
      <filter-mapping>
          <filter-name>SiteMeshFilter</filter-name>
          <url-pattern>/*</url-pattern>
      </filter-mapping>

     这里注意一下,sitemesh老版本的filter是PageFilter。 目前这个Filter已经过时,使用新的SiteMeshFilter。

    2.在WEB-INF文件夹下创建decorators.xml文件,内容如下:

    <?xml version="1.0" encoding="utf-8"?>
    <decorators defaultdir="/layouts/">
    
        <excludes>
            <pattern>/static/*</pattern>
        </excludes>
    
        <decorator name="default" page="default.jsp">
            <pattern>/*</pattern>
        </decorator>
    
    </decorators>

    根标签decorators有个defaultdir属性,也就是前缀目录。下面的decorator标签的属性中的page属性default.jsp这个模板页面具体位置就需要加上之前那个前缀目录。也就是/layouts/default.jsp。项目结构中已说明的很清楚。同时这个模板页面作用于所有的页面,因为它的pattern是/*,这个跟filter类似。excludes这个标签顾名思义,也就是排除某些url,使之不使用模板。 比如一些静态的html页面和不需要使用模板的页面。

    3.建立模板文件

    模板文件也就是/layouts/default.jsp。 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><decorator:title/></title>
        <link rel="stylesheet" href="static/bootstrap.min.css"/>
        <link rel="stylesheet" href="static/bootstrap-theme.min.css"/>
        <script type="text/javascript" src="static/jquery1.11.0.js"></script>
        <style>
            .body,.foot {
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="head">logo</div>
        <div class="body">
            <div>
                <ul class="nav nav-pills" id="nav">
                    <li id="home"><a href="index.jsp">Home</a></li>
                    <li id="page1"><a href="page1.jsp">Page1</a></li>
                    <li id="page2"><a href="page2.jsp">Page2</a></li>
                </ul>
            </div>
            <div>
                <decorator:body/>
            </div>
        </div>
        <div class="foot">address...</div>
    </body>
    </html>

    引用了1个标签库。 decorator, 也就是sitemesh提供的标签库。 模板文件中<decorator:body/>和<decorator:title/>这两部分是需要引用具体页面的。其他的内容均引用自这个页面。

    原理

    当浏览器进入页面首页的时候,会进入index.jsp. 

    index.jsp内容如下

    <head>
        <title>主页</title>
    </head>
    <body>
        <h1 style="background-color: red;">除body之外其他的内容已经全部在/layout/default.jsp中定义了。</h1>
        <input type="button" value="click"/>
        <script type="text/javascript">
            $("#nav li").removeClass('active');
            $("#home").addClass('active');
        </script>
    </body>

    由于配置了filter。因此进入这个页面之前,请求已经被filter截取。

    filter会先得到模板页面,也就是/layout/default.jsp这个页面。

    由于default.jsp这个页面有两处内容需要具体页面渲染,因此这两处内容就由新进入的这个页面进行渲染。即<decorator:title/>对应"主页",<decorator:body/>对应body标签内的内容。

    同理,page1和page2页面也这样处理。

    page1.jsp

    <head>
        <title>页面1</title>
    </head>
    <body>
        <h1 style="background-color: green;">页面1.....</h1>
    <script type="text/javascript">
        $("#nav li").removeClass('active');
        $("#page1").addClass('active');
    </script>
    </body>

    page2.jsp

    <head>
        <title>页面2</title>
    </head>
    <body>
        <h1 style="background-color: blue;">页面2.....</h1>
    <script type="text/javascript">
        $("#nav li").removeClass('active');
        $("#page2").addClass('active');
    </script>
    </body>

    总结

    sitemesh配置简单,因为只对response回去的code进行二次渲染,这样基本不会影响业务逻辑,非常推荐使用。

  • 相关阅读:
    史上最详细 github 使用教程(英文烂的血泪史)
    如何解决跨域问题
    KSImageNamed 安装
    VVDocumenter插件安装
    通过appearance设置app主题
    UITableViewCell注册情况
    iOS9.2 xcode 7.1.1真机测试
    UIAlertController iOS9
    Values of type 'NSInteger' should not be used as format arguments; add an explicit cast to 'long' instead
    GIT
  • 原文地址:https://www.cnblogs.com/fangjian0423/p/3559270.html
Copyright © 2011-2022 走看看