【SSM】tiles框架布局
代码资源网盘地址：https://pan.baidu.com/s/131J3pLag73A0mmqq9dKjsg
提取码：jiv9
1.配置文件添加tiles相关配置
（1）pom.xml
<!-- Tiles3 --> <!-- All Features --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.5</version> </dependency>
（2）springmvc.xml
一般情况配置如下(使用tiles布局，将其注释掉)：
<!-- 配置视图解析器，该类在spring-webmvc.jar包中 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> -->
tiles布局配置如下：
<!-- tiles布局 --> <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" p:order="1"/> <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"> <property name="definitions"> <list> <!-- Tiles基础部分 --> <value>/WEB-INF/config/tiles.xml</value> <!-- Tiles高级特性 --> <value>/WEB-INF/config/tiles-advanced-features.xml</value> </list> </property> <!-- springMVC整合情形下开启各种高级特性的方便途径，无需使用高级特性时删除此配置即可（在web.xml中配置监听器CompleteAutoloadTilesListener可以实现相同效果，不过有些小差别，比如对通配符前缀的处理方式） --> <property name="completeAutoload" value="true" /> </bean> <!-- 多视图解析器 --> <bean id="defaultViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:order="2"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> <property name="contentType" value="text/html"/> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean>
2.tiles.xml配置内容：
<?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>
<!-- 基本布局页面 -->
<!--
如果还有尚未填充的Attribute，这被称作抽象定义（abstract definition），它可以被其他Definition继承以实现布局复用，或者也可以在运行时填充这些Attribute,是否填充是可选的。
本例中layout.jsp页面中尚未填充的属性为<tiles:insertAttribute name="content" />
-->
<definition name="base.definition" template="/WEB-INF/jsp/layout/layout.jsp">
<put-attribute name="nav" value="/WEB-INF/jsp/layout/nav.jsp" />
<put-attribute name="title" value="All of the stars"/>
</definition>
<!-- =========================================== 定义的继承 ========================================================================== -->
<!--
Definition extension: a definition can inherit from another definition, to reuse an already made (abstract or not) definition
extends：类似Java的继承，抽象定义、继承、覆盖。（覆盖有两种形式：覆盖Template和覆盖Attribute）
我们用了通配符简化定义，为什么在属性name前附加“WILDCARD:”前缀？因为例子启用了Tiles的高级特性以支持更复杂的通配符情形，如果不需要使用高级特性（详见springMVC配置文件completeAutoload）则默认情况下无需添加此前缀。详见http://tiles.apache.org/framework/tutorial/advanced/wildcard.html
-->
<definition name="WILDCARD:tiles/*" extends="base.definition">
<!-- {1}：通配符方式简化定义 -->
<put-attribute name="content" value="/WEB-INF/jsp/{1}.jsp"/>
</definition>
<!-- 覆盖Template -->
<definition name="WILDCARD:tiles2/*" extends="base.definition" template="/WEB-INF/jsp/layout/layout2.jsp">
<!-- 覆盖Attribute -->
<put-attribute name="nav" value="/WEB-INF/jsp/layout/nav2.jsp" />
<put-attribute name="content" value="/WEB-INF/jsp/{1}.jsp"/>
</definition>
<!-- 覆盖Template -->
<!-- 以下内容是在网盘下载内容基础上新增，目的是为了可以访问某个文件夹下的jsp -->
<definition name="WILDCARD:tiles2/*/*" extends="base.definition" template="/WEB-INF/jsp/layout/layout2.jsp">
<!-- 覆盖Attribute -->
<put-attribute name="nav" value="/WEB-INF/jsp/layout/nav2.jsp" />
<put-attribute name="content" value="/WEB-INF/jsp/{1}/{2}.jsp"/>
</definition>
<!-- ============================================================================================================================= -->
</tiles-definitions>
3.tiles-advanced-features.xml配置文件：
<?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> <!-- Tiles Runtime Composition 运行时构建视图 这里我们启用了Tiles高级特性（springMVC配置文件completeAutoload）以支持EL表达式用于构建definition。Tiles还支持“MVEL:”和“OGNL:”，相见http://tiles.apache.org/framework/tutorial/advanced/el-support.html --> <definition name="forRuntimeEl" templateExpression="${runtimeTemplate}"> <put-attribute name="nav" value="/WEB-INF/jsp/layout/nav2.jsp" /> <put-attribute name="content" expression="${runtimeAttribute}" /> </definition> </tiles-definitions>
4.layout.jsp配置文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@tagliburi="/WEB-INF/tlds/c.tld"prefix="c"%><%@tagliburi="/WEB-INF/tlds/tiles.tld"prefix="tiles"%><c:setvar="ctx"value="${pageContext.request.contextPath}"/><c:setvar="ctxStatic"value="${pageContext.request.contextPath}/static"/><!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><%--ignore：默认false代表此属性不可忽略必须填充，当attribute未填充时会抛NoSuchAttributeException；设为true则表示可此属性在未填充时不做任何操作--%><title><tiles:insertAttributename="title"ignore="true"/></title><linkhref="${ctxStatic}/css/bootstrap.min.css"rel="stylesheet"><linkhref="${ctxStatic}/css/bootstrap-combined.min.css"rel="stylesheet"media="screen"><!--[ifltIE9]><scriptsrc="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><scriptsrc="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><divclass="container-fluid"><divclass="row-fluid"><divclass="span12"><tiles:insertAttributename="nav"/><divstyle="min-height:400px;"><tiles:insertAttributename="content"/></div></div></div></div><scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><scriptsrc="${ctxStatic}/js/bootstrap.min.js"></script></body></html>
5.layout2.jsp配置文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@tagliburi="/WEB-INF/tlds/c.tld"prefix="c"%><%@tagliburi="/WEB-INF/tlds/tiles.tld"prefix="tiles"%><c:setvar="ctx"value="${pageContext.request.contextPath}"/><c:setvar="ctxStatic"value="${pageContext.request.contextPath}/static"/><!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><%--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！--%><title><tiles:insertAttributename="title"ignore="true"/></title><linkhref="${ctxStatic}/css/bootstrap.min.css"rel="stylesheet"><linkhref="${ctxStatic}/css/bootstrap-combined.min.css"rel="stylesheet"media="screen"><linkhref="${ctxStatic}/css/layout2.css"rel="stylesheet"><!--[ifltIE9]><scriptsrc="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><scriptsrc="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><%--From:http://ruyo-net-demo.qiniudn.com/Bootstrap_left_menu.html--%><divclass="navbarnavbar-duominavbar-static-top"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="javascript:void(0)"id="logo">Run!!!</a></div></div></div><divclass="container-fluid"><divclass="row"><divclass="col-md-2"><tiles:insertAttributename="nav"/></div><divclass="col-md-10"style="min-height:400px;"><tiles:insertAttributename="content"/></div></div></div><scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><scriptsrc="${ctxStatic}/js/bootstrap.min.js"></script></body></html>
6.nav.jsp配置文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@tagliburi="/WEB-INF/tlds/c.tld"prefix="c"%><c:setvar="ctx"value="${pageContext.request.contextPath}"/><divclass="navbar"><divclass="navbar-inner"><divclass="container-fluid"><aclass="btnbtn-navbar"data-target=".navbar-responsive-collapse"data-toggle="collapse"></a><aclass="brand"href="javascript:void(0)">Run!!!</a><divclass="nav-collapsenavbar-responsive-collapse"><ulclass="nav"><li${'home'eqactiveNav?'class="active"':''}><ahref="${ctx}/better/p/home">冰与火之歌</a></li><li${'music'eqactiveNav?'class="active"':''}><ahref="${ctx}/better/p/music">音乐小镇</a></li><li${'carousel'eqactiveNav?'class="active"':''}><ahref="${ctx}/better/p/carousel">轮播</a></li><liclass="dropdown${(('progressbar'eqactiveNav)||('rt'eqactiveNav))?'active':''}"><aclass="dropdown-toggle"data-toggle="dropdown"href="#">更多</a><ulclass="dropdown-menu"><li><ahref="${ctx}/better/p/progressbar">看看</a></li><liclass="nav-header">-----------</li><li><ahref="${ctx}/better/rt">TilesRuntime</a></li><liclass="nav-header">-----------</li><li><ahref="${ctx}/better/no-tiles">无关Tiles</a></li></ul></li></ul><ulclass="navpull-right"><li${'dont-starve-together'eqactiveNav?'class="active"':''}><ahref="${ctx}/better/p/dont-starve-together">Don'tStarveTogether</a></li><li><ahref="${ctx}/better/p2/home">左侧菜单</a></li></ul></div></div></div></div>
7.nav2.jsp配置文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <ul id="main-nav" class="nav nav-tabs nav-stacked"> <li class="active"> <a href="${ctx}/better/p/home"> <i class="glyphicon glyphicon-th-large"></i> 默认主题</a> </li> <li> <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse"> <i class="glyphicon glyphicon-cog"></i> 都是好东西！ <span class="pull-right glyphicon glyphicon-chevron-down"></span> </a> <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;"> <li><a href="${ctx}/better/p2/home"><i class="glyphicon glyphicon-user"></i> 冰与火之歌</a></li> <li><a href="${ctx}/better/p2/music"><i class="glyphicon glyphicon-music"></i> 音乐小镇</a></li> <li><a href="${ctx}/better/p2/carousel"><i class="glyphicon glyphicon-asterisk"></i> 轮播</a></li> <li><a href="${ctx}/better/p2/progressbar"><i class="glyphicon glyphicon-edit"></i> 看看</a></li> </ul> </li> <li><a href="${ctx}/better/p2/home"> <i class="glyphicon glyphicon-credit-card"></i> 冰与火之歌</a></li> <li> <a href="${ctx}/better/p2/music"> <i class="glyphicon glyphicon-music"></i> 音乐小镇 <span class="label label-warning pull-right">6</span> </a> </li> <li><a href="${ctx}/better/p2/carousel"> <i class="glyphicon glyphicon-calendar"></i> 轮播</a></li> <li><a href="${ctx}/better/p2/progressbar"> <i class="glyphicon glyphicon-fire"></i> 看看</a></li> </ul>
以上仅供参考，如有疑问，留言联系
浙公网安备 33010602011771号