ماهي لغة القوالب ejs وكيفية استخدامها مع اطار العمل Express
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
ماهو ejs ؟ هو لغة قوالب صمم ليعمل من جهة الخادم تم بناءة من قبل Matthew Eernisse
يتيح لك إستخدام لغة javascript داخل ملفات html بشكل شبيه جدًا بالـ PHP
استخدامة مع إطار Express
اول يجب ان تقوم بإضافة ejs لمشروعك بكتابة الأمر التالي
npm install ejsمن ثم تضيف الشفرة التالية لتطبيق express الخاص بك
app.set('view engine', 'ejs');من ثم إضافة الملفات الى مجلد views ويجب ان ينتهي الملف بالأمتداد ejs
ولعمل رسم للملف بإستخدام الشفرة أستخدم
.render(اسم الملف نص, المدخلات عنصر)
مثال
app.get('/', function(req, res) {
// مع إستبدال index بإسم الملف
res.render('index', {name:"عالم البرمجة"});
});مثال لمشروع Express
ملفات المشروع
.
├── app.js
├── package.json
├── package-lock.json
├── node_modules
├── public
│ └── images
│ ├── normal.png
│ └── transparent.png
└── views
├── footer.ejs
├── header.ejs
└── index.ejs
ملف app.js
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.use(express.static("public"));
app.get('/', function(req, res){
var images = [ 'transparent.png','normal.png' ];
res.render('index', { imgs: images, name:"عالم البرمجة" });
});
app.listen(80,function(){
console.log('[info] متصل على المنفذ 80');
});
ملف view/header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<p>مرحبًا بالعالم</p>
<ul>
<li><%= name %></li>
</ul>
ملف view/index.ejs
<%- include('header', {title: "مثال عالم البرمجة"}) %>
<ul>
<% for(var i=0; i< 5; i++) {%>
<li><%= i + 1 %></li>
<% } %>
</ul>
<h1><%= name %></h1>
<% imgs.forEach( (img) => { %>
<img src="images/<%= img %>"/><br/>
<% }); %>
<%- include('footer') %>
ملف footer.ejs
<h5>© عالم البرمجة</h5>
</body>
</html>
بعد تشغيل التطبيق
الناتج
الأوسمة المخصصة لـ Ejs والدوال
<% %> يقوم بتنفيذ شفرة الجافاسكربت التي بداخلة
<%= %> يطبع النص الذي بداخلة ( يقوم بعمل html entities encode للأوسمة html )
<%- %> يقوم بطباعة النص الذي بداخلة كا HTML
<%% يطبع '<%' بالنص الذي بداخلة متخطي عملية المعالجة
%%> يطبع '%>' بالنص الذي بداخلة متخطي عملية المعالجة
<%_ يقوم بحذف جميع المسافات الفارغة التي قبلة مع تنفيذ شفرة الجافاسكربت التي بداخلة
_%> يقوم بحذف جميع المسافات الفارغة التي بعدة مع تنفيذ شفرة الجافاسكربت التي بداخلة
include(اسم الملف نص, المدخلات عنصر) يقوم بجلب ملف ejs بعد عملية المعالجة له
باقي الدوال تجدها في ViewHelpers
صورة الغلاف منقولة من coligo.io
كلمات دليلية:
التعليقات (0)
عرض المزيد.. جديد مقالاتي
عرض المزيد.. جديد دوراتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !