編碼的世界 / 優質文選 / 生涯

IDEA中向JSP頁面添加css和js引用路徑的問題


2022年7月07日
-   

現在有一個項目,用到了第三方的js和css插件,需要引用到我們的jsp頁面,項目結構大致如下
如果直接采用下面的方式,將無法引用成功,導致頁面效果無法實現。
<link title="blue" type="text/css" rel="alternate stylesheet" href="/css/common/weui.min.css">
<script type="text/javascript" src="/js/common/jquery-3.2.1.min.js"></script>

這裏原因是/為根路徑,而根路徑默認從WEB-INF這裏開始,所以運營後將無法找到插件資源。那麼更改路徑,通過../呢
<link title="blue" type="text/css" rel="alternate stylesheet" href="/../css/common/weui.min.css">
<script type="text/javascript" src="/../js/common/jquery-3.2.1.min.js"></script>

上面的方式,期望通過/..追溯到webapp路徑後,再向下查找文件路徑,實際上也是不可行的,編譯器也會提示找不到
不過這裏的思路到是對的,通過找到webapp根路徑,在myeclipce項目中就是webRoot根路徑來實現,那麼怎麼找到此路徑呢,兩種方式:
1.通過${pageContext.request.contextPath}  可以獲得當前項目的路徑,然後就只需要在後面加上引入的靜態文件的文件路徑即可。
<link title="blue" type="text/css" rel="alternate stylesheet" href="${pageContext.request.contextPath}/css/common/weui.min.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-3.2.1.min.js"></script>

2.通過src="<c:url value="路徑"/>"的方式來實現,這樣也是默認基於項目根路徑的路徑。它會提示添加頭引用,<%@ taglib prefix="c" uri="http://www.springframework.org/tags" %>
<link title="blue" type="text/css" rel="alternate stylesheet" href="<c:url value="/css/common/weui.min.css"/>">
<script type="text/javascript" src="<c:url value="/js/common/jquery-3.2.1.min.js"/>"></script>

3.通過./當前目錄的方式來實現,這裏的當前目錄會被理解為項目目錄,也是資源根路徑webapp的路徑。但需要注意的是,這種方式在微網頁中會引發錯誤,因為它是找當前域下的項目目錄。
<link title="default" type="text/css" rel="stylesheet" href="./css/common/weui.min.css">
<script type="text/javascript" src="./js/common/jquery-3.2.1.min.js"></script>

至此,完成要求,打開瀏覽器查看源碼,可以看到路徑會自動加上項目名稱,網頁效果顯示正常,表示引用成功了。

熱門文章