在 struts 引用中使用 tiles 模板时，JSP 文件引用外部文件需注意路径问题！

最新推荐文章于 2025-07-13 16:26:38 发布

最新推荐文章于 2025-07-13 16:26:38 发布 · 205 阅读

文章标签：

#JSP #Struts #CSS #Web #XHTML

Miscellaneous 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了使用 Struts Tiles 插件进行模块化网页布局的方法。通过示例展示了如何在 JSP 页面中引入 CSS 和图片资源，并解释了相对路径设置的重要性。

先给出工程的目录结构：

webproject
|
|-css
| |-head.css
| |-body.css
| |-foot.css
|
|-img
| |-head_bg.jpg
| |-body_gb.jpg
|
|-WEB-INF
| |-pages
| |-head.jsp
| |-body1.jsp
| |-body2.jsp
| |-body3.jsp
| |-layout.jsp
| |-foot.jsp
|
|-index1.jsp
|-index2.jsp
|-index3.jsp

其中 layout.jsp 是模板，index1.jsp 、index2.jsp 和 index3.jsp 的代码如下：

index1.jsp 如下-------------------------------------------------

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<tiles:insert page="/WEB-INF/pages/layout.jsp" flush="true">
<tiles:put name="head" value="head.jsp"></tiles:put>
<tiles:put name="body" value="body1.jsp"></tiles:put>
<tiles:put name="foot" value="foot.jsp"></tiles:put>
</tiles:insert>

index2.jsp 如下-------------------------------------------------

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<tiles:insert page="/WEB-INF/pages/layout.jsp" flush="true">
<tiles:put name="head" value="head.jsp"></tiles:put>
<tiles:put name="body" value="body2.jsp"></tiles:put>
<tiles:put name="foot" value="foot.jsp"></tiles:put>
</tiles:insert>

index2.jsp 如下-------------------------------------------------

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<tiles:insert page="/WEB-INF/pages/layout.jsp" flush="true">
<tiles:put name="head" value="head.jsp"></tiles:put>
<tiles:put name="body" value="body3.jsp"></tiles:put>
<tiles:put name="foot" value="foot.jsp"></tiles:put>
</tiles:insert>

下面给出 layout.jsp 和 head.jsp 的源码

layout.jsp -----------------------------------------
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>head.jsp</title>
</head>
<body>
<tiles:insert attribute="head"></tiles:insert>
<tiles:insert attribute="body"></tiles:insert>
<tiles:insert attribute="foot"></tiles:insert>

</body>
</html>

head.jsp ---------------------------------------------------------

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>head.jsp</title>
<link [b]href="css/header.css"[/b][color=red][/color] rel="stylesheet" type="text/css" />
</head>

<body>
[b]<img src="img/head_bg.gif"/>[/b][color=red][/color]
<div class="head">
<ul>
<li><a href="#">##</a></li>
<li><a href="#">##</a></li>
<li><a href="#">##</a></li>
<li><a href="#">##</a></li>
</ul>
</div>
</body>
</html>

我们注意到，在上面的两个路径中，如果相对于当前的 head.jsp 文件，那么 CSS 的link 路径应该为：
<link [b]href="../../css/header.css"[/b][color=blue][/color] rel="stylesheet" type="text/css" />

同样，引用背景图片的路径也应该为：
[b]<img src="../../img/head_bg.gif"/>[/b][color=blue][/color]

但是，这样是错的！
当工程运行的时，用户请求 index1.jsp 时，用 tiles:insert 来的 head.jsp 将找不到它想引用的 CSS 和背景图片。
因为当用户请求 index1.jsp 时，这时 URL 地址是：[color=red]http://localhost:8080/webproject/[/color]( 在WEB.XML 中配了 index1.jsp 为 welcome-file)
而此时 head.jsp 的路径也在此（试验出来，没完全确定），故此时 head.jsp 引用的 CSS 和背景图片路径应该从此路径开始。所以 head.jsp 引用它们的路径分别应该为:
<link [b]href="css/header.css"[/b][color=red][/color] rel="stylesheet" type="text/css" />
和
[b]<img src="img/head_bg.gif"/>[/b][color=red][/color]

不知是否如此，望高人指正！