การใช้งาน Express.js บน Node.js

7 June 2021

Express.js เป็นเว็บเฟรมเวิร์คจาก NPM ที่เราสามารถใช้สำหรับพัฒนาเว็บแอพพลิเคชันบน Node.js ในบทนี้ คุณจะได้เรียนรู้การใช้งาน Express.js สำหรับสร้างเว็บเซิร์ฟเวอร์สำหรับการให้บริการเว็บไซต์บน Node.js ในพื้นฐาน นี่เป็นเนื้อหาในบทนี้

  • Express.js คืออะไร
  • การติดตั้ง Express.js
  • การสร้างเว็บเซิร์ฟเวอร์ด้วย Express.js
  • การสร้าง Routes
  • การร้องขอแบบ GET
  • การคำร้องขอแบบ POST
  • การส่งค่ากลับด้วยออบเจ็ค Response
  • ตัวอย่างหน้าสมัครสมาชิก

Express.js คืออะไร

Express.js หรือ Express นั้นเป็นเว็บเฟรมเวิร์คจาก NPM ที่ใช้สำหรับพัฒนาเว็บแอพพลิเคชันหรือเว็บไซต์บน Node.js ที่ทำงานที่ฝั่งของ Backend ตัวของเฟรมเวิร์คนั้นถูกพัฒนามาจากโมดูล http ซึ่งเป็นโมดูลของ Node.js เอง นั่นหมายความว่าใช้เพียงแค่ Node.js อย่างเดียวคุณก็สามารถทำทุกอย่างเหมือนกับ Express ได้ แต่เราใช้มันเพื่อทำให้การพัฒนาเว็บแอพพลิเคชันบน Node.js ทำได้ง่ายขึ้น และ Express.js มีคุณสมบัติที่โดดเด่นคือ

  • การจัดการ Routing ที่ง่าย
  • ฟังก์ชันช่วยสำหรับ HTTP
  • สนับสนุน Template engines สำหรับสร้าง View
  • ทำงานได้รวดเร็วและมีประสิทธิภาพ
  • สนับสนุน Middleware
  • และอื่นๆ

Express.js เป็นแพ็กเกจที่ได้รับความนิยมเป็นอย่างมากในการพัฒนาเว็บแอพพลิเคชันบน Node.js และมันถูกเผยแพร่อยู่บน NPM ในการใช้งาน Express สามารถช่วยให้เราทำงานได้สะดวกและรวดเร็วขึ้น เนื่องจาก API ส่วนมากของมันถูกออกแบบมาเพื่อการพัฒนาเว็บไซต์โดยเฉพาะและง่ายต่อการใช้งาน แทนที่จะใช้ Low-level APIs ของ Node.js โดยตรง

การติดตั้ง Express.js

ก่อนเริ่มต้นบทเรียนนี้ ให้คุณสร้างโฟล์เดอร์ใหม่ที่มีชื่อว่า expressjs-example (คุณสามารถใช้ชื่ออื่นได้หากต้องการ) และในโฟล์เดอร์ พิมพ์คำสั่งต่อไปนี้ลงบน Command line เพื่อสร้างโปรเจ็ค Node.js ด้วย npm

npm init

นี่จะถามคำถามเพื่อตั้งค่าเกี่ยวกับโปรเจ็คของคุณ ให้กรอกรายละเอียดหรือกด Enter เพื่อใช้จากค่าเริ่มต้น เมื่อเสร็จแล้วจะปรากฏไฟล์ package.json ถือว่าเป็นการเสร็จสิ้นการสร้างโปรเจ็ค

จากนั้นเริ่มต้นการติดตั้งแพ็กเกจ express ลงบนโปรเจ็คด้วยคำสั่งต่อไปนี้

npm install express

นี่จะทำการติิดตั้งแพ็กเกจ Express ลงในโปรเจ็ค และเมื่อดูในไฟล์ package.json จะปรากฏแพ็กเกจ Express พร้อมกับเวอร์ชันที่ได้รับการติดตั้งในฟิลด์ dependencies

"dependencies": {
  "express": "^4.17.1"
}

ฟิลด์ dependencies ในไฟล์ package.json เป็นที่ที่ใช้สำหรับจัดเก็บรายชื่อของแพ็กเกจทั้งหมดจาก NPM ที่ได้ติดตั้งเพื่อใช้งานในโปรเจ็ค ในตัวอย่างนี้ เราได้ติดตั้งเพียงแพ็กเกจเดียวคือ Express ซึ่งโดยปกติแล้ว นี่มักจะมีจำนวนหลายแพ็กเกจ

ในวันที่บทความนี้ถูกเขียนขึ้่น เวอร์ชันล่าสุดของ Express.js อยู่ที่ 4.17.1 ซึ่งคุณอาจจะได้เวอร์ชันที่แตกต่างกันออกไป หรือถ้าหากคุณต้องการติดตั้ง Express.js แบบระบุเวอร์ชันที่ต้องการ คุณสามารถใช้คำสั่งต่อไปนี้

npm install [email protected]

นี่จะติิดตั้ง Express เวอร์ชัน 4.17.1 ซึ่งเป็นเวอร์ชันที่เราใช้อยู่ในบทเรียนนี้ หลังจากที่ติดตั้งแพ็กเกจเสร็จเรียบร้อยแล้ว เราก็พร้อมที่จะสร้างเว็บเซิร์ฟเวอร์ด้วย Express.js สำหรับการพัฒนาเว็บแอพพลิเคชันบน Node.js

การสร้างเว็บเซิร์ฟเวอร์ด้วย Express.js

มาเริ่มต้นการสร้างเว็บเซิร์ฟเวอร์ด้วย Express.js บน Node.js ในรูปแบบที่เรียบง่ายที่สุด นีี่เป็นตัวอย่างการสร้างเว็บเซิร์ฟเวอร์ที่รัน (Listen) ที่พอร์ต 3000 และมี Route สำหรับรับคำขอ (Request) ที่จะส่งค่ากลับ (Response) เป็นข้อความว่า "Hello World" กลับไปยังผู้ร้องขอ (Client)

app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

ในตัวอย่างนี้ เป็นการสร้างเว็บเซิร์ฟเวอร์ที่ทำงานที่พอร์ต 3000 บนคอมพิวเตอร์ของคุณ และเราสามารถเข้าถึงมันได้ผ่านทาง URL http://localhost:3000 บนเว็บเบราว์เซอร์ แต่ก่อนที่ URL นี้จะสามารถใช้งานได้ เราจะต้องรันโปรแกรมหรือเว็บเซิร์ฟเวอร์ก่อนด้วยคำสั่ง

node app.js

นี่เป็นผลลัพธ์จากการรันโปรแกรม

Listening at http://localhost:3000
...

หลังจากที่รันโปรแกรมแล้ว Cursor บน Command line จะค้างอยู่แบบนั้นตลอดไป นั่นเป็นเพราะว่าเว็บเซิร์ฟเวอร์กำลังรอรับคำร้องขออยู่แบบ Asynchronous และมันจะทำงานตลอดไปจนกว่าจะมีการกดปุ่ม CTRL+C เพื่อออกจากโปรแกรม

จากนั้นคุณสามารถเข้าถึง URL http://localhost:3000 ผ่านทางเว็บเบราว์เซอร์หรือผ่านโปรแกรม CURL ที่สะดวก จะปรากฏหน้าที่แสดงข้อความ "Hello World!" นั่นหมายความว่าเราได้สร้างเว็บไซต์แรกด้วย Express.js บน Node.js ได้สำเร็จ

ต่อไปเป็นการอธิบายการทำงานของโค้ดในแต่ละส่วน มาดูว่าเว็บเซิร์ฟเวอร์นี้มีการทำงานอย่างไรบ้าง

const express = require('express');
const app = express();

ในสองบรรทัดแรกของโปรแกรม เป็นการนำเข้าโมดูล express สำหรับใช้เพื่อสร้างเว็บเซิร์ฟเวอร์บน Node.js จากนั้นเรียกใช้ฟังก์ชัน express เพื่อสร้างออบเจ็คของเว็บแอพพลิเคชันและเก็บไว้ในตัวแปร app

const port = 3000;

ต่อมาเป็นการกำหนดพอร์ตของเว็บเซิร์ฟเวอร์ที่จะรับฟังคำร้องขอ โดยทั่วไปแล้วมัีกจะเป็นพอร์ต 3000 ที่ถูกใช้งาน แต่คุณสามารถใช้พอร์ตอื่นได้หากต้องการ เนื่องจากมันเป็นเพียงพอร์ตหนึ่งบนคอมพิวเตอร์ของคุณ และมันจะต้องเป็นพอร์ตที่ไม่กำลังทำงานอยู่

app.get('/', (req, res) => {
    res.send('Hello World!');
});

และนี่เป็นการกำหนด Route ด้วยเมธอด get เพื่อรับมือกับคำร้องขอที่ส่งเข้ามายังเซิร์ฟเวอร์ พารามิเตอร์แรกเป็นพาธของ URL และพารามิเตอร์ที่สองเป็นฟังก์ชัน Callback ที่จะถูกเร่ียกใช้งานเมื่อมีคำร้องขอถูกส่งเข้ามายังพาธดังกล่าว ฟังก์ชันได้มอบออบเจ็ค req และ res สำหรับใช้ในการรับค่าและการส่งค่ากลับ

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

เมื่อมีออบเจ็คของแอพพลิเคชัน app และจัดเตรียมพอร์ตพร้อมแล้ว เราเรียกใช้เมธอด listen เพื่อเริ่มการทำงานของเซิร์ฟเวอร์ โดยระบุพอร์ตและฟังก์ชัน Callback ที่จะถูกเรียกใช้งานเมื่อการเริ่มต้นของเซิร์ฟเวอร์สำเร็จและพร้อมรับคำของจาก Client

การสร้าง Routes

การสร้าง Route บน Express สามารถทำได้ง่ายๆ เนื่องจากมันมีเมธอดที่ออกแบบมาอย่างมีความหมายและง่ายต่อการใช้งาน นี่เป็นตัวอย่างของการสร้าง Route บน Express เพื่อกำหนดฟังก์ชันให้ทำงานแตกต่างกันออกไปสำหรับคำร้องขอที่ส่งมาในแต่ละพาธของ URL มันเหมือนกับที่คุณเคยเห็นบนเว็บไซต์ส่วนมาก

route_example.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.get('/login', (req, res) => {
    res.send('Login page');
});

app.get('/about', (req, res) => {
    res.send('About page');
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

จากนั้นรันโปรแกรมหรือเว็บเซิร์ฟเวอร์ด้วยคำสั่ง

node route_example.js

นี่จะเริ่มการทำงานของเว็บเซิร์ฟเวอร์ที่พอร์ต 3000 และทำให้เราสามารถเข้าถึง URL ที่กำหนดด้วย Router ได้ ให้คุณลองเข้าถึงมันผ่านทางเว็บเบราว์เซอร์ของคุณ นี่เป็นรายการของสาม URL ที่สามารถใช้งานได้ในตอนนี้

  • http://localhost:3000/
  • http://localhost:3000/login
  • http://localhost:3000/about

เมื่อคุณเข้าถึงแต่ละ URL คุณจะได้รับข้อความตอบกลับที่แตกต่างกัน ซึ่งเป็นผลลัพธ์จากการทำงานของฟังก์ชันที่กำหนดไว้ในแต่ละ Route และนี่ก็คือวิธีการสร้าง Route ด้วย Express จะเห็นว่าการกำหนด Route นั้นทำได้ง่ายมาก และคุณสามารถสร้างเป็นจำนวนกี่ Route ก็ได้

app.get('/some/path', (req, res) => {
    res.send('Login page');
});

ในตัวอย่าง ในการสร้าง Route เพื่อรับมือกับคำร้องขอในรูปแบบ GET เราเรียกใช้เมธอด get โดยระบุพารามิเตอร์แรกเป็นพาธของ URLและพารามิเตอร์ที่สองเป็นฟังก์ชัน Callback ที่จะทำงานสำหรับ Route ดังกล่าว

และในกรณีที่ URL อื่นๆ ทีี่ไม่ได้กำหนดใน Route ถูกร้องขอเข้ามา ยกตัวอย่างเช่น http://localhost:3000/abc Express จะแสดงหน้า Not found ซึ่งเป็นค่าเริ่มต้นของเฟรมเวิร์คเองหมายถึงไม่พบ Route ที่ร้องขอ ที่จะแสดงข้อความเช่น

Cannot GET /abc

สำหรับการสร้าง Route เพื่อรับมือกับคำร้องขอแบบ POST จะพูดถึงในตอนต่อไป แต่ในตอนนี้เรามาดูการทำงานกับคำร้องขอแบบ GET กันก่อน

การร้องขอแบบ GET

เมธอด get ใช้เพื่อกำหนด Route สำหรับรับมือกับคำร้องขอที่ส่งเข้ามาในรูปแบบ GET นี่เป็นค่าเริ่มต้นสำหรับการส่งคำร้องขอบน HTTP เมื่อคุณเปิิดหน้าเว็บใดๆ บนเว็บเบราวน์เซอร์หรือไม่ได้ระบุ คำร้องขอจะเป็นแบบ GET โดยปริยาย

ในการส่งคำร้องขอแบบ GET เราสามารถส่งค่าหรือตัวแปรที่ต้องการไปยังเว็บเซิร์ฟเวอร์ได้ผ่านส่วนของ URL ที่เรียกว่า Query string ในตัวอย่างนี้ เราจะสามารถสร้าง Route สำหรับรับค่า Query string เพื่อที่จะนำค่าเหล่านั้นไปใช้งานบนเว็บเซิร์ฟเวอร์

ในตัวอย่างนี้ มาเรียนรู้วิธีการสร้าง Route เพื่อรับมือกับคำร้องขอรูปแบบ GET และเราจะส่งค่าบางอย่างผ่าน Query string เพื่อให้เว็บเซิร์ฟเวอร์นำไปใช้งานและส่งค่ากลับมายัง Client นี่เป็นโค้ดของโปรแกรม

get_example.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/greet', (req, res) => {
    let userName = req.query.name;
    res.send(`Hello ${userName}!`);
});

app.get('/sum', (req, res) => {
    let a = Number(req.query.a);
    let b = Number(req.query.b);
    res.send(`a = ${a}, b = ${b}<br>sum = ${a + b}`);
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

จากนั้นรันโปรแกรมด้วยคำสั่ง node get_example.js และเปิดเว็บเบราว์เซอร์เพื่อเข้าถึง URL

http://localhost:3000/greet?name=Metin

เมื่อคุณเข้าถึง URL ดังกล่าวด้วยเว็บเบราว์เซอร์ คุณจะได้รับการตอบกลับจากเซิร์ฟเวอร์เป็นข้อความกล่าวทักทาย

Hello Metin!

จะเห็นว่าชื่อที่ส่งไปกับ Query string ของ URL ที่เราได้ทำการร้องขอ name=Metin ถูกส่งกลับเป็นการตอบกลับของการร้องขอนี้ ในตอนนี้ ลองเปลี่ยนเป็นชื่อของคุณเองและดูผลลัพธ์ว่าเป็นอย่างไร แน่นอนค่าส่งกลับจะเป็นการกล่าวทักทายชื่อของคุณ และนี่ก็เป็น URL แรกสำหรับโปรแกรมนี้

นอกจากนี้ เรายังได้กำหนด Route สำหรับรับมือกับ URL ที่สอง นี่ใช้เพื่อหาผลรวมของตัวเลขสองตัวที่ส่งมาผ่านทาง Query string a และ b ใช่แล้ว มันคือเครื่องคิดเลขอย่างง่ายนั่นเอง ที่เว็บเบราว์เซอร์ของคุณ ให้ไปที่ URL

http://localhost:3000/sum?a=2&b=3

นี่เป็นผลลัพธ์ที่คุณจะได้รับซึ่งเป็นผลรวมของตัวเลขทั้งสอง

a = 2, b = 3
sum = 5

ในการเข้าถึง URL เราส่งสองตัวเลขเข้าไปผ่านตัวแปร Query string a และ b และเว็บเซิร์ฟเวอร์ตอบกลับเป็นผลรวมของตัวเลขทั้งสอง และมันเป็นการทำงานที่กำหนดในฟังก์ชัน Callback สำหรับ Route /sum

จะเห็นว่าเราได้สร้างเว็บแอพพลิเคชันที่ทำงานตามข้อมูลที่ส่งไป และนี่เป็นสิ่งพื้นฐานที่พบเจอได้ทั่วไปในเว็บไซต์ที่เรียกว่าไดนามิส์เว็บไซต์ (Dynamic website) และมันเป็นเพียงจุดเริ่มต้นที่คุณจะต้องเรียนรู้เกี่ยวกับการสร้างเว็บไซต์

นั่นหมายความว่า คุณสามารถสร้างหน้าเว็บที่รับค่า ID ของสินค้าผ่านหรืออื่นๆ ผ่านทาง Query string ของ URL และนำ ID ดังกล่าวไปค้นหาข้อมูลในฐานข้อมูล และส่งข้อมูลของสินค้ากลับมาให้กับผู้ใช้งานเว็บไซต์ หรือทุกอย่างที่คุณจะสามารถจิินตนาการได้

let userName = req.query.name;
...
let a = Number(req.query.a);
let b = Number(req.query.b);

ใน Express นั้นเราสามารถรับค่าของ Query string ที่ส่งมากับ URL ผ่านทางออบเจ็ค req.query เมื่อค่าส่งผ่าน URL เป็น name=Metin เราสามารถเข้าถึงมันได้จาก req.query.name เหมือนกับที่แสดงในโค้ดตัวอย่างด้านบน

เมื่อคุณเข้าถึงค่าที่ไม่มีอยู่บน Query string คุณจะได้รับ undefined ยกตัวอย่างเช่น

let myValue = req.query.dontExist;
// undefined

การร้องขอแบบ POST

ในการรับมือกับคำร้องขอแบบ POST ด้วย Express นั้นสามารถทำได้โดยการใช้เมธอด post ในการกำหนด Route และการส่งค่าแบบ POST สามารถทำได้หลายวิธี วิธีที่ง่ายที่สุดคือการส่งแบบ url-encoded และในฝั่งของเว็บเซิร์ฟเวอร์จะต้องอ่านข้อมูลจากวิธีที่ข้อมูลได้ถูกส่งมาจาก Readable stream ของออบเจ็ค Request

เพื่อสะดวกในการทำงาน ในการเขียนโปรแกรมบน Node.js เราสามารถใช้แพ็กเกจ body-parser สำหรับการอ่านค่าที่ถูกส่งมาในรูปแบบ POST ได้ และเราจะใช้มันในบทเรียนนี้ ให้คุณติดตั้งแพ็กเกจด้วยคำสั่ง

npm install body-parser

แพ็กเกจ body-parser ทำให้หน้าที่อ่านข้อมูลที่ส่งแบบ POST และเก็บในตัวแปรที่เราสามารถนำมาใช้งานได้ทันที ถ้าหากไม่ใช้แพ็กเกจนี้ เราจะต้องเขียนฟังก์ชันเพื่ออ่านและแปลงค่าจากคำร้องขอด้วยตัวเอง ซึ่งนี่ไม่ได้ครอบคลุมในบทเรียนนี้

ในตัวอย่างนี้ เป็นการสร้าง Route ที่รับมือกับคำร้องขอแบบ POST บน Express เราได้สร้าง API ที่จำลองการทำงานของระบบสมัครสมาชิกบนเว็บไซต์ โดยรับชื่อ อีเมล และรหัสผ่านที่ส่งมากับคำร้องขอแบบ POST นี่เป็นโค้ดของโปรแกรม

post_example.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/api/users/create', (req, res) => {
    let name = req.body.name;
    let email = req.body.email;
    let password = req.body.password;
    res.send([
        'Signup completed',
        `Name: ${name}`,
        `Email: ${email}`,
        `Password: ${'*'.repeat(password.length)}`
    ].join('<br>'));
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

ในตัวอย่างนี้ เราได้สร้าง Route ที่ /api/users/create สำหรับจำลองการสมัครสมาชิกที่รับข้อมูลแบบ POST ได้แก่ ชื่อ อีเมล และรหัสผ่าน จากนั้นรันโปรแกรมด้วยคำสั่งนี้เพื่อเริ่มต้นการทำงานของเว็บเซิร์ฟเวอร์เช่นเคย

node post_example.js

จากนั้นคุณจะต้องทำการส่งคำร้องขอแบบ POST ผ่านทางเว็บเบราวน์เซอร์หรือโปรแกรมช่วยเหลืออื่นๆ เช่น CURL หรือ POSTMAN และในตัวอย่างของเราจะทำมันผ่านเว็บเบราวน์เซอร์

อย่างไรก็ตาม ในการส่งคำร้องขอแบบ POST ผ่านเว็บเบราวน์เซอร์นั้นการส่งค่าผ่าน HTML Form จะเป็นวิธีที่ง่ายที่สุด ดังนั้นเราสร้างฟอร์มสำหรับสมัครสมาชิกด้วยโค้ดต่อไปนี้ คุณสามารถบันทึกมันและนำไปเปิดที่เว็บเบราว์เซอร์ได้

signup.html
<html>

<head>
    <title>Sign up to MarcusCode</title>
</head>

<body>
    <h4>Sign up to MarcusCode</h4>
    <form method="POST" action="http://localhost:3000/api/users/create">
        <label>Name</label>
        <input name="name" type="text"><br>
        <label>Email</label>
        <input name="email" type="email"><br>
        <label>Password</label>
        <input name="password" type="password"><br>
        <button type="submit">Create account</button>
    </form>
</body>

</html>

เมื่อเปิดหน้านี้ด้วยเว็บเบราวน์เซอร์ คุณจะพบกับแบบฟอร์มสำหรับสมัครสมาชิก กรอกข้อมูลและคลิกที่ "Create account" นี่จะส่งคำร้องขอพร้อมกับข้อมูลที่กรอกลงไปบนฟอร์มไปที่ http://localhost:3000/api/users/create ในรูปแบบ POST และ API ส่งค่ากลับมาเป็น

Signup completed
Name: Metin
Email: [email protected]
Password: ****

นั่นหมายความว่าเราได้สร้างเว็บที่สามารถรับข้อมูลแบบ POST ได้สำเร็จ แต่ได้ตอบกลับค่าที่รับได้กลับมายัง Client และหลังจากนี้คุณสามารถนำข้อมูลไปเก็บในฐานข้อมูลหรือทำอย่างอื่นก็ได้ตามที่ต้องการ แต่ในตัวอย่าง เราเพียงส่งค่าทั้งหมดกลับมาเพื่อยืนยันว่าได้รับข้อมูลถูกต้อง

ต่อไปเป็นการอธิบายของทำงานของโปรแกรมที่รับค่าแบบ POST ซึ่งมีสิ่งใหม่ที่เพิ่มเติมเข้ามาจากในตัวอย่างก่อนหน้า

const bodyParser = require('body-parser');

ในตัวอย่างนี้ เราได้ติดตั้งแพ็กเกจ body-parser เพื่ออ่านค่าที่ส่งเข้ามาแบบ POST จาก Request body เพื่อนำมาใช้งานในโปรแกรม เหมือนกับการใช้งานแพ็กเกจทั่วไป โดยที่ออบเจ็ค bodyParser ประกอบไปด้วยฟังก์ชันที่ทำงานเป็น Middleware

app.use(bodyParser.urlencoded({ extended: false }));

เรากำหนด Middleware โดยการใช้เมธอด use บนออบเจ็คของแอพพลิเคชัน โดยเรียกเมธอด urlencoded ของ body-parser ซึ่งกำหนดรูปแบบการอ่านค่าจาก Request body ที่ส่งมาเป็นแบบ Form urlencoded หรือ Form data และกำหนด extended เป็น false เพื่อไม่ใช้เวอร์ชัน Extended

เมธอดนี้ส่งค่ากลับเป็นฟังก์ชันของ Middleware ที่จะถูกเรียกใช้ในแต่ละคำร้องขอที่ส่งเข้ามายังเว็บเซิร์ฟเวอร์ ก่อนที่ฟังก์ชันที่กำหนดใน Route จะทำงานและ Middleware สามารถอ่านและส่งค่าต่อไปให้ฟังก์ชันของ Route เพื่อใช้งานได้

let name = req.body.name;
let email = req.body.email;
let password = req.body.password;

นั่นหมายความว่าเมื่อ Middleware ทำงานเสร็จสิ้น มันจะอ่านค่าจาก POST และกำหนดไว้ในออบเจ็ค req.body เพื่อนำไปใช้งานในฟังก์ชันของ Route ต่อไป

Middleware คือฟังก์ชันที่กำหนดเพื่อให้ทำงานก่อนฟังก์ชันที่กำหนดโดย Route มันมีประโยชน์ในกรณีที่ทุก Route ต้องการทำงานบางอย่างที่เหมือนกัน เช่น การตรวจสอบสิทธิ หลังจากทำงานเสร็จแล้ว Middleware สามารถส่งต่อการทำงานให้กับฟังก์ชันของ Route ต่อได้

การส่งค่ากลับด้วยออบเจ็ค Response

ออบเจ็ค res ให้สำหรับควบคุมวิธีที่ข้อมูลจะถูกส่งกลับไปยัง Client ที่ส่งคำขอมายังเว็บเซิร์ฟเวอร์ ในส่วนนี้เราจะพูดถึงการส่งค่ากลับด้วยออบเจ็ค Response ในพื้นฐานเท่านั้น มาเริ่มต้นกับการส่งค่ากลับด้วยเมธอด send ซึ่งเป็นเมธอดพื้นฐานสำหรับการส่งค่ากลับในทุกรูปแบบ

นี่เป็นตัวอย่างการส่งค่ากลับเป็นข้อมูลในรูปแบบของ JSON ซึ่งสามารถพบได้ทั่วไปในการทำงานของ API บนเว็บแอพพลิชัน

app.get('/text', (req, res) => {
    res.send('This is text');
});

app.get('/json', (req, res) => {
    res.send({
        id: 1,
        name: 'Metin'
    });
});

เมธอด send ใช้สำหรับส่งข้อมูลกลับไปยัง Client โดยที่ประเภทข้อมูล (Content-Type) จะถูกกำหนดอัตโนมัติจากข้อมูลที่ส่งกลับ ยกตัวอย่างเช่น ถ้าค่าที่ส่งกลับเป็น String; Content-Type ของการส่งกลับจะเป็น text/html ในขณะที่ออบเจ็คหรืออาเรย์ Content-Type จะเป็น application/json โดยอัตโนมัติ ซึ่งนี่เป็นกรณีสำหรับตัวอย่างนี้

อย่างไรก็ตาม ในกรณีที่คุณต้องการส่งค่ากลับเป็น JSON และทราบอยู่แล้วว่ามันจะต้องเป็น คุณสามารถใช้เมธอด json ได้โดยตรงสำหรับการส่งค่ากลับ นี่เป็นตัวอย่าง

app.get('/json', (req, res) => {
    res.json({
        id: 1,
        name: 'Metin'
    });
});

ในการส่งค่ากลับ เรายังสามารถกำหนด Status code ของการส่งค่ากลับได้โดยการใช้เมธอด status เมธอดนี้ส่งค่ากลับเป็นออบเจ็ค Response ที่สามารถเชื่อมต่อการเรียกใช้เมธอดอื่นต่อไปได้ ยกตัวอย่างเช่น

res.status(403).end();
res.status(400).send('Bad Request');
res.status(404).sendFile('/404.html');

นอกจากนี้ ออบเจ็ค Response ยังมีเมธอดอื่นๆ ที่ถูกออกแบบมาสำหรับการทำงานพื้นฐานเกี่ยวกับ HTTP Response ได้ ยกตัวอย่างเช่น

  • res.cookie() - สำหรับสร้าง Cookie
  • res.clearCookie() - สำหรับลบ Cookie
  • res.redirect() - เปลี่ยนทิศทางการร้องขอ

และเมธอดอื่นๆ อีกมากมายซึ่งเราไม่สามารถพูดถึงและแสดงตัวอย่างได้ทั้งหมดในตอนนี้

ตัวอย่างหน้าสมัครสมาชิก

สำหรับเมธอดสุดท้ายในบทนี้จะเป็นการแสดงตัวอย่างการใช้งานเมธอด sendFile จากออบเจ็ค Response เมธอดนี้ใช้สำหรับอ่านไฟล์และส่งเนื้อหาของไฟล์กลับไปในรูปแบบ text/html เราจะใช้มันร่วมกับหน้าสมัครสมาชิกที่ได้ทำไปแล้วในตัวอย่างก่อนหน้า

ในตัวอย่างนี้ เราจะทำให้เว็บแอพพลิเคชันแสดงหน้าฟอร์มสำหรับสมัครสมาชิก ที่จะสามารถเข้าถึงได้จาก URL http://localhost:3000/signup และส่งค่าไปยัง API เพื่อจำลองการสมัครสมาชิกเหมือนกับในตัวอย่างที่ผ่านมา แต่ทั้งสอง URL นี้จะรันอยู่บนเว็บเดียวกัน

signup.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

// Parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

app.get('/signup', (req, res, next) => {
    let options = {
        root: __dirname,
        headers: {
            'Content-Type': 'text/html; charset=UTF-8'
        }
    };
    res.sendFile('/signup.html', options, function (err) {
        if (err) {
            next(err);
        } else {
            console.log('Sent: signup.html');
        }
    });
});

app.post('/api/users/create', (req, res) => {
    let name = req.body.name;
    let email = req.body.email;
    let password = req.body.password;

    // Assume that we save it to db
    console.log('Saved to the database.');
    res.send([
        'Signup completed',
        `Name: ${name}`,
        `Email: ${email}`,
        `Password: ${'*'.repeat(password.length)}`,
        '<a href="/signup">Back</>'
    ].join('<br>'));
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

ในตัวอย่างนี้ เราจะยังต้องใช้ไฟล์ signup.html ที่ได้สร้างไปแล้วจากตัวอย่างก่อนหน้า แต่แทนที่จะเปิดไฟล์นี้โดยตรงผ่านเว็บเบราว์เซอร์ เราจะทำให้มันสามารถเข้าถึงได้ผ่านทาง URL /signup ที่ทำงานอยู่บนเว็บเซิร์ฟเวอร์หรือโดเมนเดียวกันกับ API

เมื่อพร้อมแล้วรันโปรแกรมด้วยคำสั่ง node signup.js เพิื่อเริ่มต้นการทำงานของเว็บไซต์ และมาทดสอบระบบสมัครสมาชิกของเรากัน

เปิดเว็บเบราว์เซอร์และไปที่ URL http://localhost:3000/signup จะปรากฏหน้าฟอร์มสมัครสมาชิกที่คุณได้เห็นไปแล้วในตัวอย่างก่อนหน้า แต่ในครั้งนี้มันถูกรันอยู่บนเว็บแอพพลิเคชันเดียวกับที่ API อยู่ ให้คุณกรอกข้อมูลและส่งฟอร์มเช่นเดิม

app.get('/signup', (req, res, next) => {
    let options = {
        root: __dirname,
        headers: {
            'Content-Type': 'text/html; charset=UTF-8'
        }
    };
    res.sendFile('/signup.html', options, function (err) {
        if (err) {
            next(err);
        } else {
            console.log('Sent: signup.html');
        }
    });
});

สิ่งที่เพิ่มเข้ามาในตัวอย่างนี้คือการสร้าง Route ใหม่ที่ /signup สำหรับแสดงหน้าฟอร์ม และใช้เมธอด sendFile เพื่ออ่านและส่งไฟล์ HTML ของฟอร์มสมัครสมาชิกไปยัง Client แทน ซึ่งเมธอดรับพารามิเตอร์แรกเป็นชื่อของไฟล์ และพารามิเตอร์ที่สองเป็นออบเจ็คตัวเลือกกำหนดการทำงาน ซึ่งประกอบไปด้วย

  • root: เป็นจุดเริ่มต้นสำหรับการค้นหาไฟล์ เราใช้ __dirname ซึ่งหมายถึงโฟล์เดอร์ปัจจุบันของไฟล์โปรแกรม (signup.js) ที่กำลังทำงานอยู่
  • headers: เป็นรายการของ Header ที่ต้องการส่งกลับไปยัง Client มันเป็นออบเจ็คที่มี Key เป็นชื่อและ Value เป็นค่าของ Header ตามลำดับ

และพารามิเตอร์สุดท้ายเป็นฟังก์ชัน Callback ที่จะถูกเรียกใช้งานเมื่อการส่งกลับเสร็จสิ้น ไม่ว่าจะสำเร็จหรือล้มเหลว ในกรณีที่สำเร็จ เราแสดงข้อความออกทางหน้าจอเพื่อตรวจสอบการทำงาน และกรณีที่ล้มเหลว เราเรียกใช้ฟังก์ชัน next ฟังก์ชันจาก Middleware ที่รับจากพารามิเตอร์ที่สามของฟังก์ชันเพิื่อส่งต่อให้ Express จัดการส่วนที่เหลือต่อไป

ในบทนี้ คุณได้เรียนรู้การใช้งาน Express เว็บเฟรมเวิร์คสำหรับการพัฒนาเว็บแอพพลิเคชันบน Node.js การใช้งาน Express ทำให้การสร้างเว็บไซต์บน Node.js ง่ายขึ้น เนื่องจาก API ส่วนมากถูกออกแบบมาให้ใช้งานง่ายและมีฟังก์ชันสนับสนุนการทำงานเกี่ยวกับเว็บไซต์โดยเฉพาะ

บทความนี้เป็นประโยชน์หรือไม่? Yes · No