בניית אתר אינטרנט ב-NodeJS
npm i express, מייבאים אותו עם require, יוצרים server ומאזינים על port 3000.pages שבה כל הדפים, ובתוכה index.html שנוצר ב-Visual Studio על ידי סימן קריאה ו-Enter. הדף הוא דף הבית, עם כותרת h1 פשוטה.server.use(express.static(...)) עם הנתיב __dirname משורשר ל-pages. כך index.html מוגש אוטומטית בכתובת הראשית, וגם בכתובת /index.html, אבל אין דף about עדיין..html, ולכן מוסיפים ראוט server.get('/home', ...). בתוכו response.sendFile עם __dirname, התיקייה pages והקובץ. אותו דבר נעשה ל-/about עם about.html.pageNotFound.html עם הודעה שהדף לא קיים. מוסיפים server.use('*', ...) שתופס כל כתובת אחרת, בלי קשר לשיטת הגישה, ומגיש אותו.styles.css בתיקיית pages עם רקע, גודל גופן ויישור למרכז, ומקשרים אותו בכל דף עם link rel="stylesheet".a ל-/home ול-/about, מופרדים ב-span עם קו הפרדה, ואותו תפריט מועתק לשאר הדפים כולל דף השגיאה. לא צריך להריץ מחדש כי השתנה רק ה-HTML.npm i expressexpress.static מול server.get עם sendFilehref="/home" מתחיל בלוכסן כדי להתייחס לתיקייה הראשית ולא לנתיב יחסי למיקום הנוכחי, שיכול להיות בתת-תיקייה.פרקי ההרצאה: בניית אתר אינטרנט ב-NodeJS
תמלול ההרצאה: בניית אתר אינטרנט ב-NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «בניית אתר אינטרנט ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לפרק בו אנחנו נתעסק קצת עם צד הלקוח. כאן אנחנו הולכים לראות איך אנחנו יכולים בעצם להנגיש ללקוח שלנו קבצי HTML, אפילו שאנחנו בונים פרויקט ב-Node.js.
יכול להיות שבאמת אנחנו לא רוצים לבנות רק RESTful Service, אלא אנחנו רוצים לבנות גם אתר אינטרנט. Node.js בהחלט יכולה להיות צד השרת באתר אינטרנט רגיל.
אז אם אני בונה אתר אינטרנט, איך אני בעצם מנגיש קבצי html למשתמש. לצורך כך אנחנו צריכים כמובן את אקספרס. אז בואו נתקין את אקספרס npm ixpress ונגדיר בראש הדף שלנו שאנחנו רוצים להשתמש עם אקספרס.
const xpress שווה ואנחנו רוצים require xpress. נגדיר server const server ונעלה אותו להעביר. פרוור ליסן על פורט 3000. פאר און סול לוג ליסנינג און http לוקל הוסט 3000. ובואו נתחיל לבנות קבצי html הדבר הראשון שהייתי עושה זה בונה תיקייה בואו נקרא לה נניח פייג'ס כאן יהיו
כל הדפים שלנו כמובן שאפשר גם בתוכה לחלק אותה לתתי תיקיות אם אנחנו רוצים לפי נושאים של דפים שונים בתוך פייג'ס בואו נבנה לנו אינדקס html ואם אנחנו רושמים בוויז'ל סטודיו סימן קריאה enter אז הוא יוצר לנו אוטומטית את כל המבנה של ה html שלנו בואו נניח שה html הזה זה דף הבית אז האינדקס שלנו הוא דף הבית אז בואו נקרא לו
home ואנחנו רוצים שיהיה לנו פה h1 הום פייג' רק בשביל שנראה איזה משהו על הדף. אוקיי, הדבר הבא שאנחנו רוצים לבצע זה להנגיש את הדף הזה.
אז ספציפית הדף אינדקס html זה דף שמקובל שהוא יהיה הדף הראשון שעולה. אז כנראה שזה יהיה הדף הבית ובגלל זה כתבנו בו כרגע את דף הבית, אבל בשביל הדף הזה קיימת פקודה ספציפית שהאמת ראינו אותה בעבר, ונקודה use express נקודה static static זאת פונקציה שאומרת לנו תשמעו אני מחפשת ספציפית את אינדקס html איפה אתם רוצים שאני אחפש
אותו אז אנחנו רוצים לגשת לתיקייה הנוכחית שלנו שראינו ממש בעבר שזה underline underline dear name ואנחנו יודעים שהקובץ נמצא בתוך תיקיית pages בצורה כזאת אפשר לכתוב pages בצורה כזאת אפשר לרשום pages בצורה כזאת אני אשאיר את זה ככה אוקיי אז הנה יש לנו כרגע את ההנגשה של דף ה-HTML.
בואו נריץ את זה, node.app, go, ואנחנו רואים שהוא מאזין על הכתובת הזאת, אז אני לוחץ קונטרול, מקליק עליה, ומה שמיוחד בפקודה הזאת זה שאם אני גולש לדף הבית, אז, כלומר לכתובת הראשית התכוונתי, אז הוא מריץ את הפקודה הזאת ומחפש את הדף
הזה. כלומר, זה אוטומטית דף שמונגש בכתובת הראשית. אם אני עכשיו גולש לכתובת אחרת, בואו נניח ל-about, אז אין לי דף כזה, זה בסדר, תכף נטפל בזה.
בואו נראה מה קורה אם אני גולש ל-slash index html גם כן הוא מוצא אותו. אז בואו נישאר בצורה כזאת והנה יש לנו את ההנגשה הראשונה אבל זה ספציפית דף index html.
עכשיו מה קורה אם אני רוצה שכשהיוזר יגלוש ל-slash home כלומר לסוג של ראוט כזה. ואז אני אנגיש לו את דף הבית. כאן אנחנו צריכים לשלב מנגנון של ראוטינג שמנגיש לנו את הדפים, כי בעצם אני לא רוצה שהיוזר יגלוש לאינדקס html, אני לא רוצה שהיוזר יגלוש ל-about html, זאת אומרת הוא יכול, אבל אין היום שום טעם לעשות את זה,
יוזרים לא אמורים לדעת מה זה סיומת html. אז איך אנחנו יכולים לבצע את זה? אנחנו משתמשים עם מנגנון הראוטינג של אקספרס. server.get/home זאת אומרת אם היוזר גולש לכתובת כזאת /home אז אנחנו רוצים להפעיל את הפונקציה הבאה.
אז בואו ניגש ונכתוב request response והנה יש לנו ממש ראוט סטנדרטי. מה אנחנו רוצים לעשות אנחנו רוצים להשתמש ברספונס אבל to send back file הפונקציה send file היא יכולה לאתר את אותו הקובץ הספציפי שאנחנו מחפשים ולהחזיר אותו ליוזר.
אז אנחנו רוצים שוב פעם את dear name כי כאן נמצא לנו הקובץ משורשר עם תיקיית משורשר עם אינדקס HTML. בואו נבדוק מה קורה עכשיו.
נעצור, נריץ, נחזור בחזרה. אם אנחנו גולשים לכתובת הראשית אנחנו מקבלים את דף הבית, ואם אנחנו גולשים ל-Route Home אנחנו מקבלים את דף הבית.
בואו נעשה משהו דומה עבור About. עשיתי copy-paste של הקובץ, יש לנו פה את About, יש לנו פה את About Page. בואו נחזור, נטפל את כל זה ל-about ונגיד לו about html.