• struts2下,jsp视图页面中CSS和javascript引用相对路径和绝对路径问题。


    在Struts2的实际使用中,经常会在jsp视图页面中引入CSS和javascript,这就涉及到引用路径问题。路径有两种,一种是相对路径,另一种是绝对路径。我们分别来说说在Struts2的页面视图中他们的影响。

    1、相对路径

    相对路径的引用格式如下:        

    <script src="resources/scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>

    注意在这里,最开始的路径前面直接跟文件夹路径,没有“/”,这是HTML中相对路径的引用方法,在普通HTML静态页面的服务器环境中,指的是相对于当前HTML文件的路径。

    但是,在Struts2的服务器环境下,这个相对路径却被解释为相对于该struts2部署项目根目录的路径。

    2、绝对路径

    绝对路径的引用格式如下:      

    <script src="/resources/scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>

    绝对路径在最前面有一个“/”,这是HTML中绝对路径的引用方法,在普通HTML静态页面的服务器环境中,指的是相对于改部署项目的根目录(一般是Web服务器如Apache或Tomcat的配置文件中WebRoot)的路径。

    但是,在Struts2的服务器环境下,直接被解释为服务器的顶级目录。

    需要注意的是,不管相对路径还是绝对路径,都与你当前包含“<script src="/resources/scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>”的jsp页面文件的路径无关!这与普通服务器环境下静态HTML文件的相对、绝对路径是不同的。

    举个例子大家就能够更简单的理解以上两种情况

    例如我现在使用Eclipse创建了一个名为Struts的Web项目。而我现在使用的jsp页面文件是放在Struts项目下的WebRoot/module/gjtj/admin/jsp这个目录下的。我在这个jsp页面中分别进行两个引用:

    <script src="module/gjtj/admin/jsp/resources/scripts/smooth.dialog.js" type="text/javascript"></script>
    <script src="/module/gjtj/admin/jsp/resources/scripts/smooth.autocomplete.js" type="text/javascript"></script>

    则第一个会被服务器解释为如下URL:

    localhost:8080/Struts/module/gjtj/admin/jsp/resources/scripts/smooth.dialog.js

    第二个会被服务器解释为如下URL:

    localhost:8080/module/gjtj/admin/jsp/resources/scripts/smooth.autocomplete.js

    中间差了一个该项目的名称Struts。而且两个被解释的路径都有当前的jsp页面的路径没有任何的关联。

    一点提示Tips:

    如果你想在Struts2的页面视图中使用已有的页面模板或者样式(我这里的例子就是使用的smooth后台管理模板),你需要注意:这些第三方的摸样或者样式中都是使用相对路径进行进行样式和脚本的包含,但是这些在Struts2的环境下却被解释为相对项目名称的路径,会出现样式、脚本路径不正确的问题。建议你最好把这些资源文件放在项目文件下的根目录WebRoot下,这样可以使用所谓的“相对路径”

    resources/scripts/smooth.dialog.js

    即可正确的载入资源文件!

  • 相关阅读:
    【Azure 应用服务】App Service中运行Python 编写的 Jobs,怎么来安装Python包 (pymssql)呢?
    【Azure 存储服务】使用POST方式向Azure Storage Queue中插入Message的办法
    【Azure Developer】使用Azure Resource Graph的查询语法的示例
    img标签到底是行内元素还是块级元素
    [前端面试]前端缓存问题看这篇,让面试官爱上你
    Vue3.0 响应式数据原理:ES6 Proxy
    几行代码教你解决微信生成海报及二维码
    冷门的HTML
    HTML选择器
    程序猿必备 代码保平安
  • 原文地址:https://www.cnblogs.com/hewenwu/p/4216357.html
Copyright © 2020-2023  润新知