ماهي لغة القوالب ejs وكيفية استخدامها مع اطار العمل Express

xlmnxpمنذ 7 سنوات

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

ماهو 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>&copy; عالم  البرمجة</h5>
</body>
</html>

 

بعد تشغيل التطبيق

الناتج

Screenshot_20170812_161832.png.3841a9df61d8daea20dc65fd243a03fa.png

 

الأوسمة المخصصة لـ Ejs والدوال

<% %> يقوم بتنفيذ شفرة الجافاسكربت التي بداخلة
<%= %> يطبع النص الذي بداخلة ( يقوم بعمل html entities encode للأوسمة html )
<%- %> يقوم بطباعة النص الذي بداخلة كا HTML
<%% يطبع '<%' بالنص الذي بداخلة متخطي عملية المعالجة
%%> يطبع '%>' بالنص الذي بداخلة متخطي عملية المعالجة
<%_ يقوم بحذف جميع المسافات الفارغة التي قبلة مع تنفيذ شفرة الجافاسكربت التي بداخلة
_%> يقوم بحذف جميع المسافات الفارغة التي بعدة مع تنفيذ شفرة الجافاسكربت التي بداخلة

 

include(اسم الملف نص, المدخلات عنصر) يقوم بجلب ملف ejs بعد عملية المعالجة له
باقي الدوال تجدها في ViewHelpers

 

 

صورة الغلاف منقولة من coligo.io

كلمات دليلية:
1
إعجاب
5072
مشاهدات
1
مشاركة
1
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !