close

ใช้ Template Engine ใน Express.js

ในการพัฒนาเว็บ การแสดงข้อมูลจากเซิร์ฟเวอร์บนเว็บเพจเป็นสิ่งสำคัญสำหรับการสร้างประสบการณ์ผู้ใช้แบบโต้ตอบและไดนามิก นี่คือที่ 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 

npm install pug --save

Configure Template Engine: ในไฟล์คอนฟิกูเรชันของแอปพลิเคชันของคุณ(เช่น app.js) กำหนด Pug เป็นไฟล์ template engine.

app.set('view engine', 'pug');

สร้างเทมเพลต Pug: สร้างไฟล์ Pug ใน views ไดเร็กทอรี ตัวอย่างเช่น สร้าง index.pug ไฟล์:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

การจัดการเส้นทางและการแสดงข้อมูล: ในการ จัดการ เส้นทาง คุณสามารถส่งข้อมูลไปยังส่วนที่ template engine ใช้ res.render() 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

การใช้ EJS Template Engine

ติดตั้ง EJS: ติดตั้ง ejs แพ็คเกจผ่าน npm 

npm install ejs --save

กำหนดค่า Template Engine: กำหนด EJS เป็นการกำหนด template engine ค่าแอปพลิเคชันของคุณ 

app.set('view engine', 'ejs');

สร้างเทมเพลต EJS: สร้างไฟล์ EJS ใน views ไดเร็กทอรี ตัวอย่างเช่น สร้าง index.ejs ไฟล์:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

การจัดการเส้นทางและการแสดงข้อมูล: ในการจัดการเส้นทาง ให้ส่งข้อมูลไปยังส่วน ที่ template engine ใช้ res.render() 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

บทสรุป

การใช้ Template Engine in Express.js ช่วยให้คุณสร้างหน้าเว็บแบบไดนามิกและแสดงข้อมูลจากเซิร์ฟเวอร์บนเบราว์เซอร์ของผู้ใช้ ด้วยการใช้ Pug, EJS หรืออื่น ๆ template engine คุณสามารถสร้างหน้าเว็บแบบโต้ตอบและยืดหยุ่นที่ให้ประสบการณ์ผู้ใช้ที่ดีขึ้นและเพิ่มประสิทธิภาพการจัดการโค้ด HTML และข้อมูล