费话不多说,相关各位找资料的伙伴应该都不喜欢读长篇大论的废话吧,还是来点实际的,直接上代码
1、普通Web工程加入jar包
maven工程的话加入依赖
<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>2.4.2</version>
<scope>runtime</scope>
</dependency>
2、在web.xml中配置Filter过滤所有请求
<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>
3、在WEB_INF目录下创建decorators.xml与web.xml同级,记住名字一定要是decorators.xml
4、根据自身的业务需求配置decorators.xml、定义装饰页面,下面我配的main.jsp是装饰主页面,也就是说所有的页面都被装饰在main.jsp中,这里同样可以配置多个装饰页面,再定义一个decorator标签把name属性跟page地址改一下就行
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/views/">
<!-- 不需要过滤的 请求路径 -->
<excludes>
<!-- <pattern>/swagger/**</pattern> -->
</excludes>
<!-- 需要过滤的页面 -->
<decorator name="default" page="/WEB-INF/form-views/main.jsp">
<pattern>/*</pattern>
</decorator>
</decorators>
5、接着到main.jsp主装饰页面文件中,该文件为主装饰页面,一般会引入一些js,css之类的全局共用的文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String path = this.getServletContext().getContextPath();%>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var path = '<%=path %>';
var screenHeight = window.screen.height; //浏览器当前窗口可视区域高度本机 800px
var screenWidth = window.screen.width; //浏览器当前窗口文档的高度本机 1280px
</script>
<title>欢迎访问DJ外国佬站点 - <sitemesh:title/></title>
<meta charset="utf-8">
<meta name="author" content="DJ外国佬" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="keywords" content="百大DJ,酒吧音乐,DJ舞曲,欧美榜单,国外电子,最新电音" />
<meta name="description" content="免费的电子音乐下载站点,酒吧求职,DJ招聘,MC招聘,夜店资源招聘" />
<link href="<%=path %>/head/public/animate/animate.css" rel="stylesheet" type="text/css"/>
<script src="<%=path %>/head/public/jquery/jquery-1.11.1.js"></script>
<!-- 播放控件 -->
<script src="<%=path%>/head/public/wavesurfer/js/wavesurfer.min.js"></script>
<script src="<%=path%>/head/public/wavesurfer/plugin/wavesurfer.regions.js"></script>
<!-- ui控件 -->
<script src="<%=path %>/head/public/layer-v3.1.1/layer.js"></script>
<link href="<%=path %>/head/public/layui-v2.2.45/css/layui.css" rel="stylesheet" type="text/css"/>
<script src="<%=path %>/head/public/layui-v2.2.45/layui.all.js"></script>
<!-- 文件上传控件 -->
<link rel="stylesheet" type="text/css" href="<%=path%>/head/public/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="<%=path%>/head/public/webuploader-0.1.5/webuploader.js"></script>
<!-- 全局公共样式 -->
<link href="<%=path %>/head/page/layui-g.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/head/page/page.css" rel="stylesheet">
<script type="text/javascript" src="<%=path%>/head/page/page.js"></script>
<!-- 首页公共样式 -->
<link rel="stylesheet" type="text/css" href="<%=path%>/head/style/wiews/main.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/head/style/wiews/header.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/head/style/wiews/footer.css" rel="stylesheet">
<sitemesh:head/>
<script type="text/javascript">
$(window).resize(function(){
screenHeight = window.screen.height;
screenWidth = window.screen.width;
});
</script>
</head>
<body>
<section class="wrap">
<header class="header"><%@ include file="header.jsp"%></header>
<section class="content"><sitemesh:body/></section>
<footer class="footer"><%@ include file="footer.jsp"%></footer>
</section>
</body>
</html>
6、以上文件主要关注以下圈红的地方
7、这句为引入sitemesh标签
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator"%>
8、主要用的几个标签
<sitemesh:title/> <sitemesh:head/> <sitemesh:body/>
用传纺方言来解释一下他的运行原理,以我这个装饰器为main.jsp为例,如果你有一个用户列表页面需要被装饰在main.jsp中,用户列表的jsp叫做userList.jsp,同时userList.jsp是一个标准的html结构文件,里面都有<head><title><body>三个子元素,而此时如果你在main.jsp中对应的地方加入了
<sitemesh:title/> <sitemesh:head/> <sitemesh:body/>
这三个标签,他会把你userList.jsp中对应的内容抓取过来放入sitemech标签入,也就是说
<sitemesh:title/> 标签会把你userList.jsp中<title></title>内的所有内容抓取过来放入
这个地方
<sitemesh:head/>标签会把你userList.jsp中<head><head/>内的所有内容抓取过来放入
这个地方
<sitemesh:body/>标签会把你userList.jsp中<body><body/>内的所有内容抓取过来放入这个地方
这样你在开发时虽然他看上去是两个页面,但其实编译后只有一个页面,所有被装饰的页面都是在main.jsp页面中展现,在这里我就不截图了,自己可以用F12看一下就知道了,同时这里会引发一个问题,就是菜单点击后样式显示,如背景变色的问题,因为sitemesh每次请求转发后都会重新加载装饰器页面,也就是main.jsp页面,所以会导致点击后的样式一直感觉没用的效果,因为你点击一个菜单,原来是要他背景颜色改变的,但sitemesh的装饰器页面main.jsp重新加载了,所有的样式全部回到最初状态 了,所以一直没有效果,竟然知道原因了,那么要解决这个问题也很简单,下次更新博客的时候再写解决方法吧
好了sitemesh的简单使用配置就到这里了