אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » Express » שימוש בטמפלייטים של HTML ב-express.js

שימוש בטמפלייטים של HTML ב-express.js

רן בר-זיק יוני 26, 2016 7:07 am 7 תגובות

התקנה ועבודה עם טמפלייטים ב-express.js

המאמר הקודם בסדרת המדריכים על expresexpress.js – שימוש ב-API של ה-response
המאמר הבא בסדרת המדריכים ל-expressלעבוד עם ejs ב-express.js
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר האחרון עסקנו ב-API של ה-response ב-expres.js וראינו איך אפשר לעשות מניפולציות שונות ל-reposne, כל הדוגמאות הראו שה-response שלי הוא הדפסה של hello world מסוג זה או אחר אל המשתמש. אבל אתרי אינטרנט זה יותר מטקסט, או JSON. אתרי אינטרנט זה HTML. למרות שבאופן תיאורטי אני יכול לעשות משהו כזה:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {
  res.send('

About me page

'); }); module.exports = router;

זה מאוד מאוד לא מעשי. אנחנו צריכים משהו שיכול לקרוא קבצי טמפלייטים – כלומר קבצים מוכנים שעומדים בזכות עצמם והם לא חלק ממחרוזת טקסט בתוך קובץ ג'אווהסקריפט.

יש מספר מנועי טמפלייטים, אני אלמד כאן את הפשוט מביניהם: EJS. אלו מכם שמכירים PHP או Java ירגישו כאן ממש כמו בבית. להזכירכם, האפליקציה שלנו נראית ככה:

ה-app.js, בו מוגדרת האפליקציה, כולל כל הראוטרים:


var express = require('express');
var app = express();
var help = require('./help');

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

app.use('/help', help);

הראוטר שלנו, לצורך העניין help, הוא תופס את כל ה /help ומגדיר about-me:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {
  res.send('

About me page

'); }); module.exports = router;

מנוע הטמפלייט הוא מודול של node ואנו צריכים להתקין אותו. איך נתקין? באמצעות npm:


npm install ejs --save

להזכירכם, ה save– שומר את המודול ב-package.json של node. ואם זה נשמע לכם סינית, כדאי לכם לקפוץ למאמר הרלוונטי על מודולים ב-node.js.

אחרי ששמרנו, אנחנו צריכים לתת ל-express לטעון את המודול הזה. את זה עושים עם מתודת app.set של האפליקציה עצמה. המתודה הזו מסייעת לנו לבצע הגדרה של משתנים בסיסיים שמשפיעים על פעולת כל האפליקציה והיא מוגדרת ב app.js באופן הזה:


var express = require('express');
var app = express();
var help = require('./help');

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

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

app.use('/help', help);

עכשיו ניצור תיקיה בשם views בפרויקט שלנו (מנדטורי בשלב זה) וניצור שם קובץ בשם about-me.js ושם נכניס HTML כרצוננו, למשל:


<html>
       <h1>Hello world from template!</h1>
</html>

אחרי שיצרנו את הקובץ (שימו לב לסיומת ה-ejs), נלך לראוטר ושם, ב-/help/about-me, נכניס את הטקסט הבא:


router.get('/about-me', function(req, res) {
  res.render('about-me');
});

כל מה שנותר לנו לעשות זה לאתחל את האפליקציה (node app.js, זוכרים?) ולהכנס אל http://localhost:3000/help/about-me, אנחנו נראה את הטמפלייט שלנו:

Hello world example in ejs

זה הכל! אבל מה אם אני רוצה להעביר משתנים? להדפיס hello world זה טוב ויפה, אבל מה עם אני רוצה להדפיס דברים קצת יותר דינמיים? מאוד פשוט. קודם כל אני אחליט על המשתנים שאעביר ואעביר אותם כארגומנט כשאני מחזיר את הטמפלייט, בדיוק ככה:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {
  res.render('about-me', {header : 'This is dynamic header'});
});

module.exports = router;


ואיך זה יראה בטמפלייט? כך:


<html>
       <h1><%= header %></h1>
</html>

אם כבר אני מריץ את ה-express בקונסולה אני אהרוג את התהליך ושוב אפעיל אותו עם node app.js, אם אכנס שוב אל: http://localhost:3000/help/about-me אני אראה:

Hello world example in ejs with variables

וזה נהדר. אני יכול להעביר כמה משתנים/אובייקטים שבא לי ולהדפיס אותם בקלות.

כתבתי קודם לכן שקבצי הטמפלייטים חייבים להיות בתיקית views, אני יכול לשנות את זה כמובן עם app.set ב-app.js ולשנות את ה-view directory שלי.


app.set('views', __dirname + '/yourViewDirectory');

כל מה שכתבתי לעיל נכון לגבי כל מנוע טמפלייטים, ejs הוא מנוע הטמפלייטים הפשוט ביותר, אבל יש עוד רבים אחרים שנתמכים עם express. מתקינים ועובדים איתם באותה הצורה. רק שכמובן קבצי הטמפלייט נראים אחרת ויש להם סיומת אחרת מאשר ejs.

במאמר הבא נמשיך לדבר על ejs ונסביר עליו יותר.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
לכל המאמרים בסדרת המדריכים על express
express.js

7 תגובות

  1. יונתן הגב יוני 26, 2016 בשעה 9:57 pm

    היי רן ותודה על המאמר!
    מה היתרונות / חסרונות של ejs מול jade מנקודת מבטך?

    • רן בר-זיק הגב יוני 30, 2016 בשעה 8:40 pm

      תודה! 🙂
      מבחינתי jade מיותרת כי צריך ללמוד עוד סינטקס. אני שולט היטב ב-HTML ואני לא ממש מפחד ממנו ולא חושב שצריך לשים עליו עוד אבסטרקציה. זה לא שהעבודה עם jade מייעלת את התהליך בצורה שמצדיקה את הלימוד של הסינטקס של jade. כמובן שלכל כלי יש את היתרונות שלו ואת החסרונות שלו ויש כאלו שלא יסכימו איתי וזה בסדר גמור.

  2. ניר סליקטר הגב יולי 2, 2016 בשעה 3:11 pm

    בספר המצוין web development with node and express של Ethan Brown הוא מציע להשתמש בhandlebars
    כמו כן נותן קישור לאתר שמשווה כל מיני סוגים של תוכנות לtemplating
    http://garann.github.io/template-chooser/

    • רן בר-זיק הגב יולי 4, 2016 בשעה 10:42 am

      תודה 🙂

  3. משתמש אנונימי (לא מזוהה) הגב אוקטובר 8, 2016 בשעה 11:49 pm

    תודה ערן!

    במה זה יותר טוב מ jsdom שמאפשר שימוש בסינטקס מוכר מהדפדפן?

    • רן בר-זיק הגב אוקטובר 9, 2016 בשעה 1:33 pm

      בכיף 🙂
      jsdom שונה לחלוטין ומורכב יותר. גם jsdom מייצר טמפלייטים אבל הוא עושה את זה באופן יותר מתוחכם וגמיש. EJS הוא הרבה יותר פשוט ובסיסי אבל מאוד מתאים אם אתה משתמש בריאקט/אנגולר.

  4. נועם הגב אפריל 7, 2022 בשעה 6:45 pm

    אני יודע שזה מאמר ישן, אבל בגלל שהבעיה בולטת החלטתי להגיב בכל זאת: ה-HTML בתוך דוגמאות הקוד הראשונות מרונדר על ידי האתר במקום להיות מוצג כקוד.

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד