עריכה ועדכון של מוצר קיים בנוד NodeJS
edit שכתובתו /products/edit/ ואחריה product.id בתגית צד-שרת. ההבחנה: edit מאפשר למשתמש לערוך, ו-update הוא הפעולה שמתבצעת כשהוא לוחץ על הכפתור.router.get ל-/edit/:id עם try/catch. מביאים את המוצר מה-business logic לפי ה-id ממעבר request.params, ומבצעים render ל-products/edit עם המוצר, כדי שהמשתמש יראה את הערכים הקודמים. אם אין מוצר כזה, מפנים לדף page-not-found.create.ejs ל-edit.ejs, משנים כותרת, ו-action הטופס לנתיב /products/edit/ עם product.id. ה-value של השדות הוא פשוט product.name, product.price ו-product.stock, בלי טרינרי, כי בעריכה תמיד יש מוצר. הכפתור מקבל את הטקסט Update./edit/:id, מזהה מ-request.params.id בתוך המוצר, ולידציה עם validatePut (אין צורך ב-patch), ואם יש שגיאות מחזירים את דף העריכה עם המוצר והשגיאות. אחר כך קוראים ל-updateFullProduct.product.id, ודורסים את התמונה הקודמת. אם לא נשלח, התמונה הקיימת נשארת. בסוף מבצעים redirect לרשימת המוצרים.פרקי ההרצאה: עריכה ועדכון של מוצר קיים בנוד NodeJS
תמלול ההרצאה: עריכה ועדכון של מוצר קיים בנוד NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «עריכה ועדכון של מוצר קיים בנוד NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת אנחנו רוצים לעבור לעדכון מוצר. לקוח יכול לראות את כל המוצרים, לראות מוצר בודד, להוסיף מוצר, ויכול להיות שהוא ירצה גם לעדכן את המוצר. מוצר קיים כמובן.
אז בוא נניח שבשביל לעדכן מוצר נספק לו איזשהו לינק שנמצא בדף Details. אנחנו יכולים לספק לו גם אפשרות בטבלה, אבל נראה לי שפה זה בסדר, שיראה פרטים של מוצר ומכאן אם הוא רוצה שיעדכן את המוצר.
אז בואו ניקח כאן ספן עם איזשהו קו הפרדה, ובואו ניקח כאן איזשהו לינק של אדיט. שימו לב שיש הבדל בין אדיט לבין אפדייט מבחינה סמנטית.
אדיט זה הוא מאפשר למשתמש לערוך את המוצר, לרשום את הפרטים החדשים, אחרי שהוא סיים יש לו אפשרות to update. ברגע שהוא לוחץ על הלחצן, אז הוא בעצם מבין שזה כבר ה-update שהוא רוצה לבצע.
href שווה ובואו נניח שאנחנו רוצים לתת איזשהו route product/edit אבל כאשר עושים edit צריך להעביר גם את הקוד של המוצר, איזה מוצר אנחנו רוצים לעדכן.
בואו נעבור לצד שרת, השמה product.id נרווח טיפה והנה יש לו אפשרות גם ללינק כזה שמאפשר לו בלחיצה עליו להגיע לראוט של עריכת המוצר. בואו רגע נראה איפה זה מתבצע, אם אני לוחץ על צ'אי אז אני רואה פה את ה-Back to List ו-Edit, כאשר עדיין אין לנו את הראוט הזה.
שימו לב שברגע שאני מרחף עליו אני רואה כאן למטה את ה-ID שלו. אז זה בעצם חשוב כי אנחנו רוצים להשתמש עם ה-ID הזה בשרת. אז בואו נחזור ובשלב הזה ניגש לקונטרולר.
אנחנו כאמור צריכים לבנות שני ראוטים כאשר אנחנו מתעסקים עם כל דבר שהמשתמש רוצה לעדכן ולהוסיף וכדומה. הראוט הראשון זה ראוט עבור עריכת המוצר, לקבל דף שמאפשר למשתמש לערוך את המוצר הזה.
הראוט השני זה כבר ההוספה עצמה. אז בואו ניגש ל-router.get כי אנחנו רוצים לתת לו טופס לעריכה אם ה-user גולש ל-products/edit/ונותן לי ID, אנחנו רוצים לבנות לו את הפונקציה הזאת.
יש לנו פה את ה-QuestResponse, יש לנו את ה-TryCatch שלנו, בואו כבר נעתיק את ה-Catch מפה, אנחנו רוצים ב-Try לגשת ולהביא לו את המוצר הזה, קונסט פרודקט שווה wait product logic נקודה get one product.
תביא לי את המוצר, בואו רגע ניקח את ה-id שלו. יש לנו פה קונסט id יש לנו את ה-request.paramsid שולחים לו את ה-id ואז הביזנס לוג'יק מביא לנו את המוצר. למה אנחנו צריכים את המוצר?
אנחנו רוצים לבצע ריספונס נקודה רנדר ל-products/edit. אין לנו עדיין דבר כזה, כבר אנחנו הולכים לבנות אותו. ולתת לו אובייקט שמכיל את המוצר בכדי שהוא יציג לו את הפרטים הקודמים. זה לא הגיוני להביא אותו ל-edit בלי להציג לו את מה שהיה קודם במוצר. היוזר לא יכניס עכשיו את הכל מההתחלה.
הוא צריך לראות את מה היה שם ולפי זה לערוך את מה שהוא רוצה. כמובן שבואו נעתיק ונדביק את כל הקונספט של הוולידציה שהיה לנו פה. איפה היה לנו את זה? פה.
אם אין לי מוצר כזה, יוזר מאיזושהי סיבה שלח לי איזה משהו שלא קיים לי בדאטאבייס, אז אני מפנה אותו ל-page not found, אין לי מוצר כזה, או לשלוח לו איזושהי הודעת שגיאה אחרת, זה בעצם מביא לו את הדף edit בצורה כזאת.
אין לנו דף כזה, אנחנו רוצים לגשת ולבנות אותו לפני שנבנה את הראוט השני של הפוסט. אז אני אשכפל כרגע את הקריאייט כי הוא די דומה לקריאייט יש בו הרבה דברים של הקריאייט.
בואו נשכפל אותו לאדיט ונראה מה אנחנו צריכים לשנות כאן. אז בקריאייט, למה אין לי פה h2 add a new product זה היה אמור להיות לי אני לא יודע למה אין לי אותו.
ובאדיט אנחנו רוצים to edit this product או מייל אחר כלשהו. ומה שאנחנו רוצים לעשות זה כזה דבר. לאן אנחנו גולשים? בטופס.
אנחנו רוצים לגלוש לפרודקט סלאש אדיט, אבל אנחנו רוצים לשלוח את ה-id. אז יש לנו כאן את זה, ויש לנו product.id, וזה בעצם הולך להיות פוסט לראוט שני שאנחנו הולכים לבנות תכף, אבל אנחנו עוד לא כאן.
אנחנו בינתיים לא ב-create, ב-edit, אנחנו בינתיים רוצים לראות מה עוד אנחנו צריכים לשנות.
אז כשהיוזר רוצה to edit product, יש לו כמובן תיבת טקסט עבור ה-name, פליי סולדר נשאיר, למרות שאמור להיות לו כבר ערך, אבל יכול להיות שהוא ימחק אותו, אז אוטומטית הוא יראה name.
השם שלה זה name ובסדר הvalue אוטומטית מקבל את הערך אז בהחלט כאשר אני עושה edit הביאו לי מוצר אם אני נמצא כאן בקונטרולר ואנחנו עושים get לדף edit בוודאות יש פה מוצר אז זה לא המצב הקודם שכשעושים get בהתחלה אז יכול להיות גם שאין לי מוצר ולכן אנחנו יכולים להיפטר מהטרינארי הזה ולהישאר