SiteMesh 是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的
SiteMesh是OpenSymphony团队开发的JEE框架之一,它是一个非常优秀的页面装饰器框架,它通过对所有的用户请求进行过滤,并对服务器向客户端响应也进行过滤,从而给原始的服务器响应加入一定的装饰,可以是header,footer等,然后将经过装饰后的页面送回浏览者.对于被装饰的页面而言,它无需知道自身被谁装饰,也无从知道自身被谁装饰,SiteMesh通过配置文件来配置指定的装饰器,用于过滤某些页面,则该装饰器会装饰这些页面,从而提供更好的页面效果,通过SiteMesh的页面装饰,可以提供更好的代码复用,所有的页面装饰效果耦合在目标页面中,无需使用include指令来显式包含装饰效果,目标页面与装饰页面完全分高.提供更好的解耦,而且可以应用中所有的页面都使用相同的装饰页面,整个Web应用会有更统一的风格,会提供更好的整体效果.
SiteMesh通过Filter来截取request和response,然后给原始的页面加入一定的装饰,再把结果返回给客户端.
这里值得一提的是,SiteMesh只会把最终生成的html填充到装饰的页面,至于关于之前拦截到需要被装饰的jsp里面引入了一些c标签什么的都不会自动引入到装饰页面的,因为sitemesh只会把最终生成的html加入到装饰页面!!所以这里就造成了几个问题
1.装饰的页面如果要用到通用的非静态资源(jstl标签,page),由于服务器是直接跳转到被装饰页面,然后处理jstl等成为普通html才把被装饰页面加入到装饰页面,所以在被装饰页面引入的一些非静态资源是不会加入到装饰页面的,装饰页面还要在引一片通用的 tag,也就是jstl标签。结果就是被装饰页面和装饰页面引tag(也就是非静态资源)都要引两遍
使用sitemesh的步骤
1. 添加jar文件到classpath
maven地址
<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>2.4.2</version>
</dependency>
2. 在web.xml中增加过滤器
<!-- Sitemesh -->
<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>
3. 在/WEB-INF中创建decorators.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/layouts/">
<!-- 不需要过滤的请求 -->
<excludes>
<pattern>/static/*</pattern>
<pattern>/remote/*</pattern>
</excludes>
<!-- 定义装饰器要过滤的页面 -->
<decorator name="default" page="default.jsp">
<pattern>/*</pattern>
</decorator>
</decorators>
ps:
1.在这里配置的decorator标签的page属性指向的jsp是装饰页面,下面拦截的/*是真正的普通页面,要被page指定的页面所装饰,装饰页面就是写了一堆sitemesh的标签,然后把pattern标签上url拦截到的被装饰页面的对应装饰页面标签的head和body抠过来填充到装饰页面这个意思
2.excludes标签下配置的是不需要拦截忽略的url
3.这里可以不用<pattern>进行拦截被装饰页面,也可以使用html meta进行拦截,参考sitemesh 学习之 meta 引入
在根目录下新建文件夹layouts,然后新建三个JSP,一个是默认,一个输出头,一个输出尾,默认页面引用其他两个。
默认页面default.jsp:
默认页面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"%>
<html>
<head>
<title>SiteMesh示例-<sitemesh:title/></title>
<sitemesh:head/>
</head>
<body>
<%@ include file="/layouts/header.jsp"%>
<div id="content">
<sitemesh:body/>
</div>
<%@ include file="/layouts/footer.jsp"%>
</body>
</html>
简单说明:
- 引入了SiteMesh标签。
- <sitemesh:title/> 会自动替换为被过滤页面的title。
- <sitemesh:head/> 会把被过滤页面head里面的东西(除了title)放在这个地方。
- <sitemesh:body/> 被过滤的页面body里面的内容放在这里。
- 头部引入js和css,都可以在其他重用。
这里在装饰页面引用了header.jsp,里面可以用一些通用的css,js ,footer.jsp同理,可以加入一些通用的底部样式页面
header.jsp
<%@ page contentType="text/html;charset=UTF-8" %><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="author" content="http://jeesite.com/"/>
<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/bootstrap/2.3.1/css_${not empty cookie.theme.value ? cookie.theme.value : 'cerulean'}/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
<!--[if lte IE 7]><link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome-ie7.min.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if lte IE 6]><link href="${ctxStatic}/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script><![endif]-->
<link href="${ctxStatic}/jquery-select2/3.4/select2.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/common/jeesite.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/common/jeesite.js" type="text/javascript"></script>
<script type="text/javascript">var ctx = '${ctx}', ctxStatic='${ctxStatic}';</script>
开始验证
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>有人拦截我吗?</title>
</head>
<body>
有人拦截我吗?
</body>
</html>
同 /static/index.jsp 跟上面一样的代码
index.jsp页面的title和body内的内容都会加到装饰页面default.jsp里面配置的<sitemesh:title/> 和 <sitemesh:body/>上,内容替换这两个标签
测试 index.jsp拦截到了
/static/index.jsp没有拦截
这是由于 static这个url在上面decorators.xml 里面的 excludes 标签内配置了忽略拦截 end