碼上歡樂
相關內容    簡體    繁體

Spring MVC學習筆記——SiteMesh的使用（轉）

本文轉載自   查看原文   2017-01-04 11:17   5504    SpringMVC

轉自 SiteMesh的使用

 

SiteMesh的介紹就不多說了，主要是用來統一頁面風格，減少重復編碼的。

它定義了一個過濾器，然后把頁面都加上統一的頭部和底部。

需要先在WEB-INF/lib下引入sitemesh的jar包：http://wiki.sitemesh.org/display/sitemesh/Download 。這里使用2.4版本。

 

過濾器定義：

在web.xml中

    <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>

 

decorators.xml文件：

WEB-INF下新建decorators.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<decorators defaultdir="/WEB-INF/layouts/">
    <!-- 此處用來定義不需要過濾的頁面 -->
    <excludes>
        <pattern>/static/*</pattern>
    </excludes>

    <!-- 用來定義裝飾器要過濾的頁面 -->
    <decorator name="default" page="default.jsp">
        <pattern>/*</pattern>
    </decorator>
</decorators>

不用過濾/static/目錄下的文件，然后指定了裝飾器：/WEB-INF/layouts/default.jsp。

我用的是Spring MVC，目錄結構大致：

 

 

 

default.jsp：

 

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE 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/> 會把被過濾頁面head里面的東西（除了title）放在這個地方。

<sitemesh:body/> 被過濾的頁面body里面的內容放在這里。

在content的上下引入了header和footer。

我們在頭部引入了js和css，就可以重用了。

 

使用：

使用的過程中，幾乎感受不到SiteMesh的存在。例如下面的頁面：

 

<%@ 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裝飾之后，就會自動去掉<html> <body> <head>等元素，然后把相應的東西放在模板對應位置上。

我們來看一下，被SiteMesh裝飾過的頁面源代碼：

<!DOCTYPE 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">
        


<div id="header">
</div>
        <div id="content">
            
    <h4>被裝飾（目標）頁面body標簽內內容。</h4>
    <h3>使用SiteMesh的好處?</h3>
    <ul>
        <li>被裝飾（目標）頁面和裝飾頁面完全分離。</li>
        <li>做到真正的頁面復用，一個裝飾頁面裝飾多個被裝飾（目標）頁面。</li>
        <li>更容易實現統一的網站風格。</li>
        <li>還有。。。</li>
    </ul>

        </div>
        
<div id="footer">
    Copyright © 2005-2012 <a href="">spring.org.cn</a>
</div>


    </div>
    <script src="/SpringMVC/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

 

SiteMesh查看文檔 使用sitemesh建立復合視圖 - 2.裝飾器

 

SiteMesh中有一個decorator標簽，可以輕松解決頁面布局的問題

之前解決頁面重復布局的時候，使用的是<include>標簽，但是需要在每個頁面都用他引入其他JSP文件，

而使用decorator標簽只需要在配置文件decorators.xml進行相應的配置再加上一個裝飾器(其實就是一個JSP頁面)即可。

 

在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>

 

加入的配置文件decorators.xml

<?xml version="1.0" encoding="UTF-8"?>

<decorators defaultdir="/WEB-INF/decorators">
    <!-- 此處用來定義不需要過濾的頁面 -->
    <excludes>
        <pattern>/exclude.jsp</pattern>
        <pattern>/exclude/*</pattern>
    </excludes>
	<!-- 用來定義裝飾器要過濾的頁面 -->
    <decorator name="main" page="main.jsp">
        <pattern>/*</pattern>
    </decorator>

</decorators>

 

在WebContent/WEB-INF/目錄下創建/decorators目錄，在這個目錄下寫main.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/main.css"/>
		<title>歡迎使用用戶管理系統<decorator:title default="歡迎使用用戶管理系統"/></title>
		<decorator:head/>							<!-- 取出被裝飾頁面的head標簽中的內容(除了head標簽本身) -->
	</head>

	<body>
		<h1><decorator:title/></h1>		<!-- 取出被裝飾頁面的title標簽中的內容 -->
		<c:if test="${not empty loginUser}">
			<a href="<%=request.getContextPath() %>/user/add">用戶添加</a>
			<a href="<%=request.getContextPath() %>/user/users">用戶列表</a>
			<a href="<%=request.getContextPath() %>/logout">退出系統</a>
			當前用戶:${loginUser.nickname }
		</c:if>
		<hr/>
		<decorator:body/>							<!-- 取出被裝飾頁面的body標簽中的內容 -->
		<div align="center" style="width:100%;border-top:1px solid; float:left;margin-top:10px;">
			CopyRight@2012-2015<br/>
			用戶管理系統
		</div>
	</body>
</html>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 [Spring MVC]學習筆記－－FreeMarker的使用 Spring MVC 學習筆記（整理） Spring學習筆記（四）--MVC概述 [Spring MVC]學習筆記－－@Controller SiteMesh的使用 不錯的Spring學習筆記(轉) spring mvc 及NUI前端框架學習筆記 [Spring MVC]學習筆記－－基礎Servlet 使用Spring MVC表單標(轉) SiteMesh3 介紹和使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM