在瓷砖和弹簧 mvc 中加载资源答案

【问题标题】：loading resources in tiles & spring mvc在瓷砖和弹簧 mvc 中加载资源
【发布时间】：2013-05-12 12:59:26
【问题描述】：

我正在使用带有通配符定义的 spring mvc 3 和 tiles 2。我想在我的一些图块中加载额外的 css 和 javascript 文件。有没有办法做到这一点？最好在 tile jsp 文件中，而不是在 tiles-definitions.xml 中。

【问题讨论】：

标签： spring-mvc tiles

【解决方案1】：

这就是我对 Spring 所做的，其余的就像发布的四元数一样。

/WEB-INF/template/head.jsp

<tiles:importAttribute name="cssList"/>
<tiles:importAttribute name="jsList"/>
<head>
    <c:forEach var="cssValue" items="${cssList}">
        <link type="text/css" rel="stylesheet" href="<c:url value="${cssValue}"/>" />
    </c:forEach>

    <c:forEach var="jsValue" items="${jsList}">
        <script src="<c:url value="${jsValue}"/>"></script>
    </c:forEach>
</head>

不要忘记在每个页面上指出 tiles.xml

中的正确定义

<tiles:insertDefinition name="definitionName">
    <tiles:putAttribute name="body">
        //content
    </tiles:putAttribute>
</tiles:insertDefinition>

【讨论】：

【解决方案2】：

这是一个很好的问题，因为图块的主要好处之一是它提供的关于构图的中心视图。如果这种集中化也可以包含 CSS 和 JS 文件，那就太好了。

碰巧这是可能的，这里有一个例子。这个例子使用了tiles3，但是它应该很容易适应tiles-2（tiles 3允许你使用多种类型的表达式）你可以绕过这个。

还请注意，我使用 Struts2 作为我的操作框架，这不是问题，但由于我将使用一个工作示例，您将知道“OGNL:”前缀表达式意味着将使用 EL Struts2 使用.您还应该知道，如果您升级到 Tiles-3，您还可以通过在表达式前面加上“MVEL:”来使用 Spring EL。

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="default" template="/WEB-INF/template/template.jsp">
        <put-list-attribute name="cssList" cascade="true">
            <add-attribute value="/style/cssreset-min.css" />
            <add-attribute value="/style/cssfonts-min.css" />
            <add-attribute value="/style/cssbase-min.css" />  
            <add-attribute value="/style/grids-min.css" />
            <add-attribute value="/script/jquery-ui-1.8.24.custom/css/ui-lightness/jquery-ui-1.8.24.custom.css" />
            <add-attribute value="/style/style.css" />
        </put-list-attribute>    
        <put-list-attribute name="jsList" cascade="true">
            <add-attribute value="/script/jquery/1.8.1/jquery.min.js" />
            <add-attribute value="/script/jquery-ui-1.8.24.custom/js/jquery-ui-1.8.24.custom.min.js" />
            <add-attribute value="/script/jquery.sort.js" />
            <add-attribute value="/script/custom/jquery-serialize.js" />
        </put-list-attribute>   
        <put-attribute name="title" value="defaults-name" cascade="true"  type="string"/>
        <put-attribute name="head" value="/WEB-INF/template/head.jsp"/>
        <put-attribute name="header" value="/WEB-INF/template/header.jsp"/>
        <put-attribute name="body" value="/WEB-INF/template/body.jsp"/>
        <put-attribute name="footer" value="/WEB-INF/template/footer.jsp"/>
    </definition>

    <definition name="REGEXP:\/recruiter#candidate-input\.(.*)"  extends="default">
        <put-list-attribute name="cssList" cascade="true" inherit="true">
            <add-attribute value="/style/recruiter/candidate-input.css" />
        </put-list-attribute>
        <put-list-attribute name="jsList" cascade="true" inherit="true">
            <add-attribute value="/script/widgets/resume/resume.js" />
        </put-list-attribute>
        <put-attribute name="body" value="/WEB-INF/content/recruiter/candidate-input.jsp"/>
    </definition>

    <definition name="REGEXP:(.*)#(.*)"  extends="default">
        <put-attribute name="title" cascade="true" expression="OGNL:@com.opensymphony.xwork2.ActionContext@getContext().name"/>
        <put-attribute name="body" value="/WEB-INF/content{1}/{2}"/>
    </definition>   
</tiles-definitions>

/WEB-INF/template/template.jsp

<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
    <tiles:insertAttribute name="head"/>
    <body>
        <%--  website header --%>
        <div id="wrapper">
            <div id="content">
                <tiles:insertAttribute name="header"/>
                <tiles:insertAttribute name="body"/>
                <div class ="outer content">
                    <tiles:insertAttribute name="footer"/>
                </div>
            </div>
        </div>
    </body>
</html>

这是将 CSS 文件和 JS 文件列表放入 head tile 的重要部分：

/WEB-INF/template/head.jsp

<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<tiles:importAttribute name="cssList"/><tiles:importAttribute name="jsList"/>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <s:iterator value="#attr.cssList" var="cssValue">
        <link href="<s:url value="%{cssValue}"/>" rel="stylesheet" type="text/css">
    </s:iterator>
    <s:iterator value="#attr.jsList" var="jsValue">
        <script src="<s:url value="%{jsValue}"/>"></script>
    </s:iterator>
    <title><tiles:insertAttribute name="title" defaultValue="no title"/></title>
</head>

我想你可以弄清楚其余的。对最后一个块中的<s:iterator> 标记感到抱歉，我不确定 Spring 等效项，也不会倾向于测试它。但是，如果您将其翻译为 Spring，那么您可以在这里自行回答。我很乐意投票。

【讨论】：

感谢您的详细回答。所以这样做的方法是从通配符中删除特殊页面并将其放入自己的定义中。我希望有一个可以在 body 中使用的 tiles 标签，它将资源插入到 head 中。
出于效率原因，它不能存在。您会注意到在大页面加载（连接速度较慢）时数据正在流式传输到页面。这可以防止数据在服务器端缓冲，从而节省资源。如果您想要您解释的交互类型，有两种选择：1）使用sitemesh（您为此功能付费，因为内容是缓冲的）2）我正在考虑的工作：在瓷砖顶部构建一个图层，您将定义数据存储在数据库中的位置。将定义插入数据库时，您可以在拉出图块 defs 时定义所有依赖项...
假设body tile需要3个css文件，2个js文件，那么当从DB中检索到tile定义时，我们可以得到所有需要资源的列表。确实，瓷砖是自上而下渲染的，但如果我们能在渲染开始之前获得所有必需的成分！我们可以通过效率组合（瓦片）获得装饰器（SiteMesh）的好处。
非常感谢。这对 strut2 和 tile 很有帮助。

【解决方案3】：

在 dispatcher-servlet.xml 中提供 mvc 静态资源映射如下：

<!-- static resource mapping for style sheets, etc. -->
    <mvc:resources mapping="/styles/**"  location="/WEB-INF/skins/" />
    <mvc:resources mapping="/scripts/**" location="/WEB-INF/scripts/" />

在您的 tiles-layout.jsp 文件中，您可以通过编写来访问它们

<script type="text/javascript" src="${context}/scripts/jquery-1.7.js></script>
 <link rel="stylesheet" type="text/css" href="${context}/styles/css/superfish.css">

见：mvc:resources

【讨论】：