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

時間  2019-11-30
標籤 spring mvc 學習 筆記 sitemesh 使用 欄目 Spring 简体版
原文   原文鏈接

轉自 SiteMesh的使用javascript

 

SiteMesh的介紹就很少說了，主要是用來統一頁面風格，減小重複編碼的。css

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

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

 

過濾器定義：jquery

在web.xml中web

複製代碼 
    <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文件：spring

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

複製代碼 
<?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。app

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

 

 

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 &copy; 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程