Spring MVC之使用Apache Tiles

Apache Tiles提供了一种方便的方式管理页面布局,通过定义模板和组件,可以简化页面重复内容的维护。本文介绍了如何在Spring MVC中配置Tiles视图解析器,展示了如何定义tiles模板和页面,以及如何通过Tiles进行页面渲染,实现动态组合页面内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候,一些页面会共用同样的布局,比如相同的头部菜单或者底部内容,可以将重复的内容抽取出来,写在单独的文件里,而每个页面在适当的地方引入这些文件。但是即使这样,也还是显得繁琐,而且一旦布局变化(比如头部的菜单移动到侧边栏),每个文件也都要改。而使用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 &copy; 谈谈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>

首页渲染效果如下:

首页渲染效果

关于页面渲染效果如下:

关于页面渲染效果

样式略丑,多包涵。

我已经将代码放在github上,欢迎下载。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值