במאמר האחרון עסקנו ב-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 זה טוב ויפה, אבל מה עם אני רוצה להדפיס דברים קצת יותר דינמיים? מאוד פשוט. קודם כל אני אחליט על המשתנים שאעביר ואעביר אותם כארגומנט כשאני מחזיר את הטמפלייט, בדיוק ככה:
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 אני אראה:
וזה נהדר. אני יכול להעביר כמה משתנים/אובייקטים שבא לי ולהדפיס אותם בקלות.
כתבתי קודם לכן שקבצי הטמפלייטים חייבים להיות בתיקית views, אני יכול לשנות את זה כמובן עם app.set ב-app.js ולשנות את ה-view directory שלי.
app.set('views', __dirname + '/yourViewDirectory');
כל מה שכתבתי לעיל נכון לגבי כל מנוע טמפלייטים, ejs הוא מנוע הטמפלייטים הפשוט ביותר, אבל יש עוד רבים אחרים שנתמכים עם express. מתקינים ועובדים איתם באותה הצורה. רק שכמובן קבצי הטמפלייט נראים אחרת ויש להם סיומת אחרת מאשר ejs.
במאמר הבא נמשיך לדבר על ejs ונסביר עליו יותר.
היי רן ותודה על המאמר!
מה היתרונות / חסרונות של ejs מול jade מנקודת מבטך?
תודה! 🙂
מבחינתי jade מיותרת כי צריך ללמוד עוד סינטקס. אני שולט היטב ב-HTML ואני לא ממש מפחד ממנו ולא חושב שצריך לשים עליו עוד אבסטרקציה. זה לא שהעבודה עם jade מייעלת את התהליך בצורה שמצדיקה את הלימוד של הסינטקס של jade. כמובן שלכל כלי יש את היתרונות שלו ואת החסרונות שלו ויש כאלו שלא יסכימו איתי וזה בסדר גמור.
בספר המצוין web development with node and express של Ethan Brown הוא מציע להשתמש בhandlebars
כמו כן נותן קישור לאתר שמשווה כל מיני סוגים של תוכנות לtemplating
http://garann.github.io/template-chooser/
תודה 🙂
תודה ערן!
במה זה יותר טוב מ jsdom שמאפשר שימוש בסינטקס מוכר מהדפדפן?
בכיף 🙂
jsdom שונה לחלוטין ומורכב יותר. גם jsdom מייצר טמפלייטים אבל הוא עושה את זה באופן יותר מתוחכם וגמיש. EJS הוא הרבה יותר פשוט ובסיסי אבל מאוד מתאים אם אתה משתמש בריאקט/אנגולר.
אני יודע שזה מאמר ישן, אבל בגלל שהבעיה בולטת החלטתי להגיב בכל זאת: ה-HTML בתוך דוגמאות הקוד הראשונות מרונדר על ידי האתר במקום להיות מוצג כקוד.