Spring MVC 之使用 Apache Tiles

字数1,259 大约花费6分钟

目录

  1. 1. 定义 Tiles 视图解析器
  2. 2. tiles 定义
  3. 3. 渲染页面

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

定义 Tiles 视图解析器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 的内容就会比较清楚了。

渲染页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ 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:

1
2
3
4
5
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


<a href="/">首页 </a>
<a href="/about"> 关于谈谈 IT</a>

footer.jsp:

1
2
3
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

Copyright &copy; 谈谈 IT

home.jsp:

1
2
3
4
<%@ 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:

1
2
3
4
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<h1>关于谈谈 IT</h1>
<p>谈谈 IT,是一个专注于计算机技术、互联网、搜索引擎、SEO、优秀软件、网站架设与运营的原创 IT 科技博客。</p>

首页渲染效果如下:

首页渲染效果

关于页面渲染效果如下:

关于页面渲染效果

样式略丑,多包涵。

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

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/spring-apache-tiles/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章