1. 程式人生 > >sitemesh/decorator裝飾器裝飾jsp頁面(原理及詳細配置)

sitemesh/decorator裝飾器裝飾jsp頁面(原理及詳細配置)

摘要:首先這個Decorator解釋一下這個單詞:“裝飾器”,我覺得其實可以這樣理解,他就像我們用到的Frame,他把每個頁面共有的東西提煉了出來,也可能我們也會用各種各樣的include標籤,將我們的常用頁面給包括進來:比如說頁面的top,bottom這些每個頁面幾乎都有,而且都一樣,如果我們在每個頁面都include,可以發現我們的程式有很多冗餘,重複。相比之下裝飾器給我們提供了一個較好的選擇,他在你要顯示的頁面根本看不出任何include資訊,可以說完全解耦。

一、SiteMesh介紹

SiteMesh是一個Java WEB專案的網頁佈局和修飾框架。使用SiteMesh後就不再需要在每個頁面中都用<jsp:include>標籤引入頁頭、頁尾、導航等其他公用頁面了。

  • 可以將網頁的內容和頁面結構分離,達到頁面結構共享的目的。
  • 頁面裝飾效果耦合在目標頁面中,無需使用include指令顯示包含裝飾效果,目標頁面和裝飾頁面完全分離
  • 整個web應用可以使用相同的裝飾頁面,風格統一,整體效果更好
  • SiteMesh通過Filter攔截請求和響應,給原始頁面加入裝飾,再把裝飾後的結果返回給客戶端。
  • 根據頁面URL匹配規則查詢合適的裝飾模板頁
  • 提取被訪問頁的內容,放置到裝飾模板中的適當位置。

二、業務場景使用

比如常見的就是crm系統,左邊的樹形選單就是一致的,變化的右邊主體部分(即被裝飾的頁面)。

三、SiteMesh工作原理

  sitemesh應用Decorator模式,用filter擷取request和response,把頁面元件head,content,banner、bottom結合為一個完整的檢視。通常我們都是用include標籤在每個jsp頁面中來不斷的包含各種header, stylesheet, scripts and footer。見下圖

當用戶請求home.jsp,並且伺服器處理完畢正準備返回資料之時,它被SiteMesh Filter攔截了下來,並且把資料包裝成一個Page物件,具體是Page page = parsePage(request, response, chain)的呼叫,然後,它會去查詢decorators.xml檔案,看看該頁面是否需要裝飾[if (decorator != null && decorator.getPage() != null)]?是,則應用裝飾器[applyDecorator(page, decorator, request, response)],否則,就傳送原來的沒經過裝飾的頁面[writeOriginal(response, page);]。

四、sitemesh應用配置

然後分三步走,第一步:web.xml配置;第二步:decorate.xml配置;第三步:裝飾頁面

4.1 web.xml配置

複製程式碼
    <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>
複製程式碼

4.2 decorate.xml 配置

在WEB-INF目錄下新建一個decorators.xml檔案(/decorator是你的包裝jsp根路徑在這裡main.jsp和panel.jsp都是包裝jsp,a.jsp,b,jsp是被包裝jsp)

複製程式碼
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
    <excludes>
        <pattern>/resources/**</pattern>
        <pattern>/system/login_index.do</pattern>
        <pattern>/system/login.do</pattern>
        <pattern>/system/close_window.do</pattern>
        <pattern>/system/login_force.jsp</pattern>
        <pattern>/system/info.jsp</pattern>
        <pattern>/index.jsp</pattern>
        <pattern>/usermemcached/**</pattern>
    </excludes>
    <decorator name="main" page="/system/main.do">
        <pattern>/**</pattern>
    </decorator>
</decorators>
複製程式碼

用decrator指定裝飾模板與URL的對應關係,也可以用excludes配置那些URL不需要模板控制。

4.3 裝飾頁面

複製程式碼
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<html>
  <head>
    <title> <decorator:title default="default title"/> </title> 
    <decorator:head/>
  </head>
  <body /> >
        <div id="content" class="container" style="width: 100%;">
                <c:if test="${not empty actionResult}">
                    <div class="alert alert-${actionResult.type}">
                        <button class="close" type="button" data-dismiss="alert">X</button>
                        <spring:message code="${actionResult.message}"></spring:message>
                    </div>
                </c:if>
                <!-- 所有被攔截器攔截後,匹配的url頁面都會插入到此 -->
                <decorator:body></decorator:body>
            </div>
    ......
    <jsp:include page="/footer.jsp"></jsp:include>
  </body>
</html>
複製程式碼

引數說明:

<decorator:head />

    填充被裝飾頁面的head標籤內容

<decorator:body />

    填充被裝飾頁面的body標籤內容