前端開發學習準備-XAMPP安裝

簡單的網頁基本上可以直接透過瀏覽器開啟來看效果,一般而言,學習前端開發的過程中,最好還是有個伺服器環境比較好,你可以選擇安裝Node.js之類的新玩意兒,或是選擇其它歷史比較悠久的伺服器產品,XAMPP就是一個不錯的選擇。這是一個集成Apache+PHP的開發環境,同時包含了Apache + MariaDB + PHP + Perl,非常容易安裝,很適合作為測試之用。

下載網址:https://www.apachefriends.org/zh_tw/download.html

至官方下載網頁將其下載並且完成安裝之後,開啟如下的控制台設定畫面:


在Module分類找到其中第一項Apache,按下Start按鈕啟動伺服器即可。


此時,Start按鈕變成Stop,表示啟動完成,緊接著開啟覽器,於其中輸入 http://localhost,出現如下的畫面:


當這個畫面出現之後,表示你的Apache伺服器已經完成設定。回到XAMPP控制台設定畫面,按一下Apache的Config按鈕,展開功能選單。


點擊Apache(httpd.conf),開啟組態檔,這是一個純文字檔,於其中找到DocumentRoot關鍵字設定:


其中反白區域的路徑為伺服器的網頁根目錄,當你在瀏覽器輸入http://localhost出現的網頁,即是導向至這個路徑下的預設檔案呈現的執行結果。

現在建立一個資料夾作為學習前端開發的實作範例儲存位置,例如"D:\Lesson\feweb",然後以這個路徑取代上述的"C:/xampp/htdocs",修改之後記得儲存文字檔。回到XAMPP Control Panel,於Apache模組按下Stop按鈕將伺服器停止,再按一下Start按鈕重新啟動。

接下來測試伺服器設定,於先前建立的資料夾D:\Lesson\feweb裏面,建立一個新的資料夾ch01作為本章範例檔案專屬的儲存位置,於其中配置一個index.html檔案,將其命名為index.html,內容如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>       
        <p  style="font-size:4em;">
            Hello, XAMPP         
        </p>    
    </body>
</html>

現在開啟瀏覽器瀏覽http://localhost/ch01網址,出現以下的畫面:


經過設定之後,url字串 http://localhost會自動對應至D:\Lesson\feweb,然後是ch01資料夾,由於接下來沒有指定檔案,因此會以index.html為這個路徑下的預設檔案,得到以上載圖的結果。

現在我們有了支援範例測試的伺服器環境,當你將html檔案配置於組態檔指定的路徑,並透過localhost網址進行瀏覽,網頁會經由伺服器執行之後再傳送瀏覽器進行解譯,這是一般使用者瀏覽網路時,網頁檔案被執行的過程

沒有留言: