close

استخدام Template Engine في Express.js

في تطوير الويب ، يعد عرض البيانات من الخادم على صفحات الويب أمرًا بالغ الأهمية لإنشاء تجارب مستخدم تفاعلية وديناميكية. هذا هو المكان Template Engine الذي Express.js يأتي فيه الإنقاذ. هي Template Engine أداة تسمح لك بإنشاء قوالب HTML ديناميكية عن طريق حقن البيانات من الخادم في كود HTML.

لماذا تستخدم Template Engine ؟

Template Engine تساعد في فصل ترميز HTML عن البيانات الواردة من الخادم. يتيح لك ذلك إدارة تعليمات HTML البرمجية بسهولة أكبر دون الحاجة إلى تضمين البيانات في كل سطر من التعليمات البرمجية. بدلاً من ذلك ، ستنشئ "عناصر نائبة" أو "علامات" داخل كود HTML ، والتي ستملأها Template Engine لاحقًا ببيانات جانب الخادم.

استخدام Template Engine في Express.js

Express.js يدعم العديد template engine ، مثل Pug(المعروف سابقًا باسم Jade) و EJS(JavaScript مدمج). فيما يلي أمثلة على استخدام Pug و EJS في Express.js:

باستخدام الصلصال Template Engine

تثبيت Pug: تحتاج إلى تثبيت pug الحزمة عبر npm.

npm install pug --save

تكوين Template Engine: في ملف تكوين التطبيق الخاص بك(على سبيل المثال app.js) ، عرّف Pug على أنه ملف template engine.

app.set('view engine', '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 البرمجية والبيانات.