איך להתחיל עם Node.js ו-Express

הקדמה

Express הוא ספריית יישום אינטרנטית עבור Node.js שמאפשרת לך להפעיל ממשקי תכנות אפליקציות רשת ושרתי רשת בצורה הרבה יותר פשוטה ונקיה. זו חבילה קלה שאינה מעיקה על תכונות הליבה של Node.js.

במאמר זה, תתקין ותשתמש ב-Express כדי לבנות שרת רשת.

דרישות מוקדמות

אם ברצונך להמשיך עם מאמר זה, תצטרך:

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

הדרכה זו אומתה עם Node v15.14.0, npm v7.10.0, express v4.17.1, ו- serve-index v1.9.1.

שלב 1 — התקנת הפרויקט

ראשית, פתח את חלון הטרמינל וצור ספריית פרויקט חדשה:

mkdir express-example

לאחר מכן, נווט אל תיקיית הפרויקט שנוצרה כעת:

cd express-example

בנקודה זו, תוכל לאתחל פרויקט npm חדש:

npm init -y

בשלב זה, תצטרך להתקין את החבילה express:

npm install express@4.17.1

בנקודה זו, יש לך פרויקט חדש מוכן לשימוש עם Express.

שלב 2 — יצירת שרת Express

עכשיו שהתקנת את Express, צור קובץ server.js חדש ופתח אותו בעורך הקוד שלך. לאחר מכן, הוסף את השורות הבאות של קוד:

const express = require('express');

const app = express();

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

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

שורות אלו של קוד הן המקום שבו אנו מגדירים לשרת Express שלנו איך לטפל בבקשת GET לשרת שלנו. Express כולל פונקציות דומות לטיפול בבקשות POST, PUT, וכו', באמצעות app.post(...), app.put(...), וכו'.

פונקציות אלו מקבלות שני פרמטרים עיקריים. הראשון הוא כתובת ה-URL שבה הפונקציה צריכה לפעול. במקרה זה, אנו מתמקדים ב-'/', שהוא שורש האתר שלנו: במקרה זה, localhost:3000.

הפרמטר השני הוא פונקציה עם שני ארגומנטים: req, ו-res. req מייצג את הבקשה שנשלחה לשרת; נוכל להשתמש באובייקט זה כדי לקרוא נתונים על מה שהלקוח מבקש לעשות. res מייצג את התגובה שנשלחת חזרה ללקוח.

כאן, אנו קוראים לפונקציה על res כדי לשלוח תגובה חזרה: 'תגובה מוצלחת.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

סוף סוף, לאחר שהגדרנו את הבקשות שלנו, עלינו להתחיל את השרת שלנו! אנו מעבירים 3000 אל פונקציית ה- listen, שמספרת לאפליקציה באיזה פורט להאזין. הפונקציה שמועברת כפרמטר השני היא אופציונלית ומפעילה כאשר השרת מתחיל. זה נותן לנו משוב בקונסולה כדי לדעת שהיישום שלנו פועל.

בקרו בחלון הטרמינל שלכם והריצו את היישום שלכם:

node server.js

לאחר מכן, בקרו אל localhost:3000 בדפדפן האינטרנט שלכם. חלון הדפדפן שלכם יציג: 'Successful response'. חלון הטרמינל שלכם יציג: 'Example app is listening on port 3000.'.

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

שלב 3 — שימוש ב-Middleware

עם Express, אנו יכולים לכתוב ולהשתמש בפונקציות middleware, שיש להן גישה לכל בקשות ה-HTTP הנכנסות אל השרת. פונקציות אלו יכולות ל:

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

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

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

כדי להגדיר פונקציית מידלוור, אנו קוראים ל-app.use() ומעבירים לו פונקציה. הנה פונקציית מידלוור בסיסית להדפסת הזמן הנוכחי בקונסולה במהלך כל בקשה:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

השיחה next() מספרת למידלוור לעבור לפונקציית המידלוור הבאה אם קיימת. זה חשוב לכלול בסופו של הפונקציה שלנו – אחרת, הבקשה תיתקע במידלוור זה.

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

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

על ידי העברת '/request-type' כארגומנט ראשון ל-app.use(), פונקציה זו תרוץ רק עבור בקשות שנשלחו ל־localhost:3000/request-type.

חזרו אל חלון הטרמינל שלכם והריצו את היישום שלכם:

node server.js

לאחר מכן, בקרו את localhost:3000/request-type בדפדפן האינטרנט שלכם. חלון הטרמינל שלכם יציג את חותמת הזמן של הבקשה ואת 'Request type: GET'.

כעת, בואו ננסה להשתמש במידלוור קיים כדי לשרת קבצים סטטיים. Express מגיע עם פונקציית מידלוור מובנית: express.static. נשתמש גם בפונקציית מידלוור מתוך צד שלישי, serve-index, כדי להציג רשימת אינדקס של הקבצים שלנו.

ראשית, בתוך התיקייה אותה נמצא בה השרת של express, יצרו תיקייה בשם public ושימו שם קבצים מסוימים.

אז, התקן את החבילה serve-index:

npm install serve-index@1.9.1

ראשית, יבא את חבילת serve-index בראש קובץ השרת.

לאחר מכן, כלול את מתווהי ה- express.static וה- serveIndex וספר להם את הנתיב לגישה ואת שם התיקייה:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

כעת, הפעל מחדש את השרת ונווט ל- localhost:3000/public. תקבל רשימה של כל הקבצים שלך!

מסקנה

במאמר זה, התקנת והשתמשת ב-Express כדי לבנות שרת אינטרנט. גם השתמשת בפונקציות middleware מובנות ומקור צד ג תישיר.

המשך את הלמידה שלך עם כיצד להשתמש באובייקט req ב-Express, כיצד להשתמש באובייקט res ב-Express, ו כיצד להגדיר נתיבים ושיטות בקשת HTTP ב-Express.