โพสต์นี้จะครอบคลุมถึง:

• Node.js คืออะไร?
• Node.js ทำงานอย่างไร?
• จะติดตั้ง Node.js บน Windows ได้อย่างไร?
• จะติดตั้ง Node.js บน Mac ได้อย่างไร?
• จะติดตั้ง Node.js บน Linux ได้อย่างไร?
• จะเขียนโปรแกรม Node.js แรกได้อย่างไร (สวัสดีชาวโลก)
• จะนำเข้าโมดูลโหนดคอร์ได้อย่างไร
• จะติดตั้งแพ็คเกจ NPM ได้อย่างไร
• จะเริ่มต้นใช้งาน Express JS ได้อย่างไร
• วิธีเรนเดอร์ไฟล์สแตติกใน Express
• วิธีเรนเดอร์ไฟล์ไดนามิกใน Express
• บทสรุป

Node.js คืออะไร?

คำค้นหาที่พบบ่อยที่สุดในเครื่องมือค้นหาของ Google คือ Node.js คืออะไร? คำถามยอดนิยมคือ Node.js เป็นภาษาโปรแกรมหรือไม่? มันเป็นกรอบหรือไม่? มันเป็นห้องสมุดเหรอ? เพื่อให้ง่ายขึ้น คุณสามารถกำหนด Node.js เป็นสภาพแวดล้อมรันไทม์ที่ไลบรารี JS รองรับได้

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

Node.js ค่อนข้างแตกต่างจากภาษาโปรแกรมฝั่งเซิร์ฟเวอร์อื่นๆ โปรดทราบว่าไม่ใช่เซิร์ฟเวอร์แบ็กเอนด์หรือเว็บเซิร์ฟเวอร์ เดี่ยวก็ไม่สามารถทำอะไรได้นอกจากชุดของโมดูลช่วยในการสร้างโครงการที่ปรับขนาดได้ มันทำงานบนเซิร์ฟเวอร์เดียวและไม่สร้างเธรดเพิ่มเติมสำหรับทุกคำขอเดียว นอกจากนี้ กระบวนทัศน์ที่ไม่บล็อกยังถูกใช้เพื่อเขียนไลบรารี NodeJS ส่วนใหญ่ ดังนั้นพฤติกรรมการบล็อกจึงเป็นข้อยกเว้นแทนที่จะเป็นกฎ พื้นฐาน I/O แบบอะซิงโครนัสเป็นคุณสมบัติของไลบรารีมาตรฐานของ Node.js ที่จะป้องกันไม่ให้โค้ด JavaScript ถูกบล็อก

เมื่อ Node.js ดำเนินการ I/O เช่น ดำเนินการ crud ผ่านเครือข่าย จะไม่บล็อกเธรดและทำให้วงจร CPU เสียเปล่าที่รอการตอบสนอง แต่จะกลับมาดำเนินการต่อหลังจากได้รับคำตอบแทน

ตัวอย่างง่ายๆ ของ Node.js

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

ในรหัสนี้:

• “const http = need('http')” นำเข้าโมดูล http ซึ่งช่วยในการสร้างเซิร์ฟเวอร์ HTTP และจัดการฟังก์ชันที่เกี่ยวข้อง
• “const serverPort = 3000” กำหนดพอร์ตที่เซิร์ฟเวอร์จะทำงาน
• “const server = http.createServer((req, res) => {})“ ใช้เมธอด create server ของโมดูล http เพื่อสร้างเซิร์ฟเวอร์ที่มีฟังก์ชัน callback โดยรับอาร์กิวเมนต์สองตัว อันหนึ่งคือคำขอและอีกอันคือการตอบสนองที่ จะถูกสร้างขึ้นสำหรับการร้องขอ
• ภายในฟังก์ชันการโทรกลับ รหัสสถานะ HTTPS จะถูกตั้งค่าเป็น 200 และประเภทเนื้อหาการตอบสนองจะถูกตั้งค่าเป็นข้อความธรรมดา นอกจากนี้ เว็บเซิร์ฟเวอร์ยังแสดงข้อความชื่อ “คู่มือเริ่มต้นใช้งาน Node.js”
• “server.listen(serverPort, () =>{})” ถูกเรียกเพื่อเริ่มต้นเซิร์ฟเวอร์และฟังคำขอที่เข้ามาทั้งหมดบนเซิร์ฟเวอร์ ฟังก์ชันการโทรกลับจะถูกเรียกหลังจากการสตาร์ทเซิร์ฟเวอร์ และแสดงข้อความในเทอร์มินัลเพื่อแสดงพอร์ตที่เซิร์ฟเวอร์เริ่มทำงาน

เอาท์พุต

ใช้บรรทัดด้านล่างเพื่อดำเนินการ:

ที่ไหน แอพ js คือชื่อแอปพลิเคชัน

ผลลัพธ์ในเทอร์มินัลคือ:

สิ่งนี้บ่งชี้ว่าเซิร์ฟเวอร์เริ่มทำงานแล้วและกำลังรับฟังคำขอที่เข้ามา หากต้องการตรวจสอบการตอบสนองบนเซิร์ฟเวอร์ให้ใช้ลิงก์ต่อไปนี้ “ http://localhost:3000/ -

ผลลัพธ์ทางฝั่งเซิร์ฟเวอร์จะแสดงเป็น:

Node.js ทำงานอย่างไร?

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

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

เพื่อทำความเข้าใจและเข้าใจแนวคิดโดยละเอียดของ Event loops ใน Node.js เราได้เขียน บทความเฉพาะ ในหัวข้อนี้

ข้อดีของ Node.js

ข้อดีที่สำคัญบางประการของ Node.js คือ:

• ความสามารถในการขยายขนาด : ลดความยุ่งยากในการเติบโตของแอปแบบสองทิศทาง: แนวนอนและแนวตั้ง
• เว็บแอปแบบเรียลไทม์ : ดีที่สุดสำหรับงานที่ต้องการการซิงโครไนซ์ที่รวดเร็วและป้องกันการโหลดบน HTTP มากเกินไป
• ความเร็ว : ทำงานได้อย่างรวดเร็ว เช่น การใส่ข้อมูลเข้าหรือออกจากฐานข้อมูล การเชื่อมโยงกับเครือข่าย หรือการจัดการกับไฟล์
• ง่ายต่อการเรียนรู้ : Node.js นั้นง่ายต่อการเรียนรู้สำหรับผู้เริ่มต้นเพราะใช้ Javascript
• ประโยชน์ของการแคช : จัดเก็บเพียงส่วนเดียว ดังนั้นจึงไม่จำเป็นต้องรันโค้ดอีกครั้งเมื่อถูกถาม แคชเป็นหน่วยความจำที่รวดเร็วและช่วยประหยัดเวลาในการโหลดเพิ่มเติม
• การสตรีมข้อมูล : จัดการคำขอ HTTP และการตอบกลับตามเหตุการณ์ที่แตกต่างกันซึ่งช่วยเพิ่มประสิทธิภาพ
• โฮสติ้ง : ง่ายต่อการวางบนเว็บไซต์เช่น PaaS และ Heroku
• การสนับสนุนองค์กร : ใช้โดยธุรกิจขนาดใหญ่เช่น Netflix, SpaceX, Walmart เป็นต้น

จะติดตั้ง Node.js บน Windows ได้อย่างไร?

เนื่องจากเรากำลังเริ่มพัฒนาแอปพลิเคชัน Node.js หากเรามีสภาพแวดล้อม Windows จะต้องตั้งค่าสภาพแวดล้อม Node.js ปฏิบัติตามคำแนะนำทีละขั้นตอนด้านล่างเพื่อตั้งค่าสภาพแวดล้อม Node.js ในระบบปฏิบัติการ Windows

ขั้นตอนที่ 1: ดาวน์โหลดแพ็คเกจตัวติดตั้ง Node.js

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

เพียงคลิกที่ Windows Installer และการดาวน์โหลดจะเริ่มขึ้น เวอร์ชันที่ดาวน์โหลดจะเป็น 64 บิต และแนะนำให้ใช้เวอร์ชัน LTS (Long Term Support) เรียกใช้ตัวทำแพ็คเกจการติดตั้งเพื่อติดตั้ง Node.js

ขั้นตอนที่ 2: ติดตั้งโมดูล Node.js และ NPM บนคอมพิวเตอร์ของคุณ

หน้าจอต่อไปนี้จะปรากฏขึ้น ให้คลิกที่ปุ่มถัดไป:

หลังจากคลิกถัดไป หน้าต่างใหม่จะปรากฏขึ้นโดยที่ผู้ใช้จะถูกขอให้ป้อนเส้นทางที่ต้องการดาวน์โหลดไลบรารี Node.js msi

ตอนนี้ในหน้าต่างด้านล่างเลือกเส้นทางที่ต้องการแล้วคลิกที่ปุ่มถัดไป:

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

สุดท้ายคลิกที่ปุ่มติดตั้งเพื่อเริ่มต้นการเดินทาง

ขั้นตอนที่ 3: ตรวจสอบเวอร์ชันที่ติดตั้ง

การทราบว่ามีการติดตั้งเวอร์ชันใดเป็นสิ่งสำคัญ ดังนั้นในการตรวจสอบ ให้ไปที่แถบค้นหาของ Windows แล้วพิมพ์ Command Prompt:

หลังจากหน้าต่างพรอมต์คำสั่งเปิดขึ้น ให้พิมพ์คำสั่งสองคำสั่งเพื่อตรวจสอบ

เวอร์ชันของ Node.js

สามารถตรวจสอบเวอร์ชัน Node.js ได้โดยใช้คำสั่งต่อไปนี้ในพร้อมท์คำสั่ง:

เวอร์ชันที่ติดตั้งจะปรากฏขึ้น

เวอร์ชั่น เอ็นพีเอ็ม

สำหรับการตรวจสอบเวอร์ชัน npm ให้ใช้คำสั่งต่อไปนี้:

เวอร์ชันสำหรับ npm จะปรากฏในเทอร์มินัล

ตอนนี้คุณสามารถเริ่มพัฒนาแอปพลิเคชันด้วยการตั้งค่าสภาพแวดล้อม Node.js ได้แล้ว

ผู้ใช้ทุกคนไม่ได้ใช้ Windows ดังนั้นจึงเป็นที่พึงปรารถนาที่จะตอบสนองความต้องการของทุกคน ด้านล่างนี้เป็นขั้นตอนการติดตั้ง Node.js บน Mac

จะติดตั้ง Node.js บน Mac ได้อย่างไร?

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

ขั้นตอนที่ 1: ดาวน์โหลด Package Manager สำหรับ Mac

เยี่ยมชมเว็บไซต์อย่างเป็นทางการของ Node และดาวน์โหลด MacOSInstaller ของ NodeJS:

https://nodejs.org/en/download/current

คลิกที่ปุ่มที่ระบุในหน้าจอด้านบนเพื่อเริ่มการดาวน์โหลด

ผู้ใช้สามารถระบุตำแหน่งที่จะติดตั้งได้

ขั้นตอนที่ 2: ติดตั้งไฟล์ Node.js .pkg

เรียกใช้ไฟล์ตัวติดตั้งและปฏิบัติตามคำแนะนำในการติดตั้ง:

คลิกปุ่ม “ติดตั้ง” และการติดตั้ง Node.js จะเริ่มต้นขึ้น

หลังจากติดตั้ง NodeJS เสร็จแล้ว จะแสดงข้อมูลสรุปดังนี้

คลิกปุ่ม “ปิด” เพื่อสิ้นสุดการติดตั้ง

ขั้นตอนที่ 3: ตรวจสอบการติดตั้งและเวอร์ชันของ Node.js

สำหรับการตรวจสอบว่าติดตั้ง Node.js แล้ว และตรวจสอบเวอร์ชัน ให้ใช้คำสั่งต่อไปนี้:

ขั้นตอนที่ 4: อัปเกรด NPM ทั่วโลก

ดำเนินการคำสั่งที่พิมพ์ด้านล่างเพื่ออัปเกรด NPM สำหรับผู้ใช้ระบบทั้งหมดโดยใช้แฟล็ก “–global”:

ขั้นตอนที่ 5: ตั้งค่าเส้นทางโหนดเป็นตัวแปร $PATH

รันคำสั่งต่อไปนี้เพื่อตั้งค่า PATH Variable สำหรับ NodeJS:

บันทึก: ในคำสั่งข้างต้น “/usr/local/bin” คือตำแหน่งที่ติดตั้ง NodeJS ตามค่าเริ่มต้น

ขั้นตอนที่ 6: อัปเดตรายละเอียด PATH ใน “.bash\_profile”

เพิ่มรายละเอียดเส้นทางไปที่ “~/.bash\_profile” โดยใช้คำสั่งที่ระบุด้านล่าง:

ขั้นตอนที่ 7: อัปเดต ~/.bashrc

เพื่อให้สามารถใช้งานได้สำหรับผู้ใช้ทุกคน ให้ดำเนินการคำสั่งด้านล่าง:

แค่นั้นแหละเกี่ยวกับการติดตั้ง NodeJS และการตั้งค่าตัวแปร PATH ใน MacOS สำหรับ NodeJS

จะติดตั้ง Node.js บน Linux ได้อย่างไร?

หากต้องการติดตั้ง Node.js บนระบบปฏิบัติการ Linux ที่ใช้ Debian ให้ทำตามขั้นตอนทีละขั้นตอนด้านล่าง:

ขั้นตอนที่ 1: เปิดเทอร์มินัล

ขั้นแรก ให้เปิดเครื่องเทอร์มินัลโดยใช้ปุ่มลัดแป้นพิมพ์ “CTRL+ALT+T”:

ขั้นตอนที่ 2: อัปเดตและอัปเกรดระบบ

ดำเนินการคำสั่งที่พิมพ์ด้านล่างเพื่ออัปเดตและอัปเกรดที่เก็บของระบบ:

ขั้นตอนที่ 3: ติดตั้ง Node โดยใช้ apt package manager

หลังจากอัปเดตที่เก็บของระบบแล้ว ให้ติดตั้ง Node.js จากตัวจัดการแพ็คเกจ APT อย่างเป็นทางการโดยใช้คำสั่ง:

ขั้นตอนที่ 4: ตรวจสอบการติดตั้งโหนด

เมื่อติดตั้งแล้ว ให้ตรวจสอบการติดตั้งโดยตรวจสอบเวอร์ชันของ Node.js โดยใช้คำสั่งด้านล่าง:

ขั้นตอนที่ 5: ติดตั้ง NPM

แนวทางปฏิบัติที่ดีในการติดตั้ง NPM พร้อมกับ NodeJS เนื่องจากต้องใช้เวลาส่วนใหญ่ NPM ยังมีอยู่ในที่เก็บ APT อย่างเป็นทางการและสามารถติดตั้งได้โดยใช้คำสั่งที่กำหนด:

ขั้นตอนที่ 6: ตรวจสอบการติดตั้ง NPM

ตรวจสอบเวอร์ชัน NPM ด้วยเพื่อตรวจสอบการติดตั้ง NPM โดยใช้คำสั่งต่อไปนี้:

นี่คือวิธีที่คุณสามารถติดตั้ง Node และ NPM บนระบบปฏิบัติการ Linux ที่ใช้ Debian

จะเขียนโปรแกรม Node.js แรกได้อย่างไร (สวัสดีชาวโลก)

ทุกอย่างได้รับการตั้งค่าให้เริ่มต้นในการพัฒนาแอปพลิเคชันใน Node.js มาสร้างโปรแกรมแรกของเราที่ค่อนข้างธรรมดากันดีกว่า เมื่อใดก็ตามที่ใครก็ตามเริ่มเรียนรู้ภาษาหรือกรอบงานใหม่ โปรแกรมแรกมักจะพิมพ์คำว่า “Hello World” การกล่าวสวัสดีกับทุกคนด้วยวิธีที่แตกต่างออกไปถือเป็นความรู้สึกและบอกพวกเขาเกี่ยวกับการเริ่มต้นการเดินทางครั้งใหม่ของเรา ด้านล่างนี้เป็นโค้ดสำหรับเริ่มต้น:

ในการรันโค้ดสคริปต์นี้ให้ใช้คำสั่งต่อไปนี้:

เอาท์พุต

คำสั่ง Hello World จะถูกบันทึกลงในเทอร์มินัล:

จะนำเข้าโมดูลโหนดคอร์ได้อย่างไร

ผู้ใช้ต้องใช้ฟังก์ชัน 'require()' เพื่อใช้โมดูลที่ต้องการเพื่อทำงานในโค้ดสคริปต์ ตัวอย่างเช่น หากจะใช้โมดูล “fs” (ระบบไฟล์) บรรทัดรหัสการนำเข้าจะเป็น:

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

ตอนนี้เรามาสร้างตัวอย่างโค้ดง่ายๆ ที่มีการนำเข้าโมดูลและฟังก์ชันการทำงานของโมดูลนั้นถูกใช้ในสคริปต์โค้ด

ตัวอย่าง: การใช้โมดูล HTTP

ในรหัสนี้:

• “const http = need('http')” นำเข้าเนื้อหาของโมดูล http และเก็บไว้ในตัวแปรคงที่ “http”
• “const httpServer = http.createServer((req, res) =>” สร้างเซิร์ฟเวอร์ HTTP แบบธรรมดาและเพิ่มข้อความ Hello World พร้อมกับ HTML พื้นฐาน วิธีการ createServer สร้างเซิร์ฟเวอร์ที่มีสองอาร์กิวเมนต์ หนึ่งคือคำขอบนเซิร์ฟเวอร์และ ประการที่สองคือการตอบสนองที่สร้างขึ้นสำหรับคำขอนั้น
• “httpServer.listen(3000, () =>” ระบุพอร์ต 3000 บนโลคัลโฮสต์และบันทึกข้อความไปยังเทอร์มินัลว่าเซิร์ฟเวอร์ทำงานอยู่และกำลังฟังบนพอร์ต 3000

หากต้องการรันแอป Node ให้รันไฟล์ JS ด้วยคำสั่ง node ดังที่แสดงด้านล่าง:

โดยที่ App.js คือชื่อไฟล์

เอาท์พุต

ข้อความในเทอร์มินัลเมื่อรันโค้ดนี้จะเป็น:

ตอนนี้เราต้องตรวจสอบผลลัพธ์ทางฝั่งเซิร์ฟเวอร์และตรวจสอบว่าข้อความ 'Hello World' พิมพ์อยู่ที่นั่นหรือไม่:

พิมพ์ข้อความบนเซิร์ฟเวอร์เรียบร้อยแล้ว และมีการปรับปรุงแบบอักษรโดยใช้ HTML พื้นฐานบางอย่าง

Node.js: โมดูลหลัก

โมดูลบางส่วนของ Node.js คือ:

• http: อนุญาตให้สร้างเซิร์ฟเวอร์ HTTP ใน Node.js
• ยืนยัน: ชุดของฟังก์ชันการยืนยันจะช่วยในการทดสอบเป็นหลัก
• FS: ช่วยให้สามารถจัดการการทำงานของไฟล์ได้
• เส้นทาง: ชุดของวิธีการจัดการกับเส้นทางของไฟล์
• กระบวนการ: มันให้ข้อมูลและการควบคุมเกี่ยวกับกระบวนการ Node.js ปัจจุบัน
• คุณ: ให้ข้อมูลเกี่ยวกับระบบปฏิบัติการ
• สตริงการสืบค้น: เครื่องมือที่ใช้สำหรับการแยกวิเคราะห์และการจัดรูปแบบสตริงการสืบค้น URL
• URL: โมดูลนี้มีเครื่องมือสำหรับการแก้ไข URL และการแยกวิเคราะห์

จะติดตั้งแพ็คเกจ NPM ได้อย่างไร

NPM (Node Package Manager) ช่วยในการจัดการและใช้งานไลบรารีหรือเครื่องมือของบุคคลที่สามในโครงการ Node.js ทำตามขั้นตอนด้านล่างเพื่อติดตั้งแพ็คเกจ NPM

ขั้นตอนที่ 1: ติดตั้งแพ็คเกจที่ต้องการ

มาติดตั้งโมดูลด่วนซึ่งค่อนข้างธรรมดาสำหรับการพัฒนาเว็บแอปพลิเคชันใน Node.js ในการติดตั้ง express ให้ใช้คำสั่ง:

บรรทัดคำสั่งนี้จะติดตั้งโมดูลด่วนในโฟลเดอร์โครงการของคุณ

ขั้นตอนที่ 2: บันทึกโมดูลลงใน Package.json

NPM จะอัปเดตไฟล์ package.json โดยอัตโนมัติโดยมีการขึ้นต่อกันใหม่ หากคุณต้องการบันทึกอย่างชัดเจนเป็นการพัฒนาของการขึ้นต่อกันของโปรเจ็กต์ ให้ใช้แฟล็ก –save-dev หรือ –save

เหตุใดแพ็คเกจ NPM จึงมีความสำคัญ

แพ็คเกจ NPM มีความสำคัญมากในสภาพแวดล้อมการพัฒนา Node.js ด้านล่างนี้คือสาเหตุที่เป็นไปได้:

• การนำรหัสกลับมาใช้ใหม่: แพ็คเกจ NPM จะเก็บบันทึกโค้ดที่สามารถใช้งานได้อีกครั้ง พวกเขาประหยัดเวลาของนักพัฒนาด้วยการนำเสนอวิธีการสำเร็จรูปที่ได้รับการปรับปรุงให้เหมาะสม
• การจัดการการพึ่งพา: NPM ทำให้ง่ายต่อการจัดการข้อกำหนดของโครงการ รายการข้อกำหนดของโปรเจ็กต์อยู่ในไฟล์ package.json ซึ่งทำให้ใช้งานและแชร์ข้อกำหนดของโปรเจ็กต์ได้ง่ายขึ้น
• การมีส่วนร่วมของชุมชน: NPM ช่วยสร้างนักพัฒนากลุ่มใหญ่ที่แบ่งปันงานของตนให้ผู้อื่นใช้ในแพ็คเกจซอฟต์แวร์ฟรีมากมาย การมีส่วนร่วมร่วมกันนี้ช่วยเร่งระยะเวลาการพัฒนาแอปพลิเคชัน
• การควบคุมเวอร์ชัน: NPM ให้คุณจดเวอร์ชันแพ็คเกจสำหรับโปรเจ็กต์ของคุณ ช่วยให้มั่นใจในการทำงานและการจัดการการเปลี่ยนแปลงที่จำเป็นได้อย่างราบรื่น
• ประสิทธิภาพและความสม่ำเสมอ: การใช้แพ็คเกจที่มีประสิทธิภาพจะช่วยเพิ่มประสิทธิภาพของโครงการและช่วยรักษาความสอดคล้องของโค้ดทั่วทั้งทีมพัฒนา

แค่นั้นแหละ. ไม่เพียงแต่คุณได้เรียนรู้วิธีการติดตั้งแพ็คเกจที่ต้องการ แต่ยังเข้าใจว่าทำไมแพ็คเกจเหล่านี้จึงจำเป็นในสภาพแวดล้อมการพัฒนา Node.js ของคุณ

จะเริ่มต้นใช้งาน Express JS ได้อย่างไร

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

ขั้นตอนที่ 1: การติดตั้ง Express

ในการติดตั้ง Express ให้ใช้คำสั่งต่อไปนี้ในเทอร์มินัล:

โมดูลด่วนจะถูกติดตั้งหากมีการติดตั้งไว้แล้ว คำสั่งนี้จะอัพเดตโมดูล

ขั้นตอนที่ 2: ทดสอบโมดูลด่วนในแอปพลิเคชัน

ขั้นตอนข้างต้นจะติดตั้ง express ในโฟลเดอร์แพ็คเกจและผู้ใช้สามารถใช้โมดูลโดยการนำเข้าในโค้ดสคริปต์โดยใช้โมดูล “require” เป็น

มาทดสอบโค้ดสคริปต์ง่ายๆ ที่ใช้ฟังก์ชันการทำงานของโมดูล Express:

ในโค้ดข้างต้น:

• - const express = ต้องการ ('ด่วน') ” นำเข้าโมดูล express และเก็บไว้ในตัวแปรคงที่ “express” ซึ่งเราสามารถใช้ฟังก์ชันที่เกี่ยวข้องกับไลบรารีนี้ได้
• - แอป const = ด่วน () ” ใช้เพื่อกำหนดแอปพลิเคชันด่วน
• “app.get('/', (req, res) =>' กำหนดเส้นทางสำหรับแอปพลิเคชันด่วนเพื่อส่งการตอบกลับ “สวัสดีเอ็กซ์เพรส” ไปยังแอปพลิเคชันด่วน
• พอร์ต 3000 ถูกระบุไว้ในตัวแปรคงที่ชื่อ 'พอร์ต' บนโลคัลโฮสต์
• “app.listen(พอร์ต () =>” สร้างตัวฟังบนพอร์ต 3000 และบันทึกข้อความบนเทอร์มินัลว่าเซิร์ฟเวอร์กำลังฟังบนพอร์ตที่ระบุ

เอาท์พุต

สำหรับการรันแอปพลิเคชันนี้ให้ใช้คำสั่งด้านล่าง:

ผลลัพธ์ในเทอร์มินัลจะปรากฏเป็น

ดังนั้นเซิร์ฟเวอร์จึงทำงานและรับฟังบนพอร์ต 3000 ของโฮสต์ภายในเครื่อง การเข้าถึงลิงก์นั้นในเบราว์เซอร์จะแสดงผลลัพธ์เป็น

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

วิธีเรนเดอร์ไฟล์สแตติกใน Express

ใน Express ฟังก์ชัน express.static() ใช้สำหรับเรนเดอร์ไฟล์คงที่ เช่น HTML, CSS, รูปภาพ ฯลฯ ด้านล่างนี้คือกระบวนการเรนเดอร์ไฟล์คงที่ใน Express

ขั้นตอนที่ 1: สร้างโครงการ

ก่อนเริ่มต้นตรวจสอบให้แน่ใจว่าได้ติดตั้ง express แล้ว หากไม่เป็นเช่นนั้น คุณสามารถรันคำสั่งต่อไปนี้:

คำสั่งนี้จะติดตั้งโมดูลด่วนแบบโลคัลในโฟลเดอร์ node_modules และอัพเดตในไฟล์ package.json

ขั้นตอนที่ 2: สร้างไฟล์สำหรับไฟล์คงที่

ประการที่สอง สร้างโฟลเดอร์ในไดเร็กทอรีการทำงาน สร้างโฟลเดอร์ชื่อ public เพื่อจัดเก็บไฟล์คงที่ที่จะแสดงผล วางไฟล์คงที่ HTML และ CSS ทั้งหมดในไดเร็กทอรีนี้เพื่อแสดงผล

ขั้นตอนที่ 3: การตั้งค่า Express เพื่อแสดงไฟล์แบบคงที่

ใช้เมธอด express.static() เพื่อระบุไดเร็กทอรีสำหรับไฟล์คงที่ที่ผู้ใช้ต้องการแสดงผล

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

สคริปต์ Node.js

ในรหัสนี้:

• “const ด่วน = ต้องการ ('ด่วน')” นำเข้าโมดูลด่วนในสคริปต์เพื่อใช้ฟังก์ชันการทำงาน
• “แอป const = ด่วน()” เริ่มแอปพลิเคชัน
• “app.use(express.static('สาธารณะ'))” ระบุไดเร็กทอรีเพื่อดึงไฟล์และจัดเตรียมแอปพลิเคชันด่วนเพื่อใช้และแสดงผล
• พอร์ต 3000 ระบุไว้สำหรับแอปพลิเคชันด่วน
• “:app.listen(พอร์ต () =>” บ่งชี้ว่าเซิร์ฟเวอร์ทำงานอยู่และกำลังฟังที่พอร์ตที่ระบุโดยการบันทึกข้อความ

สคริปต์ HTML

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

เอาท์พุต

ตอนนี้ให้รันสคริปต์ Node.js ด้วยโค้ดต่อไปนี้:

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

เปิดพอร์ตโฮสต์ภายในเครื่อง 3000 บนเบราว์เซอร์เพื่อดูสคริปต์โค้ด HTML ที่แสดงผลโดยโมดูล Express

นั่นคือทั้งหมดเพื่อแสดงไฟล์แบบคงที่ในรูปแบบด่วน ตอนนี้เรามาดูวิธีการเรนเดอร์ไฟล์ไดนามิกกัน

วิธีเรนเดอร์ไฟล์ไดนามิกใน Express

ผู้ใช้สามารถเรนเดอร์ไฟล์ไดนามิกใน Express โดยใช้เครื่องมือเทมเพลตเพื่อสร้าง HTML ไดนามิกตามข้อมูล เทมเพลตที่ใช้ด้านล่างคือ EJS (Embedded Javascript) ซึ่งค่อนข้างนิยมใช้ในการเรนเดอร์ไฟล์ไดนามิก

ขั้นตอนที่ 1: ติดตั้ง EJS

ใช้คำสั่งต่อไปนี้เพื่อติดตั้ง EJS ในโฟลเดอร์โปรเจ็กต์ของคุณ

ขั้นตอนที่ 2: ตั้งค่า Express ด้วย EJS

ตั้งค่าเทมเพลต EJS เป็นกลไกการดูในไฟล์ Node.js ของคุณ

การดำเนินการที่ดำเนินการโดยโค้ดข้างต้นคือ:

• “const express = need('express')” นำเข้าโมดูลด่วนจากโมดูลโหนด
• “const app = express()” สร้างอินสแตนซ์สำหรับแอปพลิเคชันด่วน
• “app.set('view engine', 'ejs')” กำหนดค่า express ด้วยเทมเพลต ejs เพื่อเรนเดอร์ไฟล์แบบไดนามิก
• “app.use(express.static('public'))” ช่วยให้สามารถให้บริการไฟล์คงที่ที่จัดเก็บไว้ในโฟลเดอร์สาธารณะของโครงการ Node
• “app.get('/user/:id', (req, res) => {…})” กำหนดคำพูด ar ที่รับฟังคำขอ
• “res.render('user', { user: userData })” เรนเดอร์ไฟล์เทมเพลต EJS
• “app.listen(PORT, () => {…})” เริ่มต้นเซิร์ฟเวอร์บนพอร์ต 3000 และผู้ใช้สามารถพิมพ์ “ http://localhost:3000/user/123 ” ในเบราว์เซอร์

ขั้นตอนที่ 3: เทมเพลต EJS

ไดเร็กทอรีชื่อ 'views' ถูกสร้างขึ้นในไดเร็กทอรีโปรเจ็กต์ และภายในโฟลเดอร์นี้จะสร้างไฟล์เทมเพลต EJS 'user.ejs' ไฟล์นี้จะเก็บเนื้อหาไดนามิกที่ผู้ใช้ต้องการแสดงผล วางรหัสต่อไปนี้ในไฟล์นี้

เนื่องจากเป้าหมายหลักคือการแสดงผลเนื้อหาไฟล์แบบไดนามิก ดังนั้นจึงมีการใช้เฉพาะโค้ดส่วนหน้าที่จำเป็นเท่านั้น

ขั้นตอนที่ 4: เริ่มเซิร์ฟเวอร์

ขณะนี้ผู้ใช้สามารถเริ่มแอปพลิเคชันด่วนได้โดยใช้ข้อมูลโค้ดต่อไปนี้:

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

ตอนนี้ผู้ใช้สามารถใช้ลิงค์ได้ http://localhost:3000/user/123 ในเบราว์เซอร์และเนื้อหาจะแสดงผลแบบไดนามิกเป็น

นั่นคือทั้งหมดเพื่อแสดงเนื้อหาไฟล์แบบไดนามิกโดยใช้โมดูลด่วนใน Node.js

บทสรุป

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