ssm框架下 tiles框架 的使用

2022-04-13 09:02:27 浏览数 (1)

tiles框架的工作 在springMVC工作流程中属于视图解析器 解析视图这一步。算是视图解析器的一个插件，作了视图解析这步的一部分工作。

1. 加maven依赖引入 jar包：

代码语言：javascript复制
                <!-- 页面布局 -->
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-jsp</artifactId>
			<version>3.0.5</version>
		</dependency>

2. 在 spring-servlet.xml 中加入配置：

代码语言：javascript复制
<!-- tiles 标签  -->
	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/tiles/tiles-definitions.xml</value>
			</list>
		</property>
	</bean>

3. 书写如配置中取名的 tiles-definitions.xml 文件，并放到对应的 /WEB-INF/tiles/ 目录下：

代码语言：javascript复制
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC 
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" 
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"> 

<tiles-definitions> 
    <!-- Default 主布局 --> 
    <definition name="defaultTemplate" template="/WEB-INF/jsps/common/layout.jsp"> 
        <put-attribute name="title" value="布局页" type="string" />
    </definition> 
</tiles-definitions>

4. layout.jsp就是主布局页面，可以把公用的js、css的引用写在这个页面，子页面就不用再重复引入了。

我的布局是左侧为导航页面，右侧为每个功能页面。

在对应位置书写layout.jsp 页面：

代码语言：javascript复制
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<% String path = request.getContextPath();
    String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>  
<title><tiles:insertAttribute name="title" /></title>  <!-- 主布局页面 -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Bootstrap -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		
<!-- 引入自定义的样式等内容 -->
<tiles:insertAttribute name="heads" />
</head>



<body class="nav-md">

  <div class="container body" >
    <div class="main_container">
	<!-- 功能菜单界面 -->
	<jsp:include page="nav.jsp"></jsp:include>
	<!-- /功能菜单界面 -->

    <!-- 当前页面内容 -->
	<div class="right_col" role="main">
	  <tiles:insertAttribute name="body" />
	</div>
    <!-- /当前页面内容 -->
    </div>
  </div>

<!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script charset="utf-8" src="js/bootstrap.min.js"></script>

<tiles:insertAttribute name="scripts" />
</body>
</html><!-- 主布局页面 -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Bootstrap -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		
<!-- 引入自定义的样式等内容 -->
<tiles:insertAttribute name="heads" />
</head>



<body class="nav-md">

  <div class="container body" >
    <div class="main_container">
	<!-- 功能菜单界面 -->
	<jsp:include page="nav.jsp"></jsp:include>
	<!-- /功能菜单界面 -->

    <!-- 当前页面内容 -->
	<div class="right_col" role="main">
	  <tiles:insertAttribute name="body" />
	</div>
    <!-- /当前页面内容 -->
    </div>
  </div>

<!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script charset="utf-8" src="js/bootstrap.min.js"></script>

<tiles:insertAttribute name="scripts" />
</body>
</html>

5. 导航页面nav.jsp书写 ：

代码语言：javascript复制
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();
    String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<base href="<%=basePath%>"/>  

<!-- 导航页面 -->

<div class="col-md-3 left_col">
	<div class="left_col scroll-view">
		<div class="navbar nav_title" style="border: 0;">
			<a href="/" class="site_title"><i class="fa fa-paw"></i><span>小熊乐园 V0.1</span></a>
		</div>

		<div class="clearfix"></div>

		<!-- 登录人员信息 -->
		<div class="profile">
			<div class="profile_pic">
				<img src="images/img.jpg" alt="..." class="img-circle profile_img">
			</div>
			<div class="profile_info">
				<span>欢迎您：</span>
				<h2><shiro:principal property="account"/></h2>
			</div>
		</div>

		<br />

		<!-- 系统功能菜单 -->
		<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
			<div class="menu_section">
				<h3><shiro:principal property="roleDesc"/></h3>
				<ul class="nav side-menu">
					<shiro:hasPermission name="love:menu">
						<li>
							<a><i class="fa fa-male"></i>完美生活<span class="fa fa-chevron-down"></span></a>
							<ul class="nav child_menu">
								<shiro:hasPermission name="love:list">
									<li><a href="/loveList">爱的告白</a></li>
									<li><a href="/feeling">心情印记</a></li>
								</shiro:hasPermission>
							</ul>
					</shiro:hasPermission>
					
					<shiro:hasPermission name="ad:menu">
						<li>
							<a><i class="fa fa-bullhorn"></i>浅浅人生<span class="fa fa-chevron-down"></span></a>
							<ul class="nav child_menu">
								<shiro:hasPermission name="adFlow:list">
									<li><a href="/adLife">默默心语</a></li>
								</shiro:hasPermission>
							</ul>
						</li>
					</shiro:hasPermission>
					
					<shiro:hasPermission name="system:menu">
						<li>
							<a><i class="fa fa-cog"></i>系统管理<span class="fa fa-chevron-down"></span></a>
							<ul class="nav child_menu">
								
								<shiro:hasPermission name="systemAuth:menu">
									<li><a>系统权限<span class="fa fa-chevron-down"></span></a>
										<ul class="nav child_menu">
											<shiro:hasPermission name="systemAuthRes:list">
												<li class="sub_menu"><a href="/systemAuthRes">权限资源</a></li>
											</shiro:hasPermission>
											
											<shiro:hasPermission name="systemAuthRole:list">
												<li class="sub_menu"><a href="/systemAuthRole">权限角色</a></li>
											</shiro:hasPermission>
										</ul>
									</li>
								</shiro:hasPermission>
								
								<shiro:hasPermission name="systemAdmin:list">
									<li><a href="/systemAdmin">管理人员</a></li>
								</shiro:hasPermission>
							</ul>
						</li>
					</shiro:hasPermission>
					
				</ul>
			</div>
		</div>

		<!-- /menu footer buttons -->
		<div class="sidebar-footer hidden-small">			
			<!-- /logout ：退出功能访问路径是在spring-shiro.xml中配置的，由shiro执行 ，不走controller -->
			<a data-toggle="tooltip" data-placement="top" title="退出" href="/logout">
				<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
			</a>
		</div>
		<!-- /menu footer buttons -->
	</div>
</div>

<!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>
	省略...
<script type="text/javascript">
</script>	省略...
<script type="text/javascript">
</script>

6. 功能页面书写：

代码语言：javascript复制
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<% String path = request.getContextPath();
    String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<base href="<%=basePath%>"/>  
    
<tiles:insertDefinition name="defaultTemplate">

    <tiles:putAttribute name="title" value="心情印记时光轴" />
	<tiles:putAttribute name="heads">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>时光轴</title>
		<style>
/* 			*{margin:0;padding:0} */
			.box{width:960px;height:300px;margin:100px auto;position:relative;z-index:1;} 
			body{font-size:14px;font-family:"微软雅黑"; background-attachment:fixed;z-index:0;}
			.box{margin:1px auto;position:relative;z-index:1;}
			
			/*内容发布区域*/
			.box .boxcenter{width:500px;height:200px;background:#4e8f86;position:absolute;top:80px;left:180px;border:1px solid green;border-radius:6px;}
			.box .boxcenter .boxc_t{height:30px;line-height:30px;color:gold;}
			.box .boxcenter .boxc_c{width:460px;height:100px;border:1px solid #A6C8FF;margin:8px auto;text-indent:10px;box-shadow:0 0 4px #A6C8FF;}
			.box .boxcenter .boxc_b{width:80px;height:30px;position:absolute;right:10px;bottom:8px;}
			.box .boxcenter .boxc_b a{font-size:14px;color:#fff;line-height:30px;background:#3bbfb4;border-radius:6px;display:block;text-align:center;text-decoration:none;}
			.box .boxcenter .boxc_b a:hover{background:#2C8E86;}
			.box .timeline{width:60px;height:100%;position:absolute;top:100px;left:80px;border-right:3px solid yellow;}
			.timeline .timeline_t{width:50px;height:50px;border-radius:50%;border:2px solid white;background:url("images/day_yuan.gif") no-repeat;background-size:100%;}
			.timeline .nextbox{width:380px;height:80px;position:absolute;top:260px;left:60px;}
			.a{width:380px;height:80px;background:#4e8f86;border-radius:6px;margin-top:30px;font-size:16px;line-height:20px;text-indent:20px;word-break:break-all;position:relative;left:6px;}
			.a .b{width:6px;height:6px;border-radius:50%;border:2px solid #fff;background:#9DCFE1;position:absolute;top:35px;left:-10px;}
			#time{font-size:20px;color:gold;}
			#hour{font-size:12px;color:gold;}
		</style>
	</tiles:putAttribute>

	<tiles:putAttribute name="body">
		<div class="box" style="width:100%;height:100%;background-image: url(images/record_back.jpg);">
			<!--内容发布区域-->
			<div class="boxcenter" >
				<div class="boxc_t"><h4>   随便说点什么吧...</h4></div>
				<div class="boxc_c" contenteditable="true" id="aa" style="color:black;font-size:19px;"></div>
				<div class="boxc_b"><a>发布</a></div>
			</div>
			<!--时光轴线-->
			<div class="timeline">
				<div class="timeline_t">
				</div>
				<div class="nextbox" style="color:black;font-size:19px;"></div>
			</div>
		</div>
	</tiles:putAttribute>
	
	<tiles:putAttribute name="scripts">
	
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">	
			$(function(){
				$(".box").find(".boxc_b").click(function(){
					var center = $(".boxc_c").text();//.appendTo("nextbox");
					if(center==""){
						alert("嘻嘻，请写下你此时的心情吧...");
						return;
					}
					$(".nextbox").prepend("<div class='a'>" 
						"<div class='b'></div>" "<br/>" 
						"<span id='time'>  " year "-" 
						month "-" 
						day "  " 
						"<span id='hour'>" hour ":" min "</span>" 
						"</span>" 
						"<br>" 
						"<p style='padding:4px'>" center "</p>" 
						"</div>");
					$(".boxc_c").text("");	
				});
				//alert(1);
				$(".boxc_c").keydown(function(event){					
					var len =$(".boxc_c").text().length;			
					if(len > 70){
					alert("够了，别写了，哪儿那么多话啊...");					
					}
				});
			
				var dateDom = new Date();
				//获取本地时间，年月日时分
				var year = dateDom.getFullYear();
				var month = dateDom.getMonth() 1;
				var day = dateDom.getDate();
				var hour = dateDom.getHours();
				var min = dateDom.getMinutes();
			});
		</script>
	</tiles:putAttribute>
</tiles:insertDefinition>
spring xml jsp java javascript

0 人点赞