تكنولوجيا EJS أو “Embedded JavaScript templating” هي إحدى تقنيات القوالب في جافا سكريبت، وهي تستخدم بشكل واسع لإنتاج HTML ديناميكي على الجانب الخادم. تستطيع EJS دمج البيانات من الخادم مع الصفحة الويب بطريقة فعالة ومرنة.
في هذا الموضوع، سنستكشف كيفية تكوين EJS في تطبيقات Node.js وكيفية تمرير البيانات إلى القوالب لتوليد واجهات مستخدم ديناميكية.
تكوين EJS في تطبيق Node.js
لبدء استخدام EJS في تطبيق Node.js، يجب أولاً تثبيت الحزمة باستخدام npm أو yarn. بعد تثبيت الحزمة، يمكن تكوين البيئة لاستخدام EJS كمحرك قوالب.
خطوات التثبيت والتكوين:
- تثبيت EJS:
npm install ejs- إعداد EJS كمحرك قوالب في Express:
const express = require('express');
const app = express();
// تحديد المجلد الذي يحتوي على القوالب
app.set('views', path.join(__dirname, 'views'));
// تعيين EJS كمحرك القوالب
app.set('view engine', 'ejs');في هذا الإعداد، views هو المجلد الذي سيتم تخزين ملفات EJS به، ويُعرف محرك القوالب بأنه ‘ejs’.
تمرير البيانات إلى قوالب EJS
تمرير البيانات إلى قوالب EJS يمكن أن يتم بسهولة عبر وظيفة الرندر في Express. يمكن إرسال أي نوع من البيانات إلى القالب، مما يسمح بتوليد صفحات HTML ديناميكية بناءً على البيانات المتاحة.
مثال على تمرير البيانات واستخدامها في EJS:
app.get('/', (req, res) => {
// تعريف البيانات التي ستمرر للقالب
const data = {
title: 'Home Page',
users: ['Alice', 'Bob', 'Charlie']
};
// تمرير البيانات إلى القالب
res.render('index', data);
});قالب EJS (index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Welcome to <%= title %></h1>
<ul>
<% users.forEach(user => { %>
<li><%= user %></li>
<% }); %>
</ul>
</body>
</html>في هذا المثال، البيانات مثل العنوان وقائمة المستخدمين يتم تمريرها إلى القالب index.ejs. يتم استخدام التاجات <%= %> لإدراج البيانات في HTML، و
تاج <% %> للتكرار عبر المصفوفة.
EJS هي أداة قوية لإنشاء محتوى ديناميكي في تطبيقات Node.js. بفضل سهولة تكوينها وقدرتها على التعامل مع البيانات بفعالية، تعتبر EJS خيارًا ممتازًا لمطوري الويب الذين يحتاجون إلى بناء واجهات مستخدم ديناميكية وجذابة.
1 Trackback / Pingback
قسم التعليقات مغلق.