tiles3使用Demo

最新推荐文章于 2021-06-04 06:43:02 发布

Java小色痞

最新推荐文章于 2021-06-04 06:43:02 发布

阅读量650

点赞数

分类专栏： java 文章标签： tiles3Demo tiles3 页面布局

本文链接：https://blog.csdn.net/Mister_yang/article/details/80306210

版权

java 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一。为什么使用tiles3

当我们的网页是出现块区域，而我们的请求又不需要改变全局的数据时，使用tiles3进行布局页面，可以使界面只发生部分数据的变化。如图。当我们点击左侧的menu的时候，发送请求，改变数据主界面的数据。

二。所以依赖jar

(1)maven管理项目

在<dependencies></dependencies>节点下添加如下代码

<!-- titles3.jar -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>3.0.7</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>3.0.7</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-api</artifactId>
            <version>3.0.7</version>
        </dependency>

        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>3.0.7</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-template</artifactId>
            <version>3.0.7</version>
        </dependency>

（2）web管理

tiles3架包下载

三。配置文件

（1）web.xml配置

<!-- 配置SpringMVC环境 -->
<servlet>
<servlet-name>springMVC</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	<init-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:spring-mvc.xml</param-value>
	</init-param>
</servlet>
<servlet-mapping>
	<servlet-name>springMVC</servlet-name>
	<url-pattern>*.action</url-pattern>
</servlet-mapping>

（2）在springmvc的文件下配置视图解析器

<!-- titles3配置 -->
	<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass">
			<value>
				org.springframework.web.servlet.view.tiles3.TilesView
			</value>
		</property>
	</bean>
	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>classpath:titles.xml</value>
			</list>
		</property>
	</bean>

（3）tiles3配置

<?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>
 	
 	<definition name="welcome.page" template="/WEB-INF/titles/welcome.jsp">
 		<put-attribute name="content" value="/WEB-INF/views/welcome.jsp"></put-attribute>
 	</definition>
 	
 	<definition name="*.page" template="/WEB-INF/titles/main.jsp">
 		<put-attribute name="content" value="/WEB-INF/views/{1}.jsp"></put-attribute>
 	</definition>

 </tiles-definitions>

当点击menu时，发送请求处理后返回界面xxx.page的形式，然后匹配到tiles3的配置文件上,当返回welcom.page的时候，访问的是welcome.jsp,当返回其他的page的时候，使用第二个。如果你还想增加其他的tiles3的模板，只需要在

<tiles-definitions></tiles-definitions>

添加

<definition name="*.page" template="/WEB-INF/titles/xxx.jsp">
 		<put-attribute name="content" value="/WEB-INF/views/{1}.jsp"></put-attribute>
 </definition>

节点即可。

四.jsp界面

（1）titles下的main.jsp代码

<body>
	<div id="main-header">
		<h1><c:out value="SCORES"></c:out></h1>
	</div>
	<div id="main-settings">
      	<ul>
        	<li><a href="<i:url action="welcome" method="logout"/>"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a></li>
      	</ul>
	</div>
	<div id="main-welcome">
	<c:out value="您好！"></c:out>
		<c:out value="${usercontext.userName}"></c:out>
	</div>
	<div id="main-menu">
		<ul>
  			<i:role type="<%=ActionRole.Type.Score.read %>"><i:menu action="welcome"><i class="fa fa-history" aria-hidden="true"></i><span><c:out value="成绩查询"/></span></i:menu></i:role>
  			<i:role type="<%=ActionRole.Type.Student.read %>"><i:menu action="welcome"><i class="fa fa-history" aria-hidden="true"></i><span><c:out value="学生查询"/></span></i:menu></i:role>
  			<i:role type="<%=ActionRole.Type.Classt.read %>"><i:menu action="welcome"><i class="fa fa-history" aria-hidden="true"></i><span><c:out value="班级查询"/></span></i:menu></i:role>
  			<i:role type="<%=ActionRole.Type.School.read %>"><i:menu action="welcome"><i class="fa fa-history" aria-hidden="true"></i><span><c:out value="学校查询"/></span></i:menu></i:role>
  		</ul>
	</div>
	<div id="main-content">
		<div id="main-content-navigation">
			<div>
				<a href="<i:url action="home"/>"><span><c:out value="主界面"></c:out></span></a>
			</div>
		</div>
		<div id="main-content-page">
			<tiles:insertAttribute name="content"/>
		</div>
	</div>
	<div id="main-footer">
		<div><c:out value="@auth:ytk,@time:2018.5.3"></c:out></div>
	</div>
</body>

（2）views下的jsp

<div class="content">
	<i:url var="url"  action="welcome" method="login"/>
	<sf:form modelAttribute="user" action="${url}" method="post">
	<div class="input">
			<div class="input-group">
			  	<span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
			  	<sf:input class="form-control" path="userName" placeholder="Username"/>
			</div>
		</div>
		<div class="input">
			<div class="input-group">
			  	<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
			  	<sf:password class="form-control" path="passWord" placeholder="Password"/>
			</div>
		</div>
		<div class="actions">
			<button type="submit" class="btn btn-success">
    			<i class="fa fa-sign-in" aria-hidden="true"></i> Login
			</button>
		</div>
	</sf:form>
</div>

四。完成Demo链接

tiles3整合Demo下载

五。作者q：106120361(加q请注明来意)

Java小色痞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tiles3使用Demo

一。为什么使用tiles3 当我们的网页是出现块区域，而我们的请求又不需要改变全局的数据时，使用tiles3进行布局页面，可以使界面只发生部分数据的变化。如图。当我们点击左侧的menu的时候，发送请求，改变数据主界面的数据。二。所以依赖jar (1)maven管理项目在&lt;dependencies&gt;&lt;/dependencies&gt;节点下添加如下代码&...
复制链接

扫一扫

专栏目录