如何實現一個前後端實時更新的進度條功能
阿新 • • 發佈:2020-12-10
3.HTTP協議
1)HTTP
超文字傳輸協議(HyperText Transfer Protocol,HTTP)規定了如何從網站伺服器傳輸超文字到本地瀏覽器,它基於客戶端伺服器架構工作,是客戶端(使用者)和伺服器端(網站)請求和應答的標準。
2)報文
在HTTP請求和響應的過程中傳遞的資料塊就叫報文,包括要傳送的資料和一些附加資訊,並且要遵守規定好的格式。
檢視報文資訊:右鍵網頁審查元素→控制檯 ' Network ' →重新整理瀏覽器→ ' Name ' 、' Headers ' 、中可檢視
3)請求報文
① 請求方式(Request Method): Ⅰ. GET 請求資料(表單預設行為) Ⅱ.POST 傳送資料 ② 請求方式 req.method :用來檢視是哪種請求方式 ③ 請求地址 req.url:獲取請求地址,可以根據客戶端輸入的地址在服務端做出響應 ④ 請求報文資訊 req.headers[' 某個資訊']:獲取對應請求報文資訊,沒有 ' [ ] ' 獲取的是全部報文資訊
圖解:
4)響應報文
Ⅰ. HTTP狀態碼:
① 200 請求成功
② 404 請求的資源沒有被找到
③ 500 伺服器端錯誤
④ 400 客戶端請求有語法錯誤
Ⅱ. 內容型別:
① text/html
② text/css
③ application/javascript
④ text/plain
⑤ image/jpeg
⑥ application/json
Ⅲ. res.writeHead(狀態碼,{響應報文資訊}):
修改狀態碼;報文資訊 content-type 為內容型別,charset=utf8 後防止亂碼,可寫中文了
圖解 :
5)請求引數
Ⅰ. GET請求引數
引數被放置在瀏覽器位址列中,例如:http://localhost:3000/?name=zhangsan&age=20(?表示後面是請求的引數,就是額外攜帶的資料;這些額外攜帶的引數是以 = 號分隔的鍵值對;它們以 & 符號隔開多個引數) ② 使用 req.url 獲取額外攜帶資料 ③ 引入用於處理url地址的 url內建模組 ④ 並使用url模組的parse方法,解析成返回一個物件的url資訊:url.parse(req.url,true) ④ PowerShell中得到query物件,url.parse(req.url,true).query ④ 又因為下面的判斷語句需要用到 ' pathname ' 這個屬性,則需要使用物件的解構函式:let { query,pathname } = url.parse( req.url,true ) ④ 而之後的 req.url 可以用 pathname 代替
圖解:
Ⅱ. POST請求引數
① 設定表單名name
② 請求引數在請求報文中,開啟控制檯檢視
③ post事件是通過事件的方式接收的,有 ' data ' 和 ' end ' 兩個事件
④ 由於 post 傳遞過來的引數很多,所以需要宣告一個空變數用來拼接這些引數
⑤ params 表示當前傳遞過來的引數
⑥ 使用 querystring 系統模組的 parse 方法將引數轉換為物件格式
圖解:
Ⅲ. 路由
路由是指客戶端請求地址與伺服器端程式程式碼的對應關係。簡單的說,就是請求什麼響應什麼。
-
步驟:
1、引入系統模組 http 2、建立網站伺服器 3、為網站伺服器物件新增請求事件 (1) 獲取客戶端請求方式 req.method 返回的是大寫的方法,要用 toLowerCase() 方法轉換成小寫 (2)獲取客戶端請求地址 url 有個 parse解析方法,解析 req.url 為物件,物件中有 pathname 的屬性 放著地址 (3)判斷請求方式和請求地址 end 中為 中文,需要設定報文內容型別和防亂碼 4、監聽埠 5、給伺服器提示表執行成功
圖解:
Ⅳ. 靜態資源
伺服器端不需要處理,可以直接響應給客戶端的資源就是靜態資源,例如CSS、JavaScript、image檔案。
-
具體見static檔案目錄的app.js檔案。
-
步驟:
*新建 static檔案目錄,在裡面新建public資料夾用於放置靜態資源 *static檔案下建立js檔案開始編寫程式碼 1、建立網站伺服器 2、獲取使用者的請求路徑 3、把使用者的請求路徑轉換成真實的物理路徑(實際的伺服器硬碟路徑) 由於不同系統分隔符不一樣需要用到 路徑拼接 ① 先找到當前檔案(app.js)的絕對路徑,__dirname獲取當前檔案所在絕對路徑 ② 再拼接上所有靜態資原始檔的目錄,最後拼接上使用者輸入的請求地址 ③ 使用系統模組 path 的 join 方法,它可以幫我們拼接路徑的分隔符 4、讀取路徑 需要先引入 fs 系統模組,再使用 它的 readFile 方法 5、設定當用戶請求路徑為 ' / ',即使用者沒有輸入地址時返回仍為首頁 6、讀取路徑程式碼中設定響應內容型別 響應時,頁面請求外連線檔案,例如css的link引用、js的src引用等 mime 第三方模組可以根據當前的請求路徑分析出所需的資源型別,然後返回資源型別 ① 到命令列下載 mime模組, 然後重新執行 app.js 開啟伺服器 ② 引入mime模組並使用 mime 的 getType 方法獲取型別