技術標籤：javascripthtmlhtml5url

容易混淆路徑，和開了本地伺服器後的瀏覽器位址列地址，查了資料後再自己驗證後總結如下
測試檔案所在目錄如下
D:\develop-tools\code\nodeExercise\urlTest\first\second\2-1.html
D盤等太往上的目錄vscode沒顯示，我直接寫出來，以下是截圖

以下為2-1.html中測試的程式碼，結果都寫在各個a標籤上的註釋裡，結尾有總結

    <!-- 分為直接開啟和用localhost伺服器開啟兩種情況 -->

    <!-- 1.直接開啟--可以訪問； 2.localhost開啟--
 
可以訪問 -->
    <a href="2-2.html">沒斜槓</a>

    <!-- 1.直接開啟--可以訪問； 2.localhost開啟--可以訪問 -->
    <a href="./2-2.html">單斜槓前有一點</a>
    
    <!-- 1.直接開啟結果顯示的是電腦的D盤索引，而不是IDE的根目錄，因為2-1.html存在於D盤 -->
    <!-- 2.localhost開啟什麼也不顯示，但是網頁能順利載入，不會一直轉圈圈，因為沒有設定錯誤地址路由的響應
            所以就算我輸入.
 
/2-3.htmlss，都不會顯示出錯
        所以後續加了錯誤顯示，結果是目標檔案不能訪問到 -->
    <a href="/">就只有一個單斜槓，沒有其他路徑</a>

    <!-- 1.直接開啟D盤為根目錄可以訪問  -->
    <!-- 2.localhost開啟，不能訪問，因為已經拼接了絕對路徑，這樣重複了，查詢不到 -->
    <a href="/develop-tools/code/nodeExercise/urlTest/first/second/2-2.html">以D
 
盤為根目錄開始查詢2-2</a>

    <!-- 1.直接開啟--無法訪問；  2.localhost開啟--可以訪問 -->
    <a href="/first/1-1.html">單斜槓，假設以urlTest為根目錄，查詢1-1</a>

    <!-- 1.直接開啟--無法訪問；  2.localhost開啟--無法訪問 -->
    <a href="/nodeExercise/urlTest/first/1-1.html">單斜槓，以IDE最外層為根目錄查詢1-1</a>

    <!-- 1.直接開啟--可以訪問； 2.localhost開啟--可以訪問 -->
    <a href="../1-1.html">兩點加單斜槓</a>

    <!-- 1.直接開啟--可以訪問； 2.localhost開啟--可以訪問 -->
    <a href="../../0-1.html">多次兩點加單斜槓網上級走，查詢0-1</a>


    <!-- 總結 -->

    <!-- localhost:3000或者http://localhost:3000 
        實際上訪問的是以D盤為根目錄的D:\develop-tools\code\nodeExercise\urlTest -->


    <!--
        1.******
        本檔案右鍵直接開啟的話，根目錄是D盤，即檔案所處磁碟，已經不能在往上繼續查詢上一級了

        2.******
        如果用locahost本地伺服器開啟，的話,需要引入一堆模組
        比如http，fs，path，url
        http來建立伺服器，url解析在瀏覽器中輸入的地址
        path.join方法把地址和__dirname拼接成絕對路徑，
        fs再來載入驗證是否能讀取到目標檔案

        所以原理上都是訪問到絕對路徑，只不過自己平時犯糊塗的時候把拼接地址忘記了
        而且絕對路徑都是該檔案下的根磁碟開始的

        在沒有引入express框架，用中介軟體和static方法
        (****  例：app.use(express.static(path.join(__dirname,'xxx')))  ****)
        來重新設定靜態資源根目錄之前(或者其他重置根目錄方法），
        以上測試的一切連結地址，都還是以D盤根目錄為準沒有改變

        理解了就想通了
     -->

     <!-- 後續測試，在開啟本地伺服器情況下，不通過href連結開啟目標檔案
          通過在位址列輸入./能否訪問 
        
          經過拼接後的__dirname是D盤到urlTest所在目錄
          即D:\develop-tools\code\nodeExercise\urlTest
          也是localhost:3000/
          我如果想訪問2-1.html
          輸入./first/second/2-1.html應該可以

          驗證結束，猜想正確，在我輸入http://localhost:3000/./first/second/2-1.html後
          瀏覽器跳轉到了目標檔案，並且位址列自動刪掉了那個.變成了http://localhost:3000/first/second/2-1.html
        -->

以下是開啟伺服器程式碼——>urlTest.js

const http = require('http')
const urltest = http.createServer()
const url = require('url')
const path = require('path')
//讀取檔案
const fs = require('fs')

urltest.on('request',(req,res)=>{

    let realpath= path.join(__dirname,url.parse(req.url).pathname)
    fs.readFile(realpath,(err,result)=>{
        if(err !== null){
            res.end('failed')
            return
        }
        res.end(result)
    })

})
// console.log(url.parse(req.url).pathname);
console.log(__dirname);

urltest.listen(3000)
console.log('啟動成功');

詳細總結寫在第一段程式碼的末尾註釋裡，這裡簡要概括一下，所有路徑本質上都是絕對路徑，只不過開啟伺服器後在位址列裡面基本上沒有輸入./這種情況，都是直接/，localhost其實就是當前開啟伺服器那個js檔案的所在目錄，

以下情況另外考慮
如果重新設定了根目錄，比如art-template模板檔案,有可以設定一個views資料夾來存放模板檔案，方便用，那麼，針對模板檔案的引用，根目錄就變成了views資料夾，但是其他的不變

//告訴express框架模板的位置
app.set('views',path.join(__dirname,'views'))
//告訴express框架模板的預設字尾
app.set('view engine','art')
//當渲染字尾為art的模板時，告訴express用什麼模板引擎
app.engine('art',require('express-art-template'))

又比如放開靜態資源的時候，也可能重新設定根目錄，所以靜態資源也可以相對於從localhost開始稍微簡潔的輸入，而不用每一級都寫，

如下例，當前localhost為blog目錄
如果不設定靜態資源根目錄，訪問1.jpg需要寫localhost/public/home/image/1.jpg
設定過後只需要寫public下的目錄就行，即localhost/home/image/1.jpg

//開放靜態資原始檔,添加了絕對路徑，所以訪問的時候，只需要輸入
//相對本路徑已經是public的路徑就行，比如localhost/home/image/1.jpg
app.use(express.static(path.join(__dirname,'public')))

所以就算重新設定了根目錄，也是針對設定過的模板檔案或者靜態檔案，或者其他專門設定的檔案，他們只是走了個捷徑而已，對於剩下的普通檔案，還是該咋寫咋寫。

本文參考了

https://blog.csdn.net/weixin_41267342/article/details/78750289?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control