יצירת אפליקציית ה- Nuxt הראשונה שלך – חנות ספרים של CRUD

למדו כיצד ליצור יישום Nuxt.


CRUD – יצירה, קריאה, עדכון, מחיקה

אני מניח שאתה כבר יודע את היסודות של Vue JS ו / או שאתה קצת מכיר את המסגרת. Nuxt JS הוא מסגרת איתנה, הבנויה על Vue JS. זה זהה למעשה ל- Vue JS. אז למה, נוסט?

לרוב האנשים, ההחלטה להשתמש ב- Nuxt JS היא לרוב עבור יכולות ה- SSR שלה.

מה זה SSR?

SSR הוא קיצור של Server Side Rendering.

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

Nuxt JS נותן למפתחים את היכולת ליצור יישומי SSR בקלות. ניתן להגדיר אפליקציות רגילות של VS JS SPA לשימוש ב- SSR, אך התהליך מסורבל במקצת, ו- Nuxt JS מספק עטיפה לטיפול בכל התצורה ההיא. מלבד ה- SSR, Nuxt מספקת גם דרך קלה להגדיר את פרוייקט VueJS שלך ביעילות רבה יותר.

למרות ש- Nuxt JS הוא עדיין Vue JS, יש לו כמה הבדלים מהותיים באופן בו מבנה ארכיטקטורת התיקיות שלו.

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

דפים

תיקיית הדפים היא אחד ההבדלים המהותיים מה- SPA הרגיל. הוא מייצג את תיקיית התצוגות בארכיטקטורת Vue רגילה, mores o, ב- Nuxt, קבצים שנוצרו בתיקיית העמודים מוגדרים אוטומטית כנתיב. כלומר, כשאתה יוצר קובץ index.vue בתיקיית העמודים, ההופך אוטומטית לנתיב השורש שלך, כלומר localhost: 3000 /.

כמו כן, כשאתה יוצר קובץ name.vue אחר, הוא הופך לנתיב – יצירת about.vue מאפשרת לך גישה ל localhost: 3000 / בערך.

באפשרותך גם ליצור תיקיה בתיקיית העמודים. אם אתה יוצר תיקיה בשם ‘איש קשר’ ובתיקיה זו יש לך email.vue, תוכל לגשת ל- localhost: 3000 / contact / email. זה כל כך פשוט. בדרך זו, אינך צריך ליצור ידנית קובץ router.js כפי שאתה עושה בדרך כלל עם Vue JS כדי ליצור את המסלולים שלך..

רכיבים

זה עדיין פחות או יותר כמו עם Vue JS, רכיבים שנוצרו אינם מוגדרים אוטומטית כנתיבים.

סטטי

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

אתה יכול לקרוא הכל על הארכיטקטורה והמבנה בבית דף תיעוד של Jxt NuS.

עכשיו, בואו נבנה משהו מעניין …

בניית אפליקציה לחנות ספרים

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

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

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

ראשית, אנו מתקינים את Nuxt:

npm התקן create-nuxt-app

שנית, לאחר התקנת Nuxt, כעת תוכלו ליצור את הפרויקט עם הפקודה,

חנות book-nuxt-app

אני בוחר לקרוא לאפליקציה שלי ‘חנות ספרים’; אתה יכול לקרוא למשהו מגניב יותר ^ _ ^

לאחר מכן, בואו נעבור דרך ההנחיות שנותרו, הזן תיאור,

שם מחבר, הקלד שם או הקש Enter כדי לשמור על ברירות המחדל

בחר מנהל חבילות, לא משנה מה נוח לך, שתיהן בסדר

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

בחר מסגרת שרת מותאמת אישית; איננו זקוקים לשום דבר, אני לא אבחר באף אחד

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

המוך הוא חשוב. בוא נלך עם ESLint.

למרות שבדיקה חשובה, לא נבחן את זה היום, כך שאף אחד מהם לא

מצב טיוח, כן SSR זה כן.

הערה: בחירת SSR לא אומרת שאנחנו לא נהנים מהיתרון של SPA, האפליקציה עדיין נשארת SPA אבל עם SSR. אפשרות אחרת פירושה פשוט SPA וללא SSR.

לחץ על Enter והמשיך הלאה,

והפרויקט שלנו יוצר,

לאחר היצירה, נוכל כעת להיכנס לספרייה ולהריץ

חוט dev

אם אתה משתמש ב- npm כמנהל החבילות שלך, השתמש,

npm לרוץ dev

כברירת מחדל, האפליקציה פועלת ב- localhost: 3000. בקר בקישור בדפדפן שלך, ועליך לראות עמוד ברירת מחדל של Nuxt.

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

כדי ליצור רכיב, פשוט צור קובץ חדש בתיקיית הרכיבים. הנה הקוד לרכיב הכרטיס שלי.

// BookCard.vue

{{כותרת הספר}}
{{bookAuthor}}
{{תיאור ספר}}

ייצוא ברירת מחדל {
אבזרים: ["כותרת הספר", "ספר מחבר", "תיאור ספר"]
};

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

עכשיו לרכיב הבא, המודאלי.

//BookModal.vue

הוסף ספרים

הוסף

עכשיו זה הסימון למודאלי; עלינו ליצור את דגמי ה- v כמאפייני נתונים; לכן נוסיף תג סקריפט מתחת לתג.

ייצוא ברירת מחדל {
נתונים() {
חזור {
קטגוריה: "",
כותרת: "",
מחבר: "",
תיאור: "",
};
},
}

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

ייצוא ברירת מחדל {
נתונים() {
חזור {
פתוח: שקר,
קטגוריה: "",
כותרת: "",
מחבר: "",
תיאור: "",
קטגוריות: ["קראו ספרים לאחרונה", "ספרים אהובים", "הטובים שבטובים"]
};
},
}

כעת, אנו זקוקים לדרך להחליף את המודול לפתוח ולסגור, לעת עתה, יהיה לנו רק מאפיין נתונים ‘פתוח’ כנ”ל. אנו נבחן מקרוב את הבא.

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

//index.vue

קרא לאחרונה ספרים

ספרים אהובים

הטובים שבטובים

עכשיו כשיש לנו את הרשתות שלנו, עלינו להוסיף את רכיב הכרטיס שלנו לכל רשת, עבור כל ספר שנוסף. לכן נייבא את רכיב BookCard.vue שלנו.

קרא לאחרונה ספרים

ערוך
הסר

ספרים אהובים

ערוך
הסר

הטובים שבטובים

ערוך
הסר

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

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

ייבא את BookCard מ- "@ / רכיבים / BookCard";

ייצוא ברירת מחדל {
רכיבים: {
BookCard,
},
נתונים() {
חזור {
ספרים אחרונים: [],
ספרי favourite: [],
הטובים שבטובים: []
};
},
};

בשלב הבא עלינו להיות בכפתור כפתור שיפתח את המודול בכל פעם שנצטרך להוסיף ספרים. אנו נעשה זאת בקובץ ‘default.vue’. נוסיף את הכפתור לכותרת ברירת המחדל של סרגל האפליקציות.

הוסף ספרים

בשלב הבא, עלינו ליצור את השיטה openModal בקטע הסקריפט. באפליקציות Vue JS רגילות, יש אוטובוס לאירועים שמאפשר לך לתקשר עם רכיב אחר ואפילו להעביר נתונים לרוחב, ב- Nuxt JS, יש עדיין אוטובוס לאירועים ועדיין אתה יכול ליצור אותו באותה צורה. אז אנו נשתמש באוטובוס אירועים כדי להעביר נתונים לפתיחת מודול בדף index.vue (שעוד לא נייבא) מקובץ הפריסה / default.vue.

בואו נראה איך זה נעשה.

ליצירת אוטובוס אירועים גלובלי, פתח קובץ בספריית השורש של הפרויקט, שם אותו eventBus.js והדבק בו את הקוד למטה..

ייבא Vue מ- ‘vue’

ייצוא const eventBus = Vue חדש ()

כן, זה הכל. עכשיו נוכל להשתמש בזה.

ייבא את {eventBus} מ- "@ / eventBus";
שיטות: {
openModal () {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי");
}
}

בשלב הבא נחזור לרכיב BookModal שלנו, ונשמע מתי האירוע בוס פולט ‘מודול פתוח-להוסיף-ספר-להוסיף. נוסיף זאת למדור התסריט.

ייבא את {eventBus} מ- "@ / eventBus";

נוצר () {
eventBus. $ על ("פתוח-להוסיף ספר-מודאלי", this.open = נכון);
},

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

שיטות: {
saveBook () {
תן cardData = {
כותרת: זה. כותרת,
מחבר: זה. מחבר,
תיאור: תיאור זה,
קטגוריה: זה. קטגוריה
};
eventBus. $ פולט ("שמור ספר", cardData);
this.open = שקר;
}
}

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

נוצר () {
eventBus. $ על ("פתוח-להוסיף ספר-מודאלי", נתונים => {
אם (נתונים) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
זה. תיאור = נתונים.
}
this.open = נכון;
});
},

כעת, BookModal נראה כך בכללותו,

//BookModal.vue

הוסף ספרים

הוסף

ייבא את {eventBus} מ- "@ / eventBus";
ייצוא ברירת מחדל {
נתונים() {
חזור {
פתוח: שקר,
קטגוריה: "",
כותרת: "",
מחבר: "",
תיאור: "",
קטגוריות: ["קראו ספרים לאחרונה", "ספרים אהובים", "הטובים שבטובים"]
};
},
נוצר () {
eventBus. $ על ("פתוח-להוסיף ספר-מודאלי", נתונים => {
אם (נתונים) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
זה. תיאור = נתונים.
}
this.open = נכון;
});
},
שיטות: {
saveBook () {
תן cardData = {
כותרת: זה. כותרת,
מחבר: זה. מחבר,
תיאור: תיאור זה,
קטגוריה: זה. קטגוריה
};
eventBus. $ פולט ("שמור ספר", cardData);
this.open = שקר;
}
}
};

בשלב הבא נוכל לחזור לדף index.vue כדי לייבא את רכיב BookModal. נוסיף זאת למדור התסריט.

ייבא את BookCard מ- "@ / רכיבים / BookCard";
ייבא את BookModal מ- "@ / רכיבים / BookModal";
ייבא את {eventBus} מ- "@ / eventBus";

ייצוא ברירת מחדל {
רכיבים: {
BookCard,
BookModal
},
נתונים() {
חזור {
ספרים אחרונים: [],
ספרי favourite: [],
הטובים שבטובים: []
};
},

כמו כן, בגוף, נוסיף,

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

ערוך הסר

בואו ליצור את השיטות.

שיטות: {
הסר (קטגוריה, אינדקס) {
אם (קטגוריה === "קראו ספרים לאחרונה") {
this.recentBooks.splice (אינדקס, 1);
}
אם (קטגוריה === "ספרים אהובים") {
this.favouriteBooks.splice (אינדקס, 1);
}
אם (קטגוריה === "הטובים שבטובים") {
this.bestOfTheBest.splice (אינדקס, 1);
}
},
עריכה (פריט, אינדקס) {
if (item.category === "קראו ספרים לאחרונה") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.recentBooks.splice (אינדקס, 1);
}
if (item.category === "ספרים אהובים") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.favouriteBooks.splice (אינדקס, 1);
}
if (item.category === "הטובים שבטובים") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.bestOfTheBest.splice (אינדקס, 1);
}
}
}

זכרו, BookModal פולט, ואירוע שנקרא save-book, אנו זקוקים למאזין לאירוע הזה כאן.

נוצר () {
eventBus. $ על ("שמור ספר", cardData => {
if (cardData.category === "קראו ספרים לאחרונה") {
this.recentBooks.push (cardData);
}
if (cardData.category === "ספרים אהובים") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "הטובים שבטובים") {
this.bestOfTheBest.push (cardData);
}
});
},

כעת, במבט שלם אחד, עמוד ה- index.vue שלנו נראה כך

קרא לאחרונה ספרים

נוף

ערוך
הסר

ספרים אהובים

ערוך
הסר

הטובים שבטובים

ערוך
הסר

ייבא את BookCard מ- "@ / רכיבים / BookCard";
ייבא את BookModal מ- "@ / רכיבים / BookModal";
ייבא את {eventBus} מ- "@ / eventBus";

ייצוא ברירת מחדל {
רכיבים: {
BookCard,
BookModal
},
נתונים() {
חזור {
ספרים אחרונים: [],
ספרי favourite: [],
הטובים שבטובים: []
};
},
נוצר () {
eventBus. $ על ("שמור ספר", cardData => {
if (cardData.category === "קראו ספרים לאחרונה") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((א, ב) => ב – א);
}
if (cardData.category === "ספרים אהובים") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((א, ב) => ב – א);
}
if (cardData.category === "הטובים שבטובים") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((א, ב) => ב – א);
}
});
},
שיטות: {
הסר (קטגוריה, אינדקס) {
אם (קטגוריה === "קראו ספרים לאחרונה") {
this.recentBooks.splice (אינדקס, 1);
}
אם (קטגוריה === "ספרים אהובים") {
this.favouriteBooks.splice (אינדקס, 1);
}
אם (קטגוריה === "הטובים שבטובים") {
this.bestOfTheBest.splice (אינדקס, 1);
}
},
עריכה (פריט, אינדקס) {
if (item.category === "קראו ספרים לאחרונה") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.recentBooks.splice (אינדקס, 1);
}
if (item.category === "ספרים אהובים") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.favouriteBooks.splice (אינדקס, 1);
}
if (item.category === "הטובים שבטובים") {
eventBus. $ פולט ("פתוח-להוסיף ספר-מודאלי", פריט);
this.bestOfTheBest.splice (אינדקס, 1);
}
}
}
};

אם הגעת עד כה, איוב נהדר !!! אתה מדהים!

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

בואו נראה איך.

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

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

נוף

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

רק להפגנה, נגיש רק לנכס הפארמים שבתיק.

// _title / index.vue

{{$ route.params.title}}

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

זהו זה בשיעור הזה!

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map