บทช่วยสอน Node.js Express Framework – เรียนรู้ใน 10 นาที

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

Express.js คืออะไร?

Express.js คือเฟรมเวิร์กเซิร์ฟเวอร์แอปพลิเคชันเว็บ Node js ซึ่งได้รับการออกแบบมาโดยเฉพาะสำหรับการสร้างแอปพลิเคชันเว็บแบบหน้าเดียว หลายหน้า และแบบไฮบริด

มันได้กลายเป็นเฟรมเวิร์กเซิร์ฟเวอร์มาตรฐานสำหรับ node.js Express เป็นส่วนแบ็กเอนด์ของสิ่งที่เรียกว่า MEAN stack

MEAN เป็นโอเพ่นซอร์สฟรี Javaต้นฉบับ ซอฟต์แวร์สแต็กสำหรับสร้างเว็บไซต์แบบไดนามิกและแอปพลิเคชันเว็บซึ่งมีส่วนประกอบดังต่อไปนี้

1) MongoDB – ฐานข้อมูล NoSQL มาตรฐาน

2) Express.js – กรอบงานเว็บแอปพลิเคชันเริ่มต้น

3) Angular.js - Javaกรอบงานสคริปต์ MVC ที่ใช้สำหรับแอปพลิเคชันเว็บ

4) Node.js – กรอบงานที่ใช้สำหรับแอปพลิเคชันฝั่งเซิร์ฟเวอร์และเครือข่ายที่ปรับขนาดได้

เฟรมเวิร์ก Express.js ทำให้การพัฒนาแอปพลิเคชันเป็นเรื่องง่ายมาก ซึ่งสามารถใช้เพื่อจัดการกับคำขอหลายประเภท เช่น คำขอ GET, PUT และ POST และ DELETE

การติดตั้งและใช้งาน Express

Express จะได้รับการติดตั้งผ่าน Node Package Manager ซึ่งสามารถทำได้โดยดำเนินการตามบรรทัดต่อไปนี้ในบรรทัดคำสั่ง

npm ติดตั้งด่วน

คำสั่งข้างต้นร้องขอให้ตัวจัดการแพ็คเกจโหนดดาวน์โหลดโมดูลด่วนที่จำเป็นและติดตั้งตามนั้น

ลองใช้เฟรมเวิร์ก Express ที่ติดตั้งใหม่ของเราและสร้างแอปพลิเคชัน “Hello World” ที่เรียบง่าย

แอปพลิเคชันของเรากำลังจะสร้างโมดูลเซิร์ฟเวอร์อย่างง่ายซึ่งจะรับฟังบนพอร์ตหมายเลข 3000 ในตัวอย่างของเรา หากมีการร้องขอผ่านเบราว์เซอร์บนหมายเลขพอร์ตนี้ แอปพลิเคชันเซิร์ฟเวอร์จะส่งการตอบกลับ 'Hello' World' ไปยังไคลเอนต์ .

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

คำอธิบายรหัส:

ในโค้ดบรรทัดแรก เราใช้ฟังก์ชัน need เพื่อรวม "express module"
ก่อนที่เราจะเริ่มใช้โมดูลด่วนได้ เราต้องสร้างอ็อบเจ็กต์ของมันเสียก่อน
ที่นี่เรากำลังสร้างฟังก์ชันโทรกลับ ฟังก์ชั่นนี้จะถูกเรียกเมื่อใดก็ตามที่ใครก็ตามเรียกดูรูทของเว็บแอปพลิเคชันของเราซึ่งก็คือ http://localhost:3000 - ฟังก์ชั่นการโทรกลับจะใช้ในการส่งสตริง 'Hello World' ไปยังหน้าเว็บ
ในฟังก์ชันการโทรกลับ เรากำลังส่งสตริง "Hello World" กลับไปยังไคลเอ็นต์ พารามิเตอร์ 'res' ใช้เพื่อส่งเนื้อหากลับไปยังหน้าเว็บ พารามิเตอร์ 'res' นี้เป็นสิ่งที่โมดูล 'คำขอ' จัดเตรียมไว้ให้เพื่อให้สามารถส่งเนื้อหากลับไปยังหน้าเว็บได้
จากนั้นเราจะใช้ฟังก์ชัน Listen to เพื่อให้แอปพลิเคชันเซิร์ฟเวอร์ของเรารับฟังคำขอของไคลเอ็นต์บนพอร์ตหมายเลข 3000 คุณสามารถระบุพอร์ตที่มีอยู่ได้ที่นี่

หากดำเนินการคำสั่งสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

จากผลลัพธ์ที่ได้

คุณจะเห็นได้ชัดเจนว่าหากเราเรียกดู URL ของ localhost บนพอร์ต 3000 คุณจะเห็นสตริง 'Hello World' แสดงบนเพจ
เนื่องจากในโค้ดของเราเราได้กล่าวถึงโดยเฉพาะเพื่อให้เซิร์ฟเวอร์รับฟังบนพอร์ตหมายเลข 3000 เราจึงสามารถดูผลลัพธ์ได้เมื่อเรียกดู URL นี้

เส้นทางคืออะไร?

การกำหนดเส้นทางจะกำหนดวิธีที่แอปพลิเคชันตอบสนองต่อคำขอของไคลเอ็นต์ไปยังจุดสิ้นสุดเฉพาะ

ตัวอย่างเช่น ลูกค้าสามารถสร้างคำขอ GET, POST, PUT หรือ DELETE http สำหรับ URL ต่างๆ ดังที่แสดงด้านล่าง

http://localhost:3000/Books
http://localhost:3000/Students

ในตัวอย่างข้างต้น

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

แต่ละเส้นทางสามารถมีฟังก์ชันตัวจัดการตั้งแต่หนึ่งฟังก์ชันขึ้นไป ซึ่งจะดำเนินการเมื่อเส้นทางตรงกัน

ไวยากรณ์ทั่วไปสำหรับเส้นทางแสดงอยู่ด้านล่างนี้

app.METHOD(PATH, HANDLER)

โดยที่

1) แอพเป็นอินสแตนซ์ของโมดูลด่วน

2) METHOD เป็นวิธีการร้องขอ HTTP (GET, POST, PUT หรือ DELETE)

3) PATH เป็นเส้นทางบนเซิร์ฟเวอร์

4) HANDLER คือฟังก์ชันที่ดำเนินการเมื่อเส้นทางตรงกัน

ลองดูตัวอย่างวิธีที่เราสามารถใช้เส้นทางในแบบด่วนได้ ตัวอย่างของเราจะสร้าง 3 เส้นทางดังนี้

เส้นทาง /Node ซึ่งจะแสดงสตริง “บทช่วยสอนบนโหนด” หากมีการเข้าถึงเส้นทางนี้
เส้นทาง /Angular ซึ่งจะแสดงสตริง “Tutorial on Angular” หากมีการเข้าถึงเส้นทางนี้
เส้นทางเริ่มต้น / ซึ่งจะแสดงสตริง “ยินดีต้อนรับสู่ Guru99 Tutorials”

รหัสพื้นฐานของเราจะยังคงเหมือนเดิมกับตัวอย่างก่อนหน้านี้ ตัวอย่างด้านล่างนี้เป็นส่วนเสริมเพื่อแสดงวิธีการใช้งานการกำหนดเส้นทาง

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
}));

คำอธิบายรหัส:

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

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

เรากำลังใช้ฟังก์ชัน send เพื่อส่งสตริง “Tutorial on Node” กลับไปยังไคลเอนต์หากเลือกเส้นทาง Node
ที่นี่เรากำลังกำหนดเส้นทางถ้า URL http://localhost:3000/Angular ถูกเลือกไว้ในเบราว์เซอร์ เรากำลังแนบฟังก์ชันโทรกลับเข้ากับเส้นทางซึ่งจะถูกเรียกเมื่อเราเรียกดู URL เชิงมุม
เรากำลังใช้ฟังก์ชัน send เพื่อส่งสตริง “Tutorial on Angular” กลับไปยังไคลเอนต์หากเลือกเส้นทาง Angular
นี่คือเส้นทางเริ่มต้นซึ่งถูกเลือกเมื่อเรียกดูเส้นทางของแอปพลิเคชัน – http://localhost:3000- เมื่อเลือกเส้นทางเริ่มต้น ข้อความ "ยินดีต้อนรับสู่ Guru99 Tutorials" จะถูกส่งไปยังลูกค้า

Output:

จากผลลัพธ์ที่ได้

คุณจะเห็นได้ชัดเจนแล้วว่าหากเราเรียกดู URL ของ localhost บนพอร์ต 3000 คุณจะเห็นสตริง 'Welcome to Guru99 Tutorials' แสดงอยู่บนเพจ
เนื่องจากในโค้ดของเรา เราได้กล่าวไว้ว่า URL เริ่มต้นของเราจะแสดงข้อความนี้

จากผลลัพธ์ที่ได้

คุณจะเห็นได้ว่าหากเปลี่ยน URL เป็น /Node ระบบจะเลือกเส้นทาง Node ที่เกี่ยวข้อง และจะแสดงสตริง “Tutorial On Node”

จากผลลัพธ์ที่ได้

คุณจะเห็นได้ว่าหากเปลี่ยน URL เป็น /Angular ระบบจะเลือกเส้นทาง Node ที่เกี่ยวข้องและจะแสดงสตริง “Tutorial On Angular”

ตัวอย่างเว็บเซิร์ฟเวอร์ที่ใช้ express.js

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

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

Jade จะได้รับการติดตั้งผ่านตัวจัดการแพ็กเกจ Node ซึ่งสามารถทำได้โดยดำเนินการตามบรรทัดต่อไปนี้ในบรรทัดคำสั่ง

npm ติดตั้งหยก

คำสั่งดังกล่าวร้องขอให้ตัวจัดการแพ็คเกจโหนดดาวน์โหลดโมดูลหยกที่จำเป็นและติดตั้งตามนั้น

หมายเหตุ: ในเวอร์ชันล่าสุดของ Node jade ได้เลิกใช้แล้ว ให้ใช้ปั๊กแทน

ลองใช้เฟรมเวิร์ก Jade ที่เพิ่งติดตั้งใหม่และสร้างเทมเพลตพื้นฐาน

ขั้นตอน 1) ขั้นตอนแรกคือการสร้างเทมเพลตหยก สร้างไฟล์ชื่อ index.jade และใส่โค้ดด้านล่าง ตรวจสอบให้แน่ใจว่าได้สร้างไฟล์ในโฟลเดอร์ “views”

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

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

คำอธิบายรหัส:

สิ่งแรกที่ต้องระบุในแอปพลิเคชันคือ “view engine” ที่จะใช้ในการแสดงเทมเพลต เนื่องจากเราจะใช้หยกเพื่อแสดงเทมเพลตของเรา เราจึงระบุสิ่งนี้ตามนั้น
ฟังก์ชั่นเรนเดอร์ใช้ในการเรนเดอร์หน้าเว็บ ในตัวอย่างของเรา เรากำลังแสดงเทมเพลต (index.jade) ที่สร้างขึ้นก่อนหน้านี้
เรากำลังส่งค่าของ "Guru99" และ "ยินดีต้อนรับ" ไปยังพารามิเตอร์ "ชื่อ" และ "ข้อความ" ตามลำดับ ค่าเหล่านี้จะถูกแทนที่ด้วยพารามิเตอร์ 'ชื่อ' และ 'ข้อความ' ที่ประกาศในเทมเพลต index.jade

Output:

จากผลลัพธ์ที่ได้

เราจะเห็นว่าชื่อของเพจถูกตั้งเป็น “Guru99” และส่วนหัวของเพจถูกตั้งเป็น “ยินดีต้อนรับ”
นี่เป็นเพราะเทมเพลต Jade ที่ถูกเรียกใช้ในแอปพลิเคชันโหนด js ของเรา

สรุป

Express Framework เป็นเฟรมเวิร์กทั่วไปที่ใช้สำหรับการพัฒนาแอปพลิเคชัน Node js เฟรมเวิร์ก Express สร้างขึ้นบนเฟรมเวิร์ก node.js และช่วยในการพัฒนาแอปพลิเคชันบนเซิร์ฟเวอร์แบบติดตามอย่างรวดเร็ว
เส้นทางถูกใช้เพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังส่วนต่างๆ ของเว็บแอปพลิเคชันตามคำขอ การตอบสนองสำหรับแต่ละเส้นทางสามารถเปลี่ยนแปลงได้ขึ้นอยู่กับสิ่งที่ต้องแสดงให้ผู้ใช้เห็น
เทมเพลตสามารถใช้เพื่อแทรกเนื้อหาได้อย่างมีประสิทธิภาพ Jade เป็นหนึ่งในเอ็นจิ้นการสร้างเทมเพลตยอดนิยมที่ใช้ในแอปพลิเคชัน Node.js

Express.js คืออะไร?

การติดตั้งและใช้งาน Express

บทความที่เกี่ยวข้อง

เส้นทางคืออะไร?

ตัวอย่างเว็บเซิร์ฟเวอร์ที่ใช้ express.js

สรุป

ลงทะเบียนเพื่อรับจดหมายข่าว