web開發中目錄路徑問題的解決


  web開發當中,目錄路徑的書寫是再常用不過了,一般情況下不會出什么問題,但是有些時候出現了問題卻一直感到奇怪,所以這里記錄一下,徹底解決web開發中路徑的問題,開發分為前端和服務端,那么就從這兩個方面來分析,想要解決這個問題,首先應該熟練理解Linux系統和Windows系統的路徑概念,以及絕對路徑和相對路徑的概念,這些就不多說了,其實web應用就和我們操作命令行一樣,去進出一些目錄,因此理解了應用的運行原理,路徑就不在感覺那么亂了,下面看一下:

  首先是服務端,以php為例,舉一個最基本的例子,假如我在本地服務器根目錄下建立一個目錄,名稱為ceshi,然后在目錄下建立php應用index.php,那么我們運行該應用要訪問:http://localhost/ceshi或者http://localhost/ceshi/index.php其實這樣是一樣的,不同的是服務器返回給瀏覽器的東西,導致瀏覽器顯示的路徑不太一樣,那么index.php運行的目錄就是應用的當前目錄,當然就是ceshi目錄下,這是當前目錄,那么現在包含一個文件,和index.php相同目錄下,也就是測試目錄下,有一個目錄include,目錄下有一個文件inc.php、還有一張圖片123.jpg,我們首先包含inc.php那么我們使用相對路徑就是./include/inc.php或者include/inc.php這樣包含過來了,沒任何問題,這時候inc.php的功能是顯示圖片123.jpg這其實屬於前端的,為了方便理解,還是放這了,如果inc.php顯示圖片,那么再簡單不過了,直接輸出<img src="123.jpg" />就可以了,但是包含文件的本質是相當於把被包含文件內容原封不動的復制到原文件當中,就是說當程序運行的時候,所有代碼都是跑在index.php當中,這樣,調用圖片很顯然應該是原文件的相對路徑,應該寫成<img src="./include/123.jpg" />這樣就沒問題了,另外包括解壓文件的類的路徑也應該嚴格按照這個思維來寫,就不會出錯,認准當前運行的程序和當前路徑的概念。

  如果我們用絕對路徑去包含文件怎么包含呢?絕對路徑不就是相對於根目錄嗎,於是會寫/ceshi/include/inc.php,結果運行報錯,所以關於絕對路徑我們不應該相對於服務器根目錄,而是操作系統根目錄,Linux是系統根目錄,Windows就是當前驅動器的根目錄,也就是磁盤根目錄,因為php雖然是web應用,但是在本地服務器也是一款本地應用,服務器是建立在操作系統之上的,所以本地應用所能達到的訪問空間和操作系統等同,除非設置了權限,我的服務器根目錄是E:\Webapps那么調用應該寫成/Webapps/ceshi/include/inc.php這樣才可以,這也是服務端和客戶端的不同。

  另外我們用框架開發比如ThinkPHP,開啟pathinfo模式后瀏覽器訪問url會是這樣http://localhost/abc/abc/abc這種情況,如果我們此時包含inc.php該怎么包含?當然絕對路徑不變,那么相對路徑呢,因為表面上看,路徑運行了好幾層,實際上入口文件還是index.php也就是說此時程序運行在入口文件處、也就是服務器根目錄下,那么調用inc.php就很簡單了,是:./ceshi/include/inc.php,我們不管包含多少文件,最后都運行在當前程序下,按照這個原理就可以了,包含文件不會出錯,但是我們要調用圖片呢,我們都是通過輸出語句輸出標簽,標簽是在瀏覽器端被解析的,瀏覽器訪問的最大范圍是默認就是服務器根目錄,所以瀏覽器是按照url表面顯示的路由來解析文件,瀏覽器不知道入口文件,在瀏覽器看來/abc/abc/abc是一個分層的,所以直接寫./ceshi/include/123.jpg是無法顯示文件的,相對路徑應該寫../../ceshi/include/123.jpg這樣就顯示了,但是用參數模式還可以這樣訪問http://localhost/abc?m=abc&a=abc這樣瀏覽器認為目前是根目錄下,當然../../直接在瀏覽器端是出不去的,這是特殊情況,但是其他情況會出問題,所以為了保證通用,一般用絕對路徑,就是/ceshi/include/123.jpg這樣任何時候都可以放心調用了,以上這些本質就是服務器端看當前目錄,瀏覽器端只根據url的表面顯示去尋找,並且不會超過根目錄之外。只要不是顯示輸出在前端,那么都根據服務端規則來處理,比如上傳文件,解壓文件等等服務端操作,都是按照程序運行目錄來算,只有一些資源文件顯示在前端,就按瀏覽器的方式處理。

  另外看一下前端,前端都是瀏覽器從服務器請求的,瀏覽器都是根據URL的情況來請求文件,按照這個就沒問題,比如剛才的圖片輸出問題,如果寫./ceshi/include/123.jpg當前訪問路徑是/abc/abc/abc那么瀏覽器請求路徑就是/abc/abc/ceshi/include/123.jpg很明顯會出問題,這個就是最基本的規則,另外再看HTML頁面,這個就簡單了,HTML頁面是被瀏覽器解析,也就是服務器將HTML文件拆分開來發送到瀏覽器瀏覽器逐步解析、渲染,最后呈現頁面,那么調用的所有文件都是根據當前html文件的相對路徑,或者直接寫文件的真實的相對服務器根目錄的絕對路徑也沒有問題。

  前端另外還有js和css,我們來看一下,如果在頁面的頂部寫上一段代碼來為body添加背景,這個很簡單使用相對路徑調用背景文件即可:

1     <style type="text/css">
2     body{
3         background-image:url(include/123.jpg);
4         background-repeat: repeat-y; 
5     }
6     </style>

 

這樣運行肯定沒有任何問題,當前目錄下的include/123.jpg正確調用,但是我們想把css單獨放在一個文件里然后用<link>標簽引用會怎么樣呢,引用當然沒問題,而css文件里的資源似乎有點問題,我們在當前目錄下建一個css目錄把代碼原封不動的放進去,我們只需要一句<link rel="stylesheet" type="text/css" href="css/style.css" />便可以引用了,結果發現沒有效果,所以css里的所有資源路徑,應該是相對於css文件的路徑才可以,所以可以寫成../include/123.jpg或者干脆/ceshi/include/123.jpg都沒問題,就是說瀏覽器請求的時候是分開請求的,css並不是像包含文件一樣直接放到執行文件下,而是被瀏覽器單獨解析,顯然,圖片調用應該是相對於css文件的路徑。

  那么JavaScript呢,我們首先寫個標簽加入一張圖片,<img src="include/123.jpg" id="img" />沒有任何問題,然后我們在下面寫上一句最簡單的JavaScript代碼來操作一下圖片,

1     <script type="text/javascript">
2     document.getElementById('img').src='include/class.jpg';
3     </script>

現在刷新頁面,圖片顯示的不是123.jpg而是class.jpg了,並且這段代碼只能放到<img>標簽之后,原因很簡單瀏覽器是按順序解析的,如果放到前面,運行js時會找不到id后來解析的時候會重新加載img標簽,所以不生效,因此我們只能放在圖片之后,可以是</body>上一行,也可以是</body>和</html>之間,甚至</html>之后都是可以的,原理就是這樣。

  那么現在把這一行js代碼放到當前目錄下的js/script.js然后html中用<script type="text/javascript" src="js/script.js"></script>這行代碼即可引入,這個沒問題,注意這行代碼的位置規則應和上面的<script>標簽的代碼段位置符合一樣的規則,因為瀏覽器總是這樣解析的,現在刷新頁面,沒有任何問題,123.jpg被修改成class.jpg,於是我么會有疑問為什么不用和css一樣../include/class.jpg這樣寫呢,並且我們這樣寫,瀏覽器會出現錯誤,請求不到,原因就是,通過<script>引用的js瀏覽器會把他放在當前頁面環境中運行,和當前網頁代碼運行一樣,所以這個和后端include文件是一樣的,是包含在當前執行,不光js是這樣,jQuery等前端js庫也是一樣,另外資源圖片等我們用絕對路徑和css是一樣的,因為瀏覽器請求絕對路徑都是不變的,對於js來說,頁面加載是按順序來的,但是加載完之后,執行一些方法,這些方法可以放置在<head><body>甚至文檔之外的任何位置,此時是在當前頁面執行一些事件 ,這個一定要區分開,本質上還是看瀏覽器的請求原理,所有的就明白了。

  另外iframe、embed、<video>等標簽都沒什么好說的了,簡單一分析就明白了,都是相對於當前路徑或者是絕對路徑,<iframe>不管怎么用都是不影響的,因為它總是運行在其他頁面,本頁面只負責拉過來顯示就是了

  以上就是對web開發的路徑總結,只要按基本的情況分析,基本上再復雜的路徑問題都可以解決

  總結一下:

  1、服務端,所有服務端邏輯操作按照當前程序運行的目錄為當前目錄操作,資源輸出按照瀏覽器請求的url為當前目錄確定相對路徑或者絕對路徑

  2、前端,html中所有資源引用都是相對於瀏覽器解析的當前html文件的相對路徑或者相對於服務器根目錄的絕對路徑,css文件中的資源路徑是相對於當前瀏覽器解析的css文件的路徑來尋找,JavaScript中的資源文件路徑,會被瀏覽器放在引用js的原html文件中解析,是當前運行的html文件的相對路徑或者絕對路徑,不管是css還是JavaScript絕對路徑都是不變的,都是按照瀏覽器請求的服務器的根目錄

就是這些,另外知道以下兩個原理:

  1、服務端應用的目錄作用范圍是當前操作系統的根目錄,當然虛擬主機除外,根目錄被權限限制了。瀏覽器前端的目錄作用范圍是訪問服務器的根目錄或者域名解析到的根目錄

  2、瀏覽器渲染html文件跟執行順序程序一樣,是分開請求,分步渲染的,對於瀏覽器加載就要執行的時間,一定要注意順序,但是方法是在html加載完之后,根據需要觸發事件,這個順序無所謂,因為瀏覽器已經全部加載到本地了。

以上就是web開發路徑問題的解決方法了,說的比較亂,原理就那么一點,其實搞定web開發中的路徑問題,就是那么簡單!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM