Tiles框架的搭建（SpringMVC+Tiles)

qq_42733162

于 2020-05-10 12:59:06 发布

阅读量1.3k

点赞数

文章标签： java jsp tag 软件框架 mvc

本文链接：https://blog.csdn.net/qq_42733162/article/details/106033724

版权

本文介绍了如何搭建Tiles框架，结合SpringMVC实现页面组件化。首先理解Tiles的作用是拆分并组合前端页面，然后详细说明了项目结构、Pom.xml的依赖配置、SpringMvc.xml中的视图解析器配置、tiles.xml的布局配置，以及jsp内容的组织方式。通过一个具体的homePage页面示例，展示了如何在controller层返回数据，并成功运行项目。

摘要由CSDN通过智能技术生成

在看本文之前需要先看这篇文章，了解tiles框架的基础概念及作用

（Tiles 框架干货讲解） https://blog.csdn.net/aosica321/article/details/68948915

简单总结下：

tiles框架的作用，就是将一个完整的前端html页面拆分成若干jsp页面。

固定不变的页面拆分为一部分，

经常变化的页面，或者需要写活数据的页面拆成另外一部分。

再通过tiles框架将所有部分组装起来。

Tiles的环境搭建

理解起来非常简单，那么接下来就是动手搭建, 并不难。

分享以下我的项目实例 SSM+Tiles框架（ssm部分忽略）

项目结构

1. Pom.xml 直接引入tiles所需依赖

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

2. SpringMvc.xml中配置加载css js images静态资源（路径看我上方的项目结构）


    <!--    此配置可访问静态资源 如js css jpg-->
    <mvc:default-servlet-handler/>
    <mvc:resources location="/WEB-INF/pages/ten/images/" mapping="/images/**"/>
    <mvc:resources location="/WEB-INF/pages/ten/css/" mapping="/css/**"/>
    <mvc:resources location="/WEB-INF/pages/ten/js/" mapping="/js/**"/>

3. SpringMvc.xml中配置tiles的视图解析器（tiles.xml）

    <!--    配置tiles的视图解析器-->

 <!--  order表示优先级，数字越小，解析器的优先级越高  -->

    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" >
    <property name="order" value="1" />
    </bean>


    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/tiles.xml</value>
            </list>
        </property>
    </bean>

4.配置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>
    <!-- 主布局 -->
    <definition name="public" template="/WEB-INF/pages/home.jsp">
        <put-attribute name="head" value="/WEB-INF/pages/head.jsp" />
        <put-attribute name="footer" value="/WEB-INF/pages/footer.jsp" />
    </definition>
    <!-- 主布局 -->

    <!-- 第一个页面 -->
    <definition name="homePage" extends="public">
        <put-attribute name="body" value="/WEB-INF/pages/homePageBody.jsp" />
    </definition>

    <!-- 第二个页面 -->
    <definition name="profession" extends="public">
        <put-attribute name="body" value="/WEB-INF/pages/professionBody.jsp" />
    </definition>
</tiles-definitions>

5. 主布局里的 home.jsp

home.jsp就是我们的主布局模板，它决定整个网页需要显示的内容以及显示到什么地方。

这里把 head， body. ， footer 三个部分组成一个模板

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<body style="text-align: center;margin: auto;">
<div id="head">
   <t:insertAttribute name="head"/>
</div>
<div id="content">
   <t:insertAttribute name="body"/>
</div>
<div id="footer">
   <t:insertAttribute name="footer"/>
</div>
</body>
</html>

以我的第一个页面homePage举例它继承了public主布局模板也就是home.jsp