ในการพัฒนาเว็บ การแสดงข้อมูลจากเซิร์ฟเวอร์บนเว็บเพจเป็นสิ่งสำคัญสำหรับการสร้างประสบการณ์ผู้ใช้แบบโต้ตอบและไดนามิก นี่คือที่ Template Engine มา Express.js ในการช่วยเหลือ A Template Engine เป็นเครื่องมือที่ช่วยให้คุณสร้างเทมเพลต HTML แบบไดนามิกโดยการแทรกข้อมูลจากเซิร์ฟเวอร์ลงในโค้ด HTML
ทำไมต้องใช้ Template Engine ?
Template Engine ช่วยแยกมาร์กอัป HTML ออกจากข้อมูลที่มาจากเซิร์ฟเวอร์ ซึ่งช่วยให้คุณจัดการโค้ด HTML ได้ง่ายขึ้นโดยไม่ต้องฝังข้อมูลลงในโค้ดแต่ละบรรทัด คุณจะสร้าง "ตัวยึดตำแหน่ง" หรือ "แท็ก" แทนภายในโค้ด HTML ซึ่ง Template Engine จะเติมข้อมูลฝั่งเซิร์ฟเวอร์ในภายหลัง
ใช้ Template Engine ใน Express.js
Express.js รองรับต่างๆ template engine เช่น Pug(เดิมชื่อ Jade) และ EJS(Embedded JavaScript) ด้านล่างนี้เป็นตัวอย่างของการใช้ Pug และ EJS ใน Express.js:
การใช้ปั๊ก Template Engine
ติดตั้ง Pug: คุณต้องติดตั้ง pug
แพ็คเกจผ่าน npm
Configure Template Engine: ในไฟล์คอนฟิกูเรชันของแอปพลิเคชันของคุณ(เช่น app.js
) กำหนด Pug เป็นไฟล์ template engine.
สร้างเทมเพลต Pug: สร้างไฟล์ Pug ใน views
ไดเร็กทอรี ตัวอย่างเช่น สร้าง index.pug
ไฟล์:
การจัดการเส้นทางและการแสดงข้อมูล: ในการ จัดการ เส้นทาง คุณสามารถส่งข้อมูลไปยังส่วนที่ template engine ใช้ res.render()
การใช้ EJS Template Engine
ติดตั้ง EJS: ติดตั้ง ejs
แพ็คเกจผ่าน npm
กำหนดค่า Template Engine: กำหนด EJS เป็นการกำหนด template engine ค่าแอปพลิเคชันของคุณ
สร้างเทมเพลต EJS: สร้างไฟล์ EJS ใน views
ไดเร็กทอรี ตัวอย่างเช่น สร้าง index.ejs
ไฟล์:
การจัดการเส้นทางและการแสดงข้อมูล: ในการจัดการเส้นทาง ให้ส่งข้อมูลไปยังส่วน ที่ template engine ใช้ res.render()
บทสรุป
การใช้ Template Engine in Express.js ช่วยให้คุณสร้างหน้าเว็บแบบไดนามิกและแสดงข้อมูลจากเซิร์ฟเวอร์บนเบราว์เซอร์ของผู้ใช้ ด้วยการใช้ Pug, EJS หรืออื่น ๆ template engine คุณสามารถสร้างหน้าเว็บแบบโต้ตอบและยืดหยุ่นที่ให้ประสบการณ์ผู้ใช้ที่ดีขึ้นและเพิ่มประสิทธิภาพการจัดการโค้ด HTML และข้อมูล