איך להשתמש ב-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.

שלב 2 — יצירת חלקי ה-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>

קוד זה מכיל מטא-נתונים עבור ראש המסמך 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>

קוד זה מוסיף sidebar של Bootstrap כדי להדגים כיצד ניתן לממש חלקי קוד חוזרים בתבניות ובדפים שונים.

שמור את השינויים בקובץ ואז הרץ את היישום:

node server.js

אם תבקר בכתובת http://localhost:8080/about בדפדפן, תוכל לראות את דף האודות עם sidebar:

עכשיו ניתן להתחיל להשתמש ב-EJS כדי להעביר נתונים מיישום ה-Node לתצוגות.

שלב 4 — מעבר נתונים לתצוגות ולחלקי קוד

בואו נגדיר משתנים בסיסיים ורשימה להעברה לדף האינדקס.

פתח את server.js בעורך הקוד שלך והוסף את השורות הבאות של קוד בתוך נתיב ה- app.get('/'):

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

// הגדר את מנוע התצוגה ל-ejs
app.set('view engine', 'ejs');

// make use of res.render to load up an ejs view file

// עמוד הבית
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 מצייר את ערך המשתנה variant אם הוא מוגדר, ואת default אם לא.

מסקנה

במאמר זה, למדתם כיצד להחיל את EJS לאפליקציית Express, לכלול חלקים חוזרים של האתר שלכם, ולהעביר נתונים לנופים.

‏EJS מאפשרת לכם לבנות אפליקציות כאשר אין צורך במורכבות נוספת. על ידי שימוש בחלקית וביכולת להעביר משתנים בקלות לנופים שלכם, תוכלו לבנות אפליקציות מצויינות מהר.

להתייעץ ב תיעוד ה־EJS למידע נוסף על תכונות ותחביר. להתייעץ ב השוואת מנועי התבניות של JavaScript: Jade, Mustache, Dust ועוד להבנת היתרונות והחסרונות של מנועי תצוגה שונים.