Node.js之在服務端啟動網頁(一)
var http = require('http');//建立伺服器的 var fs = require('fs'); //引入進來的是模組,模組中有方法,下一步就是使用方法 //Node.js一個最主要的特點:執行的基本都是函式 //建立服務 var myServer = http.createServer(function(req,res){ //req->請求變數:客戶端請求伺服器的 //res->響應變數:伺服器要給客戶端寫回的變數 //前端頁面應該給客戶端顯示,即寫回去 //這之前應該先把檔案內容讀出來 var html = fs.readFileSync('./view/index.html') res.write(html); //結束寫的操作 res.end(); }) //服務端等著客戶端請求需要做一個監聽。通過建立的服務。 //監聽 myServer.listen('5050',function(err){ if(err){ console.log(err); throw err; } console.log("伺服器已開啟。埠號為:5050"); }) //瀏覽器請求伺服器。知道當前計算機的ip地址。例如,127.0.0.1:3000
程式碼如上。步驟:1.ctrl+shift+n ,啟動node進行啟動5050埠。埠具有唯一性。
2.在瀏覽器 url 中輸入 127.0.0.1:5050 ,進行啟動服務端。這樣就讀出了檔案內容並顯示。
客戶端和服務端是分離的。
伺服器在一臺計算機上,瀏覽器在一臺計算機上。要找到伺服器上的檔案,通過找到計算機IP地址(如127.0.0.1)找到計算機,找到計算機通過埠號(如5050)找到檔案,執行的程式就是5050,程式的內容就是讀取網頁檔案,並且寫到瀏覽器上。
上述程式碼並沒有新增邏輯,只是簡單的程式碼。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
現在呢,讓我們嘗試著新增邏輯進去。如果我們寫這樣,那就要跳轉到info 頁面了。
就上面這個圖,我們在var myServer = http.createServer(function(req,res){}中進行如下嘗試
//我們列印一下,出來的URL資訊應該是info.html
var myurl = req.url;
console.log(myurl);
如果我們只有
那麼打印出來的結果只有 /
下圖是在CMD中執行的結果,第一次有info.html,第二次沒有
所以我們做出下面的優化:
//我們列印一下,出來的URL資訊應該是info.html var myurl = req.url=='/'?'./view/index.html':'./view'+req.url ; // console.log(myurl);
我們這時候應該把讀寫操作放在一起
//我們列印一下,出來的URL資訊應該是info.html
var myurl = req.url=='/'?'./view/index.html':'./view'+req.url ;
//console.log(myurl);
//我們還得判斷檔案是否存在
if(fs.existsSync(myurl)){
var html = fs.readFileSync(myurl)
res.write(html);
}
//結束寫的操作
res.end();
PS:: 如果你按照上述步驟操作,在瀏覽器中開啟的網頁一直是index.html,不過頁面url怎麼重新整理都不變化。
這時候應該關閉vscode,因為我一直在vscode中進行的檢視,而不是cmd。這時候我猜測應該是5050埠被佔用了,程式碼雖然有改動,但是已經被舊程式碼的端口占用了,他更新不上去。所以關閉vscode重新載入code。然後頁面就自動重新整理了。一切正常執行。
你輸入一個不存在的url路由(如/1232.html),這時候他會返回一個空頁面,我們這時候需要進行如下操作。
//我們還得判斷檔案是否存在
if(fs.existsSync(myurl)){
var html = fs.readFileSync(myurl)
res.write(html);
}else{
//建立一個專門放錯誤的檔案,當頁面不存在的時候跳轉過來
var errhtml = fs.readFileSync('./view/err/404err.html');
res.write(errhtml);
}
----------------------------------------------------------------------------------------------------------------------------------------------
這個服務告一段落了,下面一篇文章呢,我們在學習一個服務。Node.js一個服務一個模組。