ריאקט - Blocking Backend Route

תמלול ההרצאה: ריאקט - Blocking Backend Route

הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט - Blocking Backend Route» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אוקיי, אז מה הדבר הבא? אנחנו בנינו את כל התשתית של Redux, אנחנו בנינו סרוויס שמטפל בזה, בנינו שלוש קומפוננטות: רג'יסטר, לוג-אין ולוג-אאוט, אבל לפני שנתחיל לשלב אותם פה עם תפריט וכו', לא הגיוני שיהיה לנו בכלל רג'יסטר, לוג-אין ולוג-אאוט אם האתר מאפשר לנו להיכנס לכל מקום,

2. 00:24

   אם ה-Back-End לא חוסם אותנו. ואם אני מסתכל על האתר הזה, אז יש לנו את ה-Home, יש לנו את המוצרים, וכשאני גולש אליהם, אז אחרי שלוש שניות הוא מביא לי אותם.

3. 00:34

   והאתר מביא לי פרטים של מוצר בודד ומאפשר to edit ו-to delete את המוצר. אנחנו יכולים to edit את המוצר, אנחנו יכולים to delete את המוצר, אנחנו יכולים להוסיף מוצר חדש.

4. 00:47

   אם אני מסתכל על העובדים, בבקשה, האתר מביא לי את העובדים, ה-Backend מנגיש לי אותם. יש לי פה את ה-Support ויש לי את ה-Contact Us.

5. 00:54

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

6. 01:14

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

7. 01:34

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

8. 01:47

   אנחנו התקנו אותו על ידי פקודת npm, פקודה שהשתמשנו בשביל להתקין. אולי רגע אני אסגור אותו. בוא תסגור לי אותו, יס, ותפתח לי טרמינל רגיל לגמרי.

9. 02:01

   כאילו השתמשנו בפקודה שנקראת npm i-g והשם של ה-backend הזה היה Northwind backend. אני לא אתקין אותו כי הוא כבר מותקן. אוקיי, זה התקין לנו ספציפית את החבילה הזאת.

10. 02:16

    אם אנחנו רוצים לדעת איפה הוא מותקן במחשב, כל מחשב הוא יכול להיות מותקן במקום אחר, פקודת הבדיקה זה npm -g root. זאת פקודה שפשוט אומרת לנו איפה במחשב הנוכחי מותקנות ההתקנות הגלובליות.

11. 02:31

    הנה הנתיב. בואו ניקח את הנתיב הזה, נפתח סייר הקבצים ונגלוש אליו. גו. ופה אני רואה שיש לנו את המנגנון של טייפ סקריפט, את React CLI Snippets, זה מה שתמיד היינו רושמים קריאייט בטרמינל, React בעצמה ואת ה-Backend הזה. הנה ה-Backend

12. 02:49

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

13. 03:07

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

14. 03:22

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

15. 03:40

    נדמה לי שהקטגוריות חסומות. בואו רגע נסתכל רגע על הקטגוריות. הנה זה, Verify Logged In, אז אני מעתיק את השורה הזאת ומדביק פה, אדביק אותה כאן נניח.

16. 03:55

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

17. 04:17

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

18. 04:40

    אני שומר את זה כמובן ושימו לב שסתם פתחתי את זה עם Notepad,