كيفية استخدام EJS لتنسيق تطبيق Node الخاص بك

مقدمة

عند إنشاء تطبيقات Node بسرعة ، قد يكون من الضروري في بعض الأحيان استخدام طريقة سريعة لتخطيط تطبيقك.

يأتي Jade كـ محرك قوالب الافتراضي لـ Express ولكن بناء جملة Jade يمكن أن يكون معقدًا للغاية للعديد من الحالات الاستخدام.

يمكن استخدام قوالب JavaScript المضمنة (EJS) كبديل لمحرك القوالب.

في هذه المقالة ، ستتعلم كيفية تطبيق EJS على تطبيق Express ، وتضمين أجزاء قابلة للتكرار من موقعك ، وتمرير البيانات إلى العروض.

المتطلبات الأساسية

إذا كنت ترغب في متابعة هذه المقالة ، ستحتاج إلى:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

هذا البرنامج التعليمي كُتب أصلاً لـ express v4.17.1 و ejs v3.1.5. تم التحقق منه باستخدام Node v16.0.0، npm v7.11.1، express v4.17.1، و ejs v3.1.6.

الخطوة 1 — إعداد المشروع

أولاً، قم بفتح نافذة الطرفية الخاصة بك وأنشئ دليل مشروع جديد:

mkdir ejs-demo

ثم، انتقل إلى الدليل الذي تم إنشاؤه حديثًا:

cd ejs-demo

في هذه النقطة، يمكنك تهيئة مشروع npm جديد:

npm init -y

بعد ذلك، ستحتاج إلى تثبيت حزمة express:

npm install express@4.17.1

ثم، قم بتثبيت حزمة ejs:

npm install ejs@3.1.6

في هذه النقطة، لديك مشروع جديد جاهز لاستخدام Express و EJS.

الخطوة 1 — تكوين مع server.js

بعد تثبيت جميع الاعتمادات، دعنا نقوم بتكوين التطبيق لاستخدام EJS وإعداد المسارات لصفحة الفهرس وصفحة حول.

أنشئ ملف server.js جديد وافتحه باستخدام محرر الشفرة الخاص بك ثم أضف الأسطر التالية من الشفرة:

var express = require('express');
var app = express();

// تعيين محرك العرض إلى ejs
app.set('view engine', 'ejs');

// استخدم res.render لتحميل ملف عرض ejs

// صفحة الفهرس
app.get('/', function(req, res) {
  res.render('pages/index');
});

// صفحة حول
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

يحدد هذا الكود التطبيق ويستمع على منفذ 8080.

يعين هذا الكود أيضًا EJS كمحرك عرض لتطبيق Express باستخدام:

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

لاحظ كيف يرسل الكود عرضًا للمستخدم باستخدام res.render(). من المهم أن نلاحظ أن res.render() سيبحث في مجلد views عن العرض. لذلك يجب عليك فقط تحديد pages/index نظرًا لأن المسار الكامل هو views/pages/index.

بعد ذلك، ستقوم بإنشاء العروض باستخدام EJS.

الخطوة ٢ — إنشاء الأجزاء الجزئية EJS

مثل الكثير من التطبيقات التي تقوم ببنائها، ستكون هناك الكثير من الشفرات التي يتم إعادة استخدامها. يُعتبر هذا جزءًا من الأجزاء الجزئية. في هذا المثال، ستكون هناك ثلاثة أجزاء جزئية يتم إعادة استخدامها على صفحة الفهرس وصفحة حول: head.ejs، header.ejs، وfooter.ejs. دعنا نقم بإنشاء تلك الملفات الآن.

قم بإنشاء دليل views جديد:

mkdir views

ثم، قم بإنشاء مجلد فرعي جديد partials:

mkdir views/partials

في هذا الدليل، أنشئ ملفًا جديدًا بتسمية head.ejs وافتحه باستخدام محرر الشفرة الخاص بك. أضف السطور التالية من الشفرة:

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

تحتوي هذه الشفرة على البيانات الوصفية لعنصر head في مستند HTML. كما تتضمن أنماطًا من Bootstrap.

ثم، أنشئ ملفًا جديدًا بتسمية header.ejs وافتحه باستخدام محرر الشفرة الخاص بك. أضف السطور التالية من الشفرة:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

تحتوي هذه الشفرة على قائمة التنقل لمستند HTML وتستخدم عدة فئات من Bootstrap للتنسيق.

ثم، أنشئ ملفًا جديدًا بتسمية footer.ejs وافتحه باستخدام محرر الشفرة الخاص بك. أضف السطور التالية من الشفرة:

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

تحتوي هذه الشفرة على معلومات حقوق الطبع والنشر وتستخدم عدة فئات من Bootstrap للتنسيق.

بعد ذلك، ستستخدم هذه الشظايا الفرعية في ملفات index.ejs و about.ejs.

الخطوة 3 — إضافة الشظايا الفرعية EJS إلى العروض

لديك ثلاث شظايا فرعية معرفة. الآن يمكنك استخدام include لدمجها في العروض الخاصة بك.

استخدم <%- include('المسار/النسبي/إلى/الملف') %> لتضمين الشظايا الفرعية EJS في ملف آخر.

• الشرطة <%- بدلاً من <% لإبلاغ EJS بتقديم HTML الخام.
• المسار إلى الشظية الفرعية نسبي إلى الملف الحالي.

ثم، قم بإنشاء مجلد فرعي جديد بالاسم pages:

mkdir views/pages

في هذا الدليل، قم بإنشاء ملف جديد بالاسم index.ejs وافتحه باستخدام محرر الأكواد الخاص بك. أضف السطور التالية من الكود:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

قم بحفظ التغييرات على هذا الملف ثم قم بتشغيل التطبيق:

node server.js

إذا زرت http://localhost:8080/ في متصفح الويب، يمكنك مشاهدة صفحة الفهرس:

بعد ذلك، قم بإنشاء ملف جديد بالاسم about.ejs وافتحه باستخدام محرر الأكواد الخاص بك. أضف السطور التالية من الكود:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

يضيف هذا الكود شريط جانبي Bootstrap لإظهار كيف يمكن تنظيم الأجزاء الفرعية لإعادة الاستخدام في قوالب وصفحات مختلفة.

قم بحفظ التغييرات على هذا الملف ثم قم بتشغيل التطبيق:

node server.js

إذا زرت http://localhost:8080/about في متصفح الويب، يمكنك مشاهدة صفحة “حول” مع شريط جانبي:

الآن يمكنك البدء في استخدام EJS لتمرير البيانات من تطبيق Node إلى العروض.

الخطوة 4 — تمرير البيانات إلى العروض والأجزاء

دعونا نحدد بعض المتغيرات الأساسية وقائمة لنمررها إلى صفحة الفهرس.

قم بزيارة ملف server.js في محرر الأكواد الخاص بك وأضف السطور التالية من الكود داخل المسار app.get('/'):

var express = require('express');
var app = express();

// تعيين محرك العرض إلى ejs
app.set('view engine', 'ejs');

// استخدم res.render لتحميل ملف عرض ejs

// صفحة الفهرس
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// صفحة حول
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

يعرف هذا الكود مصفوفة تسمى mascots وسلسلة تسمى tagline. بعد ذلك، دعونا نستخدمها في index.ejs.

تقديم متغير واحد في EJS

لإظهار متغير واحد، يمكنك استخدام <%= tagline %>.

أعد زيارة index.ejs في محرر الكود الخاص بك وأضف السطور التالية من الكود:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

سيقوم هذا الكود بعرض قيمة tagline على صفحة الفهرس.

التكرار على البيانات في EJS

لتكرار على البيانات، يمكنك استخدام .forEach.

أعد زيارة index.ejs في محرر الكود الخاص بك وأضف السطور التالية من الكود:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

احفظ التغييرات على هذا الملف ثم قم بتشغيل التطبيق:

node server.js

إذا زرت http://localhost:8080/ في متصفح الويب، يمكنك مشاهدة صفحة الفهرس مع الـ mascots:

تمرير البيانات إلى جزء في EJS

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

يمكنك أيضًا تحديد وتمرير المتغيرات إلى جزء EJS في بناء التضمين مثل هذا:

...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

ولكن يجب أن تكون حذرًا مرة أخرى بشأن افتراض أن المتغير قد تم تعريفه.

إذا كنت ترغب في الإشارة إلى متغير في جزء قد لا يكون دائمًا معرفًا، وإعطائه قيمة افتراضية، فيمكنك القيام بذلك بهذه الطريقة:

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

في السطر أعلاه، يقوم كود EJS بعرض قيمة المتغير إذا تم تعريفه، وافتراضي إذا لم يتم ذلك.

الاستنتاج

في هذه المقالة، تعلمت كيفية تطبيق EJS على تطبيق Express، وتضمين أجزاء قابلة للتكرار من موقعك، وتمرير البيانات إلى العروض.

تسمح لك EJS ببناء التطبيقات عندما لا تحتاج إلى تعقيد إضافي. من خلال استخدام الأجزاء الفرعية وإمكانية تمرير المتغيرات بسهولة إلى عروضك، يمكنك بناء تطبيقات رائعة بسرعة.

استشر توثيق EJS للمزيد من المعلومات حول الميزات والصيغة. استشر مقارنة محركات قوالب JavaScript: Jade، Mustache، Dust والمزيد لفهم مزايا وعيوب محركات العرض المختلفة.