מהו Express.js ומדוע כדאי להשתמש בו?

Express.js (או "Express") היא מסגרת אינטרנט של NodeJS המשמשת בחלק האחורי (או בצד השרת) של אתרי אינטרנט ויישומי אינטרנט. Express הוא גמיש ומינימליסטי, מה שאומר שאין לו אוסף נרחב של ספריות וחבילות מיותרות, והוא גם לא מכתיב כיצד עליך לבנות את האפליקציה שלך.

מסגרת ה-Express בונה ממשקי API המאפשרים תקשורת באמצעות בקשות ותגובות HTTP. אחד הדברים המדהימים באקספרס הוא שהיא נותנת למפתחים שליטה מלאה על הבקשות והתגובות הקשורות לכל אחת מהשיטות של האפליקציה שלה.

במדריך זה, תלמד כיצד ומדוע עליך להשתמש ב-Express בפרויקטים שלך.

התקנת Express בפרויקט שלך

לפני שתוכל להשתמש במסגרת ה-Express, תצטרך להתקין אותה בספריית הפרויקט שלך. זהו תהליך פשוט ש דורש NodeJS ו-npm.

הדבר הראשון שתצטרך לעשות הוא ליצור א package.json קובץ (בתוך ספריית/תיקיית הפרויקט שלך) באמצעות הפקודה הבאה:

npm init

ביצוע הפקודה לעיל יתחיל תהליך שיבקש ממך את התשומות הבאות:

• שם חבילה
• גִרְסָה
• תיאור
• נקודת כניסה
• פקודת בדיקה
• מילות מפתח
• מְחַבֵּר
• רישיון

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

npm init -y

ביצוע הפקודה שלמעלה תיצור את הדברים הבאים package.json קובץ בספריית הפרויקט שלך:

{
"name": "myapp",
"version": "1.0.0",
"תיאור": "",
"main": "index.js",
"סקריפטים": {
"test": "echo \"שגיאה: לא צוינה בדיקה\" && יציאה 1"
},
"מילות מפתח": [],
"author": "",
"license": "ISC",
}

כעת תוכל להתקין את Express באמצעות הפקודה הבאה:

npm התקן אקספרס --שמור

התקנת Express תיצור א package-lock.json קובץ וכן א node_modules תיקייה.

הבנת הקובץ package.json

הסיבה שאתה צריך ליצור א package.json הקובץ לפני התקנת Express הוא שה package.json הקובץ משמש כמאגר, המאחסן מטא נתונים חשובים על שלך פרויקטים של NodeJS.תלות הוא השם של אחד משדות המטא נתונים הללו, ו-Express הוא א תלות.

התקנת Express בספריית הפרויקט שלך תעדכן אוטומטית את package.json קוֹבֶץ.

הקובץ Updated package.json

{
"name": "myapp",
"version": "1.0.0",
"תיאור": "",
"main": "index.js",
"סקריפטים": {
"test": "echo \"שגיאה: לא צוינה בדיקה\" && יציאה 1"
},
"מילות מפתח": [],
"author": "",
"license": "ISC",
"תלות": {
"express": "^4.17.1"
}
}

כעת יש לך שדה "תלות" שיש לו תלות אחת - אקספרס. וה תלות אובייקט מאחסן תוכנות שהפרויקט שלך תלוי בהן כדי לתפקד כהלכה, שבמקרה זה היא ה-Express framework.

יצירת שרת עם Express

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

תסתכל אחורה על package.json הקובץ למעלה ותראה שדה "ראשי". שדה זה מאחסן את נקודת הכניסה לאפליקציה שלך, שהיא "index.js" בדוגמה למעלה. כאשר אתה רוצה להפעיל את היישום שלך (או במקרה זה, את השרת שאתה עומד לבנות), תצטרך להפעיל את index.js קובץ באמצעות הפקודה הבאה:

node index.js

עם זאת, לפני שתגיע לשלב הביצוע, תצטרך ליצור את index.js (או אפליקציית שרת) בספריית הפרויקט שלך.

יצירת קובץ index.js

const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('השרת שלך פעיל')
})
app.listen (פורט, () => {
console.log(`שרת פועל ב: http://localhost:${port}`);
})

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

מטרת ה app.get() השיטה היא לקבל נתונים ממשאב ספציפי. לשיטה זו יש שני ארגומנטים: נתיב ופונקציית התקשרות חוזרת. לארגומנט הנתיב בדוגמה למעלה יש לוכסן קדימה המייצג את מיקום השורש. לכן, ניווט אל http://localhost: 5000 כתובת האתר (שהיא השורש של האפליקציה שלך), בזמן שהאפליקציה index.js שלך למעלה פועלת, תפיק את הפלט הבא בדפדפן שלך:

ה app.get() פונקציית callback של השיטה מייצרת את הפלט שלמעלה. לפונקציית החזרה זו יש שני ארגומנטים - בקשה ותגובה. התגובה (שהיא מילואים בדוגמה למעלה) הוא אובייקט ה-HTTP שאפליקציית Express שולחת לאחר בקשת HTTP (וזה מה שאתה עושה על ידי הקלדת כתובת האתר למעלה בדפדפן שלך).

הגשת אתר סטטי עם שרת האקספרס שלך

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

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

דוגמה לאתר HTML סטטי

 בית 







ברוך הבא

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. קוואם ספיינטה א דולורום מגנאם necessitatibus quis tempore facere totam. דולור, הבדלה!

צפה בשירותים

קוד ה-HTML למעלה יוצר דף בית סטטי נעים של אתר סטייליסט אישי על ידי קישור לקובץ style.css הבא:

*{
שוליים: 0;
ריפוד: 0;
גודל קופסה: border-box;
}
גוף {
font-family: 'לאטו', sans-serif;
גובה קו: 1.5;
}
a {
צבע: #333;
קישוט טקסט: אין;
}
ul {
סגנון רשימה: אין;
}
p {
שוליים: .5rem 0;
}
h1{
שוליים-שמאליים: 2rem;
}
/* כלי שירות */
.container {
רוחב מקסימלי: 1100px;
שוליים: אוטומטי;
ריפוד: 0 2rem;
overflow: מוסתר;
}
.btn {
תצוגה: בלוק מוטבע;
גבול: אין;
רקע: #910505;
צבע: #fff;
ריפוד: 0.5 רם 1 רם;
רדיוס הגבול: 0.5 רם;
}
.btn: hover {
אטימות: 0.9;
}
/* Navbar */
#navbar {
רקע: #fff;
מיקום: דביק;
למעלה: 0;
z-index: 2;
}
#navbar .container {
תצוגה: רשת;
עמודות-תבנית-רשת: 6fr 3fr 2fr;
ריפוד: 1rem;
align-items: center;
}
#navbar h1 {
צבע: #b30707;
}
#navbar ul {
להצדיק-עצמי: סוף;
תצוגה: flex;
שוליים-ימין: 3.5 רמ;
}
#navbar ul li a {
ריפוד: 0.5 רם;
מודגש;
}
#navbar ul li a.current {
רקע: #b30707;
צבע: #fff;
}
#navbar ul li a: hover {
רקע: #f3f3f3;
צבע: #333;
}
#navbar .social {
להצדיק-עצמי: מרכז;
}
#navbar .social i {
צבע: #777;
שוליים-ימין: .5rem;
}
/* בית */
#בית {
צבע: #fff;
רקע: #333;
ריפוד: 2rem;
עמדה: קרוב משפחה;
}
#home: לפני {
תוכן: '';
רקע: url ( https://source.unsplash.com/random) מרכז/כריכה ללא חזרה;
מיקום: מוחלט;
למעלה: 0;
שמאל: 0;
רוחב: 100%;
גובה: 100%;
אטימות: 0.4;
}
#home .showcase-container {
תצוגה: רשת;
עמודות-תבנית-רשת: חזור (2, 1fr);
להצדיק-תוכן: מרכז;
align-items: center;
גובה: 100Vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
margin-bottom: 1rem;
}

שירות האתר באמצעות שרת האקספרס

const express = require('express');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (פורט, () => {
console.log(`שרת פועל ב: http://localhost:${port}`);
})

קובצי HTML ו-CSS למעלה נמצאים בתיקייה ציבורית בספריית הפרויקט הראשית. מיקומו של קובץ ה-HTML הופך אותו לנגיש לשרת ה-Express ולפונקציות שלו.

אחת הפונקציות החדשות בשרת האקספרס לעיל היא app.use() שיטה. זה עולה על express.static() תוכנת ביניים, המשרתת קבצים סטטיים. זה מאפשר להשתמש ב- res.sendFile() פונקציה לשרת את הסטטי index.html הקובץ למעלה.

ניווט אל http://localhost: 5000 מיקום בדפדפן שלך יציג משהו דומה לפלט הבא:

חקור פיתוח Backend

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

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

למד כיצד להפוך למפתח Backend בשנת 2021

אם יש לך דגש על קריירה ב-IT, אתה יכול לעשות יותר גרוע מאשר ללמוד את הכישורים הדרושים לך כדי להיות מפתח backend.

קרא הבא

על הסופר