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

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

במאמר האחרון עסקנו ב-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 ונסביר עליו יותר.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

הסבר קצר על SSR מול רינדור קלאסי ולא. לא תמיד זה טוב להשתמש בו. אין כדור כסף שיכול לפתור הכל.

פיתוח ב-JavaScript

Axios interceptors

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

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