Spring MVC之使用Apache Tiles

矫情吗；* 2022-09-10 05:14 172阅读 0赞

有时候，一些页面会共用同样的布局，比如相同的头部菜单或者底部内容，可以将重复的内容抽取出来，写在单独的文件里，而每个页面在适当的地方引入这些文件。但是即使这样，也还是显得繁琐，而且一旦布局变化（比如头部的菜单移动到侧边栏），每个文件也都要改。而使用Apache Tiles，可以将方便地重复使用布局模板，由于布局间可以继承，对布局变化的处理也更加方便。

# 定义Tiles视图解析器 #

下面代码是继承自WebMvcConfigurerAdapter的WebConfig类，在其中定义了TilesConfigurer和TilesViewResolver的bean。

package tantanit.web;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.ComponentScan;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.ViewResolver;
    import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
    import org.springframework.web.servlet.config.annotation.EnableWebMvc;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
    import org.springframework.web.servlet.view.tiles3.TilesViewResolver;
    
    @Configuration
    @EnableWebMvc
    @ComponentScan("tantanit.web")
    public class WebConfig extends WebMvcConfigurerAdapter { 
    
      @Override
      public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { 
        configurer.enable();
      }
    
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) { 
        // TODO Auto-generated method stub
        super.addResourceHandlers(registry);
      }
    
    
      // Tiles
      @Bean
      public TilesConfigurer tilesConfigurer() { 
        TilesConfigurer tiles = new TilesConfigurer();
        tiles.setDefinitions(new String[] { 
            "/WEB-INF/layout/tiles.xml",
            "/WEB-INF/views/**/tiles.xml"
        });
        tiles.setCheckRefresh(true);
        return tiles;
      }
    
      @Bean
      public ViewResolver viewResolver() { 
        return new TilesViewResolver();
      }
    
    }

上述代码中，配置TilesConfigurer，指定tiles定义文件，并指定了多个tiles定义文件。然后，定义视图解析器为TilesViewResolver。

下面让我们看一下/WEB-INF/layout/tiles.xml的内容。

# tiles定义 #

<?xml version="1.0" encoding="ISO-8859-1" ?>
    <!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="base" template="/WEB-INF/layout/page.jsp">
        <put-attribute name="header" value="/WEB-INF/layout/header.jsp" />
        <put-attribute name="footer" value="/WEB-INF/layout/footer.jsp" />
      </definition>
    
      <definition name="home" extends="base">
        <put-attribute name="body" value="/WEB-INF/views/home.jsp" />
      </definition>
    
      <definition name="about" extends="base">
        <put-attribute name="body" value="/WEB-INF/views/about.jsp" />
      </definition>
    
    </tiles-definitions>

第一个definition中，定义了名称为base的模板，模板内容为page.jsp，并且指定了两个属性header和footer,内容分别为header.jsp，footer.jsp，这两个属性可以在page.jsp中使用。

第二个definition，定义了名称为home的页面，这个页面继承了base模板，同时，指定名称为body的属性值为home.jsp，该属性可以在page.jsp中使用。可以这样理解，名称为home的页面的布局已经在page.jsp中定义了，个性化的部分，只有body属性的内容。

第三个definition，定义了名称为about的页面，这个页面也是继承base模板，同时，指定名称为body的属性值为about.jsp。

这样说起来有点抽象，但看完page.jsp的内容就会比较清楚了。

# 渲染页面 #

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
    <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
    <html>
      <head>
        <title>谈谈IT</title>
        </head>
      <body>
        <div id="header">
          <t:insertAttribute name="header" />
        </div>
        <div id="content">
          <t:insertAttribute name="body" />
        </div>
        <div id="footer">
          <t:insertAttribute name="footer" />
        </div>
      </body>
    </html>

page.jsp页面中，作为模板页面。定义了三个div，header,content和footer，其中，header的内容由属性header指定，footer的内容由属性footer指定，而这两个属性在名称为base的模板定义中已经分别指定为header.jsp和footer.jsp，属于每个页面共同的布局。而id为content的内容由属性body指定，这个属性由具体的页面决定，是每个页面除布局外的具体内容。

在页面渲染时，比如要渲染home.jsp，除了home.jsp外，还会根据模板定义，加上相应的布局，渲染完整的页面。

下面贴出布局和具体页面内容，并展示最终效果。  
header.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
    
    <a href="/">首页</a>
    <a href="/about">关于谈谈IT</a>

footer.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
    Copyright © 谈谈IT

home.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%><head>
    <h1>欢迎访问谈谈IT</h1>
    <p>欢迎访问<a href="http://tantanit.com">tantanit.com</a></p>

about.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>
    <h1>关于谈谈IT</h1>
    <p>谈谈IT，是一个专注于计算机技术、互联网、搜索引擎、SEO、优秀软件、网站架设与运营的原创IT科技博客。</p>

首页渲染效果如下：

![首页渲染效果][3f69e41fed7ddb5ee9efd250e01a4b7f.png]

关于页面渲染效果如下：

![关于页面渲染效果][035a4e9371c462e4807aa53b477b495b.png]

样式略丑，多包涵。

我已经将代码放在[github][]上，欢迎下载。

欢迎扫描下方二维码关注微信公众号【谈谈IT】，第一时间获取最新文章。  
![欢迎关注同名公众号][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[3f69e41fed7ddb5ee9efd250e01a4b7f.png]: /images/20220829/99be2e138d244eee8bb616b3c338d165.png
[035a4e9371c462e4807aa53b477b495b.png]: /images/20220829/63efd130414248e4b256e35c87036f12.png
[github]: https://github.com/4zd/spring-tiles
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/bb33aaf8c620403584465bcd8d766e2e.png