iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Modern Web

Node.js 從零開始系列 第 10

Node.js - createServer 核心知識

  • 分享至 

  • xImage
  •  

node

本篇範例會沿用下方程式碼:

var http = require("http");
http
  .createServer(function (request, response) {
    response.writeHead(200, {
      "Content-type": "text/plain",
    });
    response.write("<h1>hello node!</h1>");
    response.end();
  })

關於 request

request 是使用者透過瀏覽器所發出的請求,當請求發出後會透過內建模組 HTTP 裡面的 createServer 方法的 request 去接這個請求。把 request 用 console 印出來看看,並執行 app.js 檔案。

並且輸入下方網址:

127.0.0.1:3030

會發現當我輸入網址後,終端機有跑一下,切過來看會看到滿滿的資訊:

terminal

資訊太長,可以在自己的終端機看

這些都是使用者可以發出的請求給瀏覽器,並且在傳給 request,再看要 response 什麼東西給使用者。

request.url

假設說想看一下目前網址,我把 request.url 印出來:

var http = require("http");
http
  .createServer(function (request, response) {
    console.log(request.url);
    response.writeHead(200, {
      "Content-type": "text/html",
    });
    response.write("<h1>hello node!</h1>");
    response.end(); //記得要加上這段程式才會停止執行
  })
  .listen(3030);

一樣執行 node app.js,然後輸入網址,會發現終端機回傳以下結果:

terminal

可以看到首頁的預設是 /,同時也印出 favicon.ico,也就是網頁標籤左邊的那個小圖示。

favicon

如果在 3030 port 後面加上網址 /hellonode,也會印出剛剛給的網址喔!

url

Network 查看詳細資料

前端工程師很常透過 network 去看串接 API 的結果與相關資訊,所以在網頁上滑鼠點右鍵,在找到檢查,會出現 Chrome 開發人員工具,選到 network,標籤選擇 all,然後重新整理網頁或是在剛剛的網址按下 enter,重新執行網頁後就會看到 network 有一個 hellonode 的檔案,看到 200 的狀態碼就代表有成功。

network

network

這邊可以看到 requestresponse 的資訊:

hellonode

hellonode


上一篇
Node.js - createServer 起手式
下一篇
Node.js - __dirname, __filename 取得檔案路徑與檔名
系列文
Node.js 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言