sitemesh在SSM项目中的使用

费话不多说,相关各位找资料的伙伴应该都不喜欢读长篇大论的废话吧,还是来点实际的,直接上代码

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的简单使用配置就到这里了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值