sitemesh使用装饰器（decorators）模式建立统一的页面模板样式

最新推荐文章于 2022-12-12 12:37:48 发布

谦虚使人发胖

最新推荐文章于 2022-12-12 12:37:48 发布

阅读量500

点赞数

分类专栏： jsp与js

本文链接：https://blog.csdn.net/u012843873/article/details/79384940

版权

jsp与js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1. 简介

OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰（layout and decoration）的框架组件，能够帮助网站开发人员较容易实现页面中动态内容和静态装饰外观的分离。

2. 功能基础

Sitemesh是由一个基于Web页面布局、装饰及与现存Web应用整合的框架。它能帮助我们在由大量页面工程的项目中创建一致的页面布局和外观，如一致的导航条、一致的banner、一致的版权等。它不仅能处理动态的内容，如JSP、PHP、ASP、CGI等产生的内容，还能处理静态的内容，比如HTML的内容，使得它的内容也符合你的页面结构的要求。甚至它能像include那样将HTML文件作为一个面板的形式嵌入到别的文件中去。所有的这些，都是GOF的Decorator模式的最生动的实现。装饰模式是在不必改变原类文件和使用集成的情况下，动态地扩展一个对象的功能。它能通过创建一个包装对象，也就是装饰来包裹的对象。

3. 工作原理

Sitemesh应用Decorator模式，用filter截取request和response,把页面组件head,content,banner结合为一个完整的视图。通常我们都是用include标签在每个jsp页面中来不断的包含各种header, stylesheet, scripts and footer，现在，在sitemesh的帮助下，我们可以开心的删掉他们了

其中涉及到两个名词：装饰页面(decorator page)和 "被装饰页面(Content page)" , 即 SiteMesh通过对Content Page的装饰，最终得到页面布局和外观一致的页面，并返回给客户

4. 配置过程

（1）在web.xml中添加SitemeshFilter

sitemesh默认使用decorators.xml作为装饰配置文件

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

（2）添加sitemesh-2.3.jar到WEB-INF\lib下。（这里可以下载http://www.opensymphony.com/sitemesh/）

（3）建立装饰器页面（公共的页面模板default.jsp）

<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
<%@ taglib prefix="sitemesh"
	uri="http://www.opensymphony.com/sitemesh/decorator"%>

<%--shiro --%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>

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

--%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>测试系统</title>
<meta charset="utf-8" />
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 通用的样式文件 -->
<jsp:include page="commonCss.jsp">
	<jsp:param name="jspParameterForInclude" value="index"></jsp:param>
</jsp:include>
</head>

<body class="fixed-top">
    <jsp:include page="commonScript.jsp"></jsp:include><!-- 通用的js脚本文件 -->
    <jsp:include page="commonNav.jsp"></jsp:include><!--页眉-->
    <div id="container" class="row-fluid">
	 <jsp:include page="commonMenu.jsp"></jsp:include><!--菜单-->
      	 <!-- BEGIN PAGE -->  
         <div id="main-content" class="forbid-select">
             <!-- BEGIN PAGE CONTAINER-->
             <div class="container-fluid">
		<sitemesh:body /><!--文件-->
             </div>
         <!-- END PAGE CONTAINER-->
      </div>
      <!-- END PAGE -->  
   </div>
   <!-- END CONTAINER -->
   <!-- BEGIN FOOTER 页脚-->
   <div id="footer" style="font-size: 20px;text-align: left;background-color: #404040;border-top: 2px solid black !important;" >
       <span style="color:white;">报警提示：</span><span id="alarmNum" style="color: red;">000</span>
       <div class="concave-convex" style="float: right;width: 300px;height: 30px;margin-right: 20px;">
	       <div style="float: left;margin-left: 50px;">
	       		<img id="plc" class="circle25" style="width: 65px;" src="<c:url value='/static/img/crane/plc.bmp'/>" />
	       </div>
	       <div style="float: left;margin-left: -45px;margin-top: 10px;">
	       		<img id="onOrOffLine" class="circle25" style="width: 18px;" src="<c:url value='/static/img/crane/online.png'/>" />
	       </div>
       		<div style="float:left;margin-left: 20px;">
        		<span id="showtime" style="height: 49px; vertical-align: middle;color: white;font-size: 15px;"></span>
       		</div>
	   </div>
   </div>
   <!-- END FOOTER -->
	<jsp:include page="commonScriptEnd.jsp"></jsp:include>

</body>
<script type="text/javascript">
	$(function () {
		getAlarmNum();
	});
	
	window.setInterval("regularTime()", 1000);
	
	//所有需要定时执行的数据
	function regularTime () {
		getAlarmNum();
	}
	
	//检测PLC是否连接
	function checkPLCConnect () {
		
	}
	
	//获得报警的数量、实时时间
	function getAlarmNum () {
	   var parm=[];
	   $.ajax({
			"type" : "POST",
			"contentType" : "application/json",
			"url" : '<c:url value="/monitor/alarm/getAlarmNum"/>',
			"dataType" : "json",
			"data" : JSON.stringify(parm), //以json格式传递
			"success" : function(resp) {
				//实时时间
				$("#showtime").html(resp.currentDateStr); 
				var alarmNum = resp.alarmNum;
				var length = alarmNum.toString().length;//将报警数量转换成字符串
				
				//格式化报警数量
				if (length == 0) {
					alarmNum = "000";
				}else if (length == 1) {
					alarmNum = "00" + alarmNum;
				} else if (length == 2) {
					alarmNum = "0"+ alarmNum;
				}
				//报警数量
				$("#alarmNum").html(alarmNum);
			}
		});
	}
	
</script>
</html>

（4）配置decorators.xml描述各装饰器页面

<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/layouts/">
	<!-- 不要装饰的目录或者文件 -->
	<excludes>
		<pattern>/static/*</pattern>
		<pattern>/mui/*</pattern>
		<pattern>/account/*</pattern>
		<pattern>/editk/*</pattern>
	</excludes>
	
	<decorator name="error" page="error.jsp">
		<pattern>/error/**</pattern>
	</decorator>
	
	<decorator name="login" page="account.jsp">
		<pattern>/login</pattern>
	</decorator>
	
	<decorator name="admin" page="admin.jsp">
		<pattern>/admin</pattern>
	</decorator>
	
	<decorator name="index" page="admin.jsp">
		<pattern>/index</pattern>
	</decorator>
	
	
	<decorator name="chart" page="chart.jsp">
		<pattern>/chart/**</pattern>
	</decorator>
	
	<decorator name="dialog" page="dialog.jsp">
		<pattern>/dialog/*</pattern>
	</decorator>
	
	<decorator name="default" page="default.jsp">
		<pattern>/*</pattern>
	</decorator>
	
</decorators>