iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
自我挑戰組

網頁學習30天系列 第 21

網頁學習30天 day21

  • 分享至 

  • xImage
  •  

上次的程式碼在這次已經解決,首先先來看看程式碼:

const http = require("http");
const fs = require("fs");
const qs = require("querystring");
const path = require("path"); 

const port = 3000;
const ip = "127.0.0.1";

const sendResponse = (filename, statusCode, response) => {
  const filePath = path.join(__dirname, filename); 
  fs.readFile(filePath, (error, data) => {
    if (error) {
      response.statusCode = 500;
      response.setHeader("Content-Type", "text/plain");
      response.end("Sorry, internal error");
    } else {
      response.statusCode = statusCode;
      response.setHeader("Content-Type", "text/html");
      response.end(data);
    }
  });
};

const server = http.createServer((request, response) => {
  const method = request.method;
  let url = request.url;
  let selector = ""; 

  if (method === "GET") {
    if (url === "/") {
      sendResponse(`login${selector}.html`, 200, response);
    } else if (url === "/login-success.html") {
      sendResponse(`login-success${selector}.html`, 200, response);
    } else if (url === "/login-fail.html") {
      sendResponse(`login-fail${selector}.html`, 200, response);
    } else {
      sendResponse(`404${selector}.html`, 404, response);
    }
  } else if (method === "POST" && url === "/process-login") {
    let body = [];
    request.on("data", (chunk) => {
      body.push(chunk);
    });

    request.on("end", () => {
      body = Buffer.concat(body).toString();
      body = qs.parse(body);
      console.log(body);

      if (body.username === "aaa" && body.password === "123") {

        response.writeHead(302, {
          Location: "/login-success.html"
        });
        response.end();
      } else {

        response.writeHead(302, {
          Location: "/login-fail.html"
        });
        response.end();
      }
    });
  } else {

    sendResponse("404.html", 404, response);
  }
});

server.listen(port, ip, () => {
  console.log(`Server is running at http://${ip}:${port}`);
});

當用戶訪問你的服務器時,Node.js的HTTP伺服器會監聽到請求。在我的這個例子中,伺服器能接受GET和POST請求。
處理GET請求:

當接收到GET請求時,伺服器首先檢查請求的URL路徑。
如果URL是根路徑(/),伺服器將發送login.html文件作為響應,顯示登錄表單。
如果URL是/login-success.html,伺服器將發送login-success.html文件作為響應,顯示登錄成功頁面。
如果URL是/login-fail.html,伺服器將發送login-fail.html文件作為響應,顯示登錄失敗頁面。
如果URL不匹配以上任何一個路徑,伺服器將發送404.html文件作為響應,顯示404錯誤頁面。
處理POST請求:

當接收到POST請求時,伺服器首先檢查請求的URL路徑是否為/process-login。
如果是/process-login,伺服器將開始讀取請求體(body)中的數據。
讀取請求體時,數據以流(chunks)的形式傳入,伺服器將這些chunks收集並合併成一個完整的字符串。
然後,伺服器將字符串解析成JavaScript對象,使用qs.parse()方法。
伺服器檢查用戶名和密碼是否匹配(在這個例子中,用戶名為aaa,密碼為123)。
如果匹配,伺服器將發出302重定向到/login-success.html,顯示登錄成功頁面。
如果不匹配,伺服器將發出302重定向到/login-fail.html,顯示登錄失敗頁面。
文件路徑處理:

在發送響應之前,伺服器使用path.join()方法構建文件路徑。這確保了在不同的操作系統上,文件路徑都是正確的。__dirname表示當前腳本所在的目錄。
如此程式碼就能正確運作了


上一篇
網頁學習30天 day20
下一篇
網頁學習30天 day22
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言