PracticU

יצירת Login Component

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Login Component
מילון מושגים:
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
שם משתמש - מזהה ייחודי שמשתמש מזין כדי להזדהות במערכת, לרוב יחד עם סיסמה.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
בקשה - פנייה שלקוח שולח לשרת כדי לקבל מידע או לבצע פעולה. השרת מחזיר עליה תגובה.
קוד סטטוס - מספר שהשרת מחזיר בתגובת HTTP ומציין את תוצאת הבקשה, למשל 200 להצלחה או 404 לא נמצא.
יצירת Login Component
בניית טופס כניסה (Login) בהתבסס על טופס ההרשמה הקיים, ובדיקה שלו מול ה-Backend.
השלבים העיקריים
1. יצירת הקומפוננטה: יוצרים קומפוננטה בשם AuthArea ומעתיקים אליה את ה-CSS מטופס ההרשמה, עם שינוי השם ל-Login.
2. העתקת הקוד: מעתיקים את מה שדומה: useForm, useNavigate והייבוא של AuthService. מייבאים CredentialsModel במקום UserModel.
3. שינויי הטופס: משאירים רק username ו-password, בלי שם פרטי ושם משפחה. ב-submit קוראים ל-authService.login עם אובייקט credentials, מציגים הודעת הצלחה ומנתבים לדף הבית.
4. קוד ריוויו: אחרי העתקה והדבקה בהיקף כזה כדאי לעבור על הקוד.
5. ראוט ובדיקה: שכפול ראוט ל-login ב-Layout. נבדקו שתי כניסות: עם ערכים לא קיימים, ואחר כך עם המשתמש שנרשם קודם (דנה).
שימו לב
- בכניסה כושלת מוצגת השגיאה Request failed with status code 401. זו שגיאת ה-Axios ולא ההודעה שה-Backend החזיר. משתמש לא יבין אותה, ולכן יטופל בהמשך איך להציג שגיאות כמו שצריך.
- הכניסה עם משתמש תקין מצליחה וההודעה על הצלחה מוצגת.
אחרי ההרצאה יש טופס כניסה שעובד מול ה-Backend.
השיעור הבא בקורס: יצירת Logout Component

פרקי ההרצאה: יצירת Login Component

  1. 00:00

    שכפול הקומפוננטה ל-Login

  2. 00:45

    התאמת הטופס לכניסה

  3. 01:27

    שימוש ב-credentials וקריאה ל-login

תמלול ההרצאה: יצירת Login Component

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

  1. 00:02

    All right, אז אנחנו רוצים לבנות כרגע את ה-Login Component. החזרתי את הפקודה הזאת, Create FC Out Area, במקום Register Login לתוך Out Area כמובן, ובואו כבר נטפל ב-CSS.

  2. 00:22

    ניקח את כל ה-CSS לכאן, ובמקום ה-Register אנחנו רוצים לכתוב Login. סגרנו CSS במהירות. הדבר הבא בואו ניקח מפה אולי את זה כי אנחנו כן צריכים משהו דומה אז אני אעשה copy וניגש לפה ונדביק נעשה paste מה עוד אני צריך את כל החבריה האלה כמובן נדליק use form אנחנו רוצים user model out service מעולה ולהתחיל לראות מה צריך לשנות אז קודם כל זה אחת

  3. 01:02

    time שלוש הולך להיות לוגין בית פורום אותו דבר first name ו-last name ממש לא צריך ללוגין ביי user name ו-password ולחצנו מעולה סגרנו את זה בואו נראה איך כאן אנחנו לא מתעסקים עם user מודל אלא עם credentials מודל וזה נכנס לפה זה לא יהיה אובייקט user זה יהיה אובייקט credentials

  4. 01:30

    ואנחנו לא קוראים לregister אלא ל-login, את זה אפשר להוריד. בואו נעשה קוד ריוויו. כל פעם שעושים קופי פייסט ב-level כזה, עדיף לעשות קוד ריוויו.

  5. 01:42

    היסטורי יש לנו, use form יש לנו, מתעסק עם קרדנשלס מודל, הנה submit, cloud service login, credentials, you have been successfully logged in. מעולה.

  6. 01:55

    ומנתבים ל-home נניח, catch, נראה בסדר. נראה בסדר.

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: יצירת Registration Component

ההרצאה הבאה: יצירת Logout Component

הרצאות קשורות מקורסים אחרים

  • לוגין לענן - az login
  • Component Testing
  • Component Communitaction
  • בניית עמוד LOGIN אמיתי מאפס בשפת DART

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS