全端筆記

留下學習的痕跡

0%

AC學期2-3:如何利用Node.js及Express框架打造伺服器及靜態網頁(一)

發表於 更新於 分類於 Disqus：

[AC學期2-3]利用Node.js及Express框架打造伺服器及靜態網頁(一)

⭐ 學習建議

在學習 Express 框架及打造伺服器之前，我們必須要先了解網際網路傳輸原理，這樣在學習框架上，就會知道為何要設定這些東西，學習上也會更如魚得水唷!
但這裡會偏向實作也會簡述原理，若要更深入可以在網路上或透過最下方參考資料查詢更多。

💻 用戶端與伺服器端的 HTTP 傳輸協定

1️⃣ 什麼是 HTTP ?

我們人跟人之間溝通會跟對方用聽得懂的語言做溝通，同樣地電腦設備也是，而電腦設備間溝通的語言就叫 HTTP。

📚 HTTP 簡介

  • 也稱作超文本傳輸協定，英文為HyperText Transfer Protocol
  • 電腦設備間互相索取文件的溝通語言

簡單來說，用戶端(client)跟伺服器端(server)請求文件，或是伺服器端(server)給予用戶端(client)相應的回應時，都需要透過 HTTP 來溝通。

2️⃣ HTTP 的組成結構是什麼?

在 HTTP 組成結構學習上要專注於英文的命名，會跟接下來的應用有關唷!

HTTP Request HTTP Response
Request Line(method + URL) Response Status
Request Headers Response Headers
Request Body Response Body

📌 HTTP Request

  • Request Line: 包含Request Method和Request URL，以及 HTTP 版本。

    • Request Method: 常見如下表。

      Method 說明
      GET 讀取資料
      POST 新增資料
      PUT 修改資料(如果沒有該筆資料存在，就會新增資料)
      PATCH 修改資料
      DELETE 刪除資料

    • Request URL: 用戶端請求資源的伺服器網址。

  • Request Headers: 主要是客戶端向伺服器端請求的訊息，且每一行欄位內容由 name: value 成對組成，最常見的 Header 如下:

    • Host: 請求的伺服器主機名稱。
    • Content-Type: 請求內容格式類型，例如純文字檔(text/plain)、HTML 格式(text/html)等等，有興趣的可以網下方參考資料來源查詢。

  • Request Body: 通常是在用戶端以 POST 方式請求時，會把客戶的資訊放在 Request body 裡，提交給指定的 URL。

📌 HTTP Response

  • Response Status: 包含 HTTP 版本、HTTP 狀態碼以及狀態碼描述，狀態碼常見例如 2XX 表示伺服器成功回應，4XX表示用戶端錯誤回應。
  • Response Headers: 主要是伺服器端向客戶端回應的訊息，如 Content-Type 定義回應客戶端的內容格式類型。
  • Response Body: 伺服器端回應給客戶的內容。

📝 總結:
HTTP Request 由四元素組成: URL、Method、Headers、Body
HTTP Respond 由三元素組成: Status code、Headers、Body

3️⃣ URL 的結構長怎樣?

http://www.imamyke.com:3000/categories/?keyword=frontend&sort=asc

URL 結構 說明
Protocol 傳輸協定，不一定是 http 或 https，也有可能是 ssh、ftp、mailto、file
Host 主機名稱，也就是網域名稱
port 通訊埠，通常會隱藏起來
Path 檔案路徑
Parameter 使用 ? 來表示參數的開頭，並用 & 分隔不同的項目， ? 之後的字串稱為 query string，
這個名詞先筆記一下，後面會學習到怎麼使用!
在這裡 keyword 和 sort 表示參數，frontend 和 asc 表示參數的值

✏️ 一起實作吧!用 Node.js 架設伺服器

現在，有了以上的知識就開始將文字轉化為程式碼打造自己的伺服器吧!

順道一提，實際做完之後可以對照著 HTTP 結構去思考為何會這樣建立伺服器唷!

1️⃣ 定義和伺服器有關的變數

🚩 Step1. 載入 Node.js 的 HTTP 模組

首先，當然是要讓我們的伺服器會跟其他電腦設備「說話」，那個溝通語言就是 HTTP !

1
const http = require("http")

載入之後我們把 HTTP 模組存成 http 這個變數，之後就可以利用這個變數來使用 HTTP 模組的方法。

🚩 Step2. 設定伺服器的相關變數

再來，我們要定義伺服器的主機位置，這樣伺服器之間才會知道資料要傳送到哪。

1
2
const hostname = "localhost"
const port = 3000

2️⃣ 設定伺服器處理請求和回應的動作

🚩 Step1. 使用 HTTP 模組方法

1
2
3
const server = http.createServer((req, res) => {
  // 請求和回應的動作都會在這邊
})

💡 重點說明:

  • 使用 HTTP 模組方法: createServer

    1
    http.createServer

  • 變數命名

    請求(Request) 回應(Response)
    req res

🚩 Step2. 設定回應的 HTTP 狀態碼 (status code) 和內容格式類型 (Content-Type)

還記得 Response headers 會設定內容格式嗎? 有沒有覺得函式的命名非常語意化 😇

1
2
3
4
const server = http.createServer((req, res) => {
  res.statusCode = 200 // 新增這裡
  res.setHeader("Content-Type", "text/plain") // 新增這裡
});

💡 重點說明:

  • 使用 HTTP 模組方法: setHeader

    1
    res.setHeader("Header欄位名", "Header欄位值");

  • 狀態碼: statusCode

    1
    res.statusCode = 回應狀態碼

🚩 Step3. 伺服器端回應給客戶的內容

1
2
3
4
5
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end(`This is my first server`) // 新增這裡
});

💡 重點說明:

  • 使用 HTTP 模組方法: end
    1
    res.end("依照Content-Type的格式回應內容")
  • 如何回傳 HTML?
    這邊我們回應的 Content-Type 是使用純文字 text/plain 表示。
    如果要回傳成 HTML，我們可以這樣改寫 ⬇️
    1
    2
    res.setHeader("Content-Type", "text/html")
    res.end(`<h1>This is my first server</h1>`) // 使用模板字串唷!

3️⃣ 啟動並監聽(listen)伺服器

1
2
3
server.listen(port, hostname, () => {
  console.log(`The server is listening on http://${hostname}:${port}`)
})

成功啟動後，可以在終端機看到 The server is listening on http://localhost:3000，接下來就可以打開瀏覽器輸入 http://localhost:3000，就看到伺服器回應我們的內容 This is my first server !!!

💡 重點說明:

  • 使用 HTTP 模組方法: server.listen
    1
    2
    3
    server.listen(port, hostname, () => {
      // 匿名函式
    })

🎉🎉🎉耶!恭喜成功完成你的第一個伺服器，我們帶著這些觀念去挑戰和學習 Express 框架吧!💗

🔎 參考資料來源

📌 ALPHA Camp: https://lighthouse.alphacamp.co/

📌 Content-type: https://www.runoob.com/http/http-content-type.html

📌 HTTP: https://zapier.com/learn/apis/chapter-2-protocols/

📌 Node.js: https://nodejs.org/api/http.html