伺服器概念

lin_fightin發表於2020-09-28

基本概念
IP地址找到伺服器,而域名是比較容易記的,但在用的時候實際也是轉換為IP地址。
埠:伺服器就好比食堂,埠就好比食堂買菜的堂口,每個埠有自己各自的功能,有的埠是用來下載的,有的埠是用來查詢的。
URL:傳輸協議://伺服器/IP:埠//資源所在位置標識
如 http://www.itcast.cn/
每個電腦可以是一個伺服器和一個客戶端。
本機域名:localhost
IP:127.0.0.1
建立web伺服器
在這裡插入圖片描述
在這裡插入圖片描述

在這裡插入圖片描述
然後在瀏覽器上輸入localhost:3000
在這裡插入圖片描述

建立web伺服器步驟()
1 引入http模組
2 通過http.createSerever()建立伺服器
3 當客戶端有請求的時候做出響應。req是請求事件,可以做很多事,如req.url可以查詢客戶端的地址,req.method可以獲得請求的方式,res是響應事件,res.end()就是響應了反映在頁面上的內容。
4監聽
客戶端通過請求報文->伺服器端,伺服器端通過響應報文->客戶端
請求報文:
1請求方式:get 請求 post 傳送
2獲取請求方式 req.method
3獲取地址 req.url
響應報文

在這裡插入圖片描述
響應報文中有很多型別,有一些可能會出現亂碼,如
在這裡插入圖片描述

響應大家好,但結果是,而且h2標籤直接被顯示出來了

在這裡插入圖片描述

解決辦法:
新增res的一個方法,writeHeader
res.writeHead(200, {
‘content-type’: 'text/html;charset=utf8 ’
})
第一個引數 200是成功,404是未找到等等,第二個引數代表什麼樣的型別。如圖在這裡插入圖片描述
在這裡插入圖片描述
問題就被解決了。
如何獲得請求引數呢,在這裡插入圖片描述
當我們輸入這個地址後,按道理伺服器端是收到了請求,如圖在這裡插入圖片描述
但我們如何獲取呢?
用req.url試試,
在這裡插入圖片描述

在這裡插入圖片描述
這樣對我們來說並不好利用,所以我們將他轉化為物件,此時需要引進一個新模組url,在這裡插入圖片描述
url的parse方法可以將其轉換為物件新形式,如圖
在這裡插入圖片描述
在這裡插入圖片描述
,返回的是一個物件,所以可以利用物件名.屬性的方法來呼叫,如圖在這裡插入圖片描述
在這裡插入圖片描述
這樣就獲取到引數了。
在輸入地址的時候,我們可能會訪問不同的網頁。
如http://localhost:3000/list
http://localhost:3000/html
http://localhost:3000

轉到不同的介面,我們需要做出判斷,首先得獲取是Index還是list等等,在剛才的parse中,發現,在這裡插入圖片描述
所以我們可以通過xx.pathname來獲取,如圖在這裡插入圖片描述
當我們不輸入Index或者List等時,也希望他是主介面,所以,
在這裡插入圖片描述
我們就可以通過判斷pathname是哪個介面故跳轉到哪個介面。在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

POST請求引數
POST中是通過事件的方式來接受的,有兩個事件,data事件是在引數傳遞時觸發,而end則是引數完成時觸發。
在這裡插入圖片描述

在這裡插入圖片描述
首先我們建立一個from的html如圖在這裡插入圖片描述
在這裡插入圖片描述
當我們提交賬號和密碼的時候,伺服器端是收得到的,那我們怎麼獲取呢?這時候要引入一個新模組,querystring,
在這裡插入圖片描述
他的作用跟url相似,將字串轉換成物件。
引數是在每次請求事件觸發時傳輸的。
而且要獲得引數只能用data和end.
此時要用到data和end
如圖
在這裡插入圖片描述
結果,在這裡插入圖片描述
字串成功的裝化成物件。所以可以呼叫了
在這裡插入圖片描述
在這裡插入圖片描述
呼叫成功。

路由

在這裡插入圖片描述
路由中,獲取地址
let pathname=url.parse(req.url,true).pathname;
pathname=pathname==’/’?’/index’:pathname;
在這裡插入圖片描述
效果跟上面介紹url模組差不多。
路由的資源有靜態資源,動態資源。
用相同的請求地址訪問不同的響應資源。
1 獲取請求路徑pathname
2 用__dirname獲取目錄路勁,通過path.join拼接起來
3 讀取
中間的public是因為當前檔案在public中。
在這裡插入圖片描述
在這裡插入圖片描述
實際上,在我們每次訪問一個頁面是,如果這個頁面有引入其他的檔案如css,js這些,他也會將其地址拿過來然後訪問。如
在這裡插入圖片描述
訪問了第一個結果需要訪問下面那些,那次是如果我們的res.writeHead只是用text/html就可能會出錯,所以得藉助另一個模組,mime,在這裡插入圖片描述
獲取各個檔案的型別
在這裡插入圖片描述
接著在 res.writeHead(200, {
‘content-type’:type
}
填上type,如圖
在這裡插入圖片描述
這樣伺服器才可以正常訪問其他的css,js檔案,也可以正常執行。
在這裡插入圖片描述
在這裡插入圖片描述
一些圖片檔案因為中文名字問題顯示不出來。

相關文章