ایجاد اولین برنامه Nuxt شما – فروشگاه کتاب CRUD

بیاموزید که چگونه یک برنامه Nuxt بسازید.


CRUD – ایجاد ، خواندن ، بروزرسانی ، حذف

فرض می کنم که شما اصول اولیه Vue JS را می شناسید و یا کمی با چارچوب آشنا هستید. Nuxt JS یک چارچوب محکم است که در Vue JS ساخته شده است. در اصل همان Vue JS است. پس چرا ، Nuxt?

برای اکثر مردم ، تصمیم به استفاده از Nuxt JS معمولاً برای قابلیت های SSR آن است.

SSR چیست؟?

SSR مخفف مخفف Server Side Rendering است.

معمولاً در بیشتر برنامه های Single Page (SPA) ، پس از بارگیری صفحه ، پرونده های ارائه شده به صورت خودکار به DOM تزریق می شوند. از این رو ، رباتها ، خزندگان سئو ، صفحه خالی را در بارگیری صفحه پیدا می کنند. با این حال ، برای SSR ، به دلیل توانایی پیش نمایش برنامه در سرور قبل از صفحه ، می توان آن صفحه را توسط خزندگان سئو به راحتی فهرست بندی کرد. همچنین ، احتمالاً باعث می شود برنامه از عملکرد SPA معمولی حتی عملکرد بیشتری داشته باشد.

Nuxt JS به توسعه دهندگان امکان ایجاد برنامه های SSR را با سهولت می دهد. برای استفاده از SSR ، برنامه های معمولی Vue JS SPA نیز می توانند پیکربندی شوند ، اما این روند تا حدودی دشوار است و Nuxt JS یک بسته بندی را برای رسیدگی به تمام آن پیکربندی فراهم می کند. علاوه بر SSR ، Nuxt همچنین راهی آسان برای راه‌اندازی پروژه VueJS با راندمان بیشتر فراهم می کند.

اگرچه Nuxt JS هنوز Vue JS است ، اما در نحوه ساخت معماری پوشه آن تفاوت های اساسی دارد.

تمرکز این مقاله برای شما امکان پذیر است ساخت یک برنامه با Nuxt؛ از این رو, ما نمی خواهیم عمیق به معماری پوشه Nuxt برویم ، با این حال ، من به سرعت برخی از موارد مهم را که ممکن است در اینجا به آنها نیاز داشته باشیم توضیح خواهم داد..

صفحات

پوشه صفحات یکی از تفاوتهای اساسی با معمولی Vue SPA است. این نمایه پوشه Views را در معماری منظم Vue ، بیشتر o ، در Nuxt ، فایلهای ایجاد شده در پوشه Pages به صورت خودکار به عنوان یک مسیر تهیه می کنند. به این معنا ، وقتی یک فایل index.vue را در پوشه صفحات ایجاد می کنید ، این به طور خودکار تبدیل به مسیر اصلی شما می شود ، یعنی localhost: 3000 /.

همچنین ، هنگامی که نام فایل.vue دیگر را ایجاد می کنید ، به مسیری تبدیل می شود – ایجاد about.vue به شما امکان دسترسی به localhost را می دهد: 3000 / در مورد.

همچنین می توانید پوشه ای را درون پوشه Pages ایجاد کنید. اگر پوشه ای به نام «مخاطب» ایجاد کنید و درون آن پوشه ، ایمیل.vue داشته باشید ، می توانید به localhost: 3000 / contact / email دسترسی پیدا کنید. این ساده است. به این ترتیب ، نیازی به ایجاد دستی پرونده router.js نیست ، همانطور که معمولاً با Vue JS انجام می دهید تا مسیرهای خود را ایجاد کنید.

اجزاء

این تقریباً مشابه با Vue JS است ، اجزای ایجاد شده به طور خودکار به عنوان مسیر ارائه نمی شوند.

استاتیک

پوشه استاتیک جایگزین پوشه عمومی در برنامه های معمولی Vue JS می شود که تقریباً یکسان است. پرونده ها در اینجا کامپایل نمی شوند. آنها به همان روشی که ذخیره می شوند ، ارائه می شوند.

شما می توانید همه چیز در مورد معماری و ساختار موجود در صفحه اسناد Nuxt JS.

اکنون ، بیایید چیزی جالب بسازیم …

ساخت یک برنامه فروشگاه کتاب

ما در حال ساختن یک برنامه فروشگاه کتاب هستیم ، در آنجا کاربر می تواند کتابهایی را که خوانده است به یک دسته خاص که دوست دارد اضافه کند. شبیه این خواهد شد.

بنابراین ، مانند طرح فوق ، ما یک طرح ساده خواهیم داشت ، فقط 3 ستون حاوی بخش های مختلف کتاب. اخیراً کتابها ، کتابهای مورد علاقه و بهترین بلیت ها را خوانده ام ، بله ، بهترین کتابها (من اعتراف می کنم ، نمی دانم چه بخش را بخوانم ، ��)

بنابراین در اینجا هدف این است که بتوانیم عنوان ، نویسنده و توضیحات کتاب را در هر یک از بخش ها به کارت اضافه کنیم ، کتاب های اضافه شده را ویرایش کرده و یک کتاب موجود را حذف کنیم. ما از هیچ دیتابیس استفاده نمی کنیم ، بنابراین همه چیز در ایالت اتفاق می افتد.

ابتدا Nuxt را نصب می کنیم:

npm install ایجاد-nuxt-برنامه را نصب کنید

دوم ، بعد از نصب Nuxt ، اکنون می توانید پروژه را با دستور ایجاد کنید,

ایجاد-nuxt-bookbook فروشگاه

برنامه خود را “bookStore” نامگذاری می کنم. می توانید چیزی خنک کننده خود را بنویسید ^ _ ^

سپس ، بیایید از طریق قسمت های باقیمانده راه برویم ، توضیحی را وارد کنید,

برای حفظ پیش فرض ، نام نویسنده ، یک نام را تایپ کنید یا کلید Enter را فشار دهید

مدیر بسته را انتخاب کنید ، هر کدام از آنها راحت باشید ، هر دو خوب هستند

یک چارچوب UI را انتخاب کنید. برای این پروژه ، من از Vuetify استفاده خواهم کرد ، سپس دوباره ، هر چارچوبی رابط کاربری UI که با آن راحت هستید ، بسیار خوب خواهد بود.

یک چارچوب سرور اختصاصی را انتخاب کنید. به هیچکس احتیاج نداریم ، من هیچ کدام را انتخاب نخواهم کرد

ماژول های اضافی ، آنچه را که می خواهید انتخاب کنید ، یا هر دو را انتخاب کنید ، ما نمی خواهیم از آنها برای این برنامه استفاده کنیم.

پوشش مهم است. بیایید با ESLint برویم.

در حالی که آزمایش مهم است ، ما امروز به آن نگاه نمی کنیم ، بنابراین هیچ کدام

حالت ارائه ، بله SSR است.

توجه: انتخاب SSR به این معنی نیست که ما از داشتن SPA بهره نمی بریم ، برنامه هنوز هم یک SPA اما با SSR باقی مانده است. گزینه دیگر به معنای SPA و بدون SSR است.

وارد شوید و حرکت کنید,

و پروژه ما در حال ایجاد است,

پس از ایجاد ، اکنون می توانیم وارد دایرکتوری شده و اجرا کنیم

نخ دیو

اگر از npm به عنوان مدیر بسته خود استفاده می کنید ، استفاده کنید,

npm run dev

به طور پیش فرض ، برنامه در localhost اجرا می شود: 3000. به پیوند موجود در مرورگر خود مراجعه کرده و باید صفحه پیش فرض Nuxt را مشاهده کنید.

اکنون بیایید با ایجاد مؤلفه های مورد نیاز خود شروع کنیم. کارتهایی خواهیم داشت که اطلاعات هر کتاب را نشان می دهند ، و ماژول حاوی یک فرم را برای وارد کردن اطلاعات جدید کتاب یا ویرایش موارد موجود خواهیم داشت..

برای ایجاد یک جزء ، به سادگی یک فایل جدید را در پوشه کامپوننت ها ایجاد کنید. در اینجا کد مربوط به جزء کارت من است.

// BookCard.vue

{{عنوان کتاب}}
{{کتاب خودکار}}
{{توضیحات کتاب}}

صادرات پیش فرض {
غرفه ها: ["عنوان کتاب", "کتاب خودکار", "توضیحات کتاب"]
؛

توضیح سریع در مورد آنچه در بالا انجام شده است. تصویر هارد کد شده است. فعلاً به این موضوع زحمت نخواهیم داد. عنوان کتاب ، نویسنده کتاب و توضیحات کتاب از صفحه اصلی به عنوان پیش نویس به این مؤلفه منتقل می شود. اگر با پروانه ها آشنایی ندارید ، تصور کنید که نقاط ورودی از طریق این مؤلفه می توانند با داده ها جمع شوند.

اکنون به مؤلفه بعدی ، مودال.

//BookModal.vue

اضافه کردن کتاب

اضافه کردن

اکنون ، این نشانه گذاری برای معین است. ما باید مدلهای v را به عنوان ویژگی داده ایجاد کنیم. بنابراین ، ما یک برچسب اسکریپت را در زیر برچسب اضافه خواهیم کرد.

صادرات پیش فرض {
داده ها() {
برگشت {
دسته بندی: "",
عنوان: "",
نویسنده: "",
شرح: "",
؛
},
}

همچنین ، یک “کشش دسته بندی” را انتخاب کنید که منتظر داده های “دسته ها” است. ما آن را به داده ها اضافه خواهیم کرد.

صادرات پیش فرض {
داده ها() {
برگشت {
باز: نادرست,
دسته بندی: "",
عنوان: "",
نویسنده: "",
شرح: "",
دسته بندی ها: ["اخیراً کتاب خوانده اید", "کتاب های مورد علاقه", "بهترین بهترینها"]
؛
},
}

اکنون ، ما به راهی نیاز داریم تا حالت معین خود را باز و بسته کنیم ، اکنون برای مثال ، ویژگی داده “باز” ​​مانند فوق را داریم. در ادامه به آن نگاه خواهیم کرد.

بیایید به سرعت صفحه نمایش خود را ایجاد کنیم که در آن سه شبکه / ستون خواهیم داشت ، یکی برای هر بخش از کتاب. بیایید با صفحه صفحه تماس بگیریم. کد زیر را ببینید.

//index.vue

اخیراً کتاب خوانده اید

کتاب های مورد علاقه

بهترین بهترینها

اکنون که شبکه های خود را داریم ، برای هر کتاب اضافه شده ، باید جزء کارت خود را به هر شبکه اضافه کنیم. بنابراین ، ما مؤلفه BookCard.vue خود را وارد خواهیم کرد.

اخیراً کتاب خوانده اید

ویرایش کنید
برداشتن

کتاب های مورد علاقه

ویرایش کنید
برداشتن

بهترین بهترینها

ویرایش کنید
برداشتن

اکنون ، ما مؤلفه BookCard را وارد کرده ایم و نتایج آن را به نتایج حاصل از حلقه محدود می کنیم. این تضمین می کند که برای هر ورودی اضافه شده به هر یک از بخش ها ، کارت ایجاد شده برای آن وجود دارد. همچنین در هر کارت دکمه هایی را برای ویرایش یا حذف یک کارت درج خواهیم کرد.

حال باید کارت را از اسکریپت وارد کنیم و آرایه هایی را که برای هر یک از دسته ها دارای سوابق هستند ، تعریف کنیم.

وارد کردن BookCard از "@ / parts / BookCard"؛

صادرات پیش فرض {
اجزاء: {
BookCard,
},
داده ها() {
برگشت {
کتابهای اخیر: [],
کتاب های مورد علاقه: [],
بهترین بهترینها: []
؛
},
؛

در مرحله بعد ، باید یک دکمه در هدر داشته باشیم که هر وقت لازم باشد کتاب اضافه کنیم ، مودال را باز می کنیم. ما این کار را در پرونده “default.vue” انجام خواهیم داد. ما دکمه را به هدر نوار برنامه پیش فرض اضافه خواهیم کرد.

اضافه کردن کتاب

در مرحله بعدی ، ما نیاز به ایجاد متد openModal در بخش اسکریپت داریم. در برنامه های معمولی Vue JS یک اتوبوس رویداد وجود دارد که به شما امکان می دهد با یک مؤلفه دیگر ارتباط برقرار کرده و حتی داده ها را نیز منتقل کنید ، در Nuxt JS هنوز یک اتوبوس رویداد وجود دارد و هنوز هم می توانید آن را به همان روش ایجاد کنید. بنابراین ، ما از یک اتوبوس رویداد برای عبور داده استفاده می کنیم تا یک مودال را در صفحه index.vue (که ما هنوز وارد آن نیستیم) از پرونده layout / default.vue استفاده کنیم.

بیایید ببینیم که چگونه این کار انجام شده است.

برای ایجاد یک اتوبوس رویداد جهانی ، یک پرونده را در فهرست اصلی پروژه باز کنید ، آن را eventBus.js بنویسید و کد زیر را در آن جایگذاری کنید.

واردات Vue از “vue”

export const eventBus = Vue جدید ()

بله ، همه اکنون می توانیم از آن استفاده کنیم.

وارد کردن {eventBus از "@ / eventBus"؛
مواد و روش ها: {
openModal ()
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین")؛
}
}

در مرحله بعد ، ما به مؤلفه BookModal خود باز خواهیم گشت و هنگامی که eventBus منتشر می شود “متن اضافه-کتاب-معین” را می شنویم ، گوش خواهیم داد. ما این را به بخش اسکریپت اضافه خواهیم کرد.

وارد کردن {eventBus از "@ / eventBus"؛

ایجاد شده() {
eventBus. $ on ("کتاب اضافه کردن-کتاب-معین", this.open = true)؛
},

اکنون ، ما می توانیم مدال خود را باز و بسته کنیم ، اما هنوز هیچ کتابی اضافه نمی شود. بیایید یک متد به Modal اضافه کنیم تا بتواند آنچه را که به حالت اضافه شده است ذخیره می کند (به یاد داشته باشید که ما از هیچ پایگاه داده یا ذخیره محلی استفاده نمی کنیم). ما این مورد را در کنار “ایجاد شده ()” اضافه می کنیم

مواد و روش ها: {
saveBook ()
let cardData =
عنوان: this.title,
نویسنده: this.author,
توضیحات: this.description,
دسته: این دسته بندی
؛
eventBus. $ emit ("صرفه جویی در کتاب", cardData)؛
this.open = false؛
}
}

در مرحله بعدی ، هنگام ویرایش داده ها از هر یک از کارت ها ، به راهی برای دوباره جمع کردن مودال نیاز داریم. بیایید اصلاحاتی را در “ایجاد شده” ایجاد کنیم

ایجاد شده() {
eventBus. $ on ("کتاب اضافه کردن-کتاب-معین", داده => {
اگر (داده)
this.categoria = data.categ؛
this.title = data.title؛
this.author = data.author؛
this.description = data.description؛
}
this.open = true؛
})؛
},

اکنون ، BookModal به طور کلی به نظر می رسد,

//BookModal.vue

اضافه کردن کتاب

اضافه کردن

وارد کردن {eventBus از "@ / eventBus"؛
صادرات پیش فرض {
داده ها() {
برگشت {
باز: نادرست,
دسته بندی: "",
عنوان: "",
نویسنده: "",
شرح: "",
دسته بندی ها: ["اخیراً کتاب خوانده اید", "کتاب های مورد علاقه", "بهترین بهترینها"]
؛
},
ایجاد شده() {
eventBus. $ on ("کتاب اضافه کردن-کتاب-معین", داده => {
اگر (داده)
this.categoria = data.categ؛
this.title = data.title؛
this.author = data.author؛
this.description = data.description؛
}
this.open = true؛
})؛
},
مواد و روش ها: {
saveBook ()
let cardData =
عنوان: this.title,
نویسنده: this.author,
توضیحات: this.description,
دسته: این دسته بندی
؛
eventBus. $ emit ("صرفه جویی در کتاب", cardData)؛
this.open = false؛
}
}
؛

در مرحله بعد ، اکنون می توانیم به صفحه index.vue برگردیم تا مؤلفه BookModal وارد شود. ما این را به بخش اسکریپت اضافه خواهیم کرد.

وارد کردن BookCard از "@ / parts / BookCard"؛
وارد کردن BookModal از "@ / مؤلفه ها / BookModal"؛
وارد کردن {eventBus از "@ / eventBus"؛

صادرات پیش فرض {
اجزاء: {
BookCard,
BookModal
},
داده ها() {
برگشت {
کتابهای اخیر: [],
کتاب های مورد علاقه: [],
بهترین بهترینها: []
؛
},

همچنین در بدن اضافه خواهیم کرد,

برای ویرایش و حذف کارت نیاز به روش هایی داریم. در قالب قبلی ، من قبلاً روش های ویرایش و حذف را بر روی دکمه ها مطابق شکل زیر منتقل کردم ، به همین ترتیب ، در آرگومان های مورد نیاز برای هر روش نیز گذشتم.

حذف را ویرایش کنید

بیایید روش ها را ایجاد کنیم.

مواد و روش ها: {
حذف (رده ، فهرست) {
اگر (دسته === "اخیراً کتاب خوانده اید") {
this.recentBooks.splice (فهرست ، 1)؛
}
اگر (دسته === "کتاب های مورد علاقه") {
this.favouriteBooks.splice (فهرست ، 1)؛
}
اگر (دسته === "بهترین بهترینها") {
this.bestOfTheBest.splice (فهرست ، 1)؛
}
},
ویرایش (مورد ، فهرست) {
if (مورد. طبقه بندی === "اخیراً کتاب خوانده اید") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.recentBooks.splice (فهرست ، 1)؛
}
if (مورد. طبقه بندی === "کتاب های مورد علاقه") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.favouriteBooks.splice (فهرست ، 1)؛
}
if (مورد. طبقه بندی === "بهترین بهترینها") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.bestOfTheBest.splice (فهرست ، 1)؛
}
}
}

به یاد داشته باشید ، BookModal در حال پخش است و رویدادی به نام صرفه جویی در کتاب ، ما در اینجا به یک شنوندگان نیاز داریم.

ایجاد شده() {
eventBus. $ on ("صرفه جویی در کتاب", cardData => {
if (cardData.categor === "اخیراً کتاب خوانده اید") {
this.recentBooks.push (cardData)؛
}
if (cardData.categor === "کتاب های مورد علاقه") {
this.favouriteBooks.push (cardData)؛
}
if (cardData.categor === "بهترین بهترینها") {
this.bestOfTheBest.push (cardData)؛
}
})؛
},

اکنون ، با یک نگاه کلی ، صفحه index.vue ما اینگونه است

اخیراً کتاب خوانده اید

چشم انداز

ویرایش کنید
برداشتن

کتاب های مورد علاقه

ویرایش کنید
برداشتن

بهترین بهترینها

ویرایش کنید
برداشتن

وارد کردن BookCard از "@ / parts / BookCard"؛
وارد کردن BookModal از "@ / مؤلفه ها / BookModal"؛
وارد کردن {eventBus از "@ / eventBus"؛

صادرات پیش فرض {
اجزاء: {
BookCard,
BookModal
},
داده ها() {
برگشت {
کتابهای اخیر: [],
کتاب های مورد علاقه: [],
بهترین بهترینها: []
؛
},
ایجاد شده() {
eventBus. $ on ("صرفه جویی در کتاب", cardData => {
if (cardData.categor === "اخیراً کتاب خوانده اید") {
this.recentBooks.push (cardData)؛
this.recentBooks.sort ((الف ، ب) => ب – الف)؛
}
if (cardData.categor === "کتاب های مورد علاقه") {
this.favouriteBooks.push (cardData)؛
this.favouriteBooks.sort ((a، b) => ب – الف)؛
}
if (cardData.categor === "بهترین بهترینها") {
this.bestOfTheBest.push (cardData)؛
this.bestOfTheBest.sort ((a، b) => ب – الف)؛
}
})؛
},
مواد و روش ها: {
حذف (رده ، فهرست) {
اگر (دسته === "اخیراً کتاب خوانده اید") {
this.recentBooks.splice (فهرست ، 1)؛
}
اگر (دسته === "کتاب های مورد علاقه") {
this.favouriteBooks.splice (فهرست ، 1)؛
}
اگر (دسته === "بهترین بهترینها") {
this.bestOfTheBest.splice (فهرست ، 1)؛
}
},
ویرایش (مورد ، فهرست) {
if (مورد. طبقه بندی === "اخیراً کتاب خوانده اید") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.recentBooks.splice (فهرست ، 1)؛
}
if (مورد. طبقه بندی === "کتاب های مورد علاقه") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.favouriteBooks.splice (فهرست ، 1)؛
}
if (مورد. طبقه بندی === "بهترین بهترینها") {
eventBus. $ emit ("کتاب اضافه کردن-کتاب-معین", مورد)؛
this.bestOfTheBest.splice (فهرست ، 1)؛
}
}
}
؛

اگر این کار را به دور کردید ، عالی کار !!! شما عالی هستند!

همانطور که قبلاً نیز اشاره شد ، هر پرونده .vue ایجاد شده در پوشه صفحات به طور خودکار برای هر پوشه ایجاد شده در پوشه صفحات به صورت خودکار ارائه می شود. این فقط برای صفحات ایستا نیست و صفحات پویا نیز می توانند از این طریق ایجاد شوند!

بیایید ببینیم چگونه.

با استفاده از پروژه فعلی ، بیایید بگوییم که می خواهیم یک صفحه پویا برای همه کارتهای کتاب را با یک دکمه مشاهده اضافه کنیم تا جزئیات بیشتری را درباره یک کتاب مشاهده کنیم.

بیایید به سرعت یک دکمه نمایش اضافه کنیم و از یک برای بازدید از صفحه استفاده کنیم. بله ، جایگزین می شود و کار می کند.

چشم انداز

در مرحله بعد ، با پیشوند نام با یک underers یک پوشه پویا ایجاد می کنیم. یعنی _title و در داخل آن پوشه ، یک فایل index.vue خواهیم داشت که هنگام بازدید از آن مسیر ، رندر می شود.

فقط برای نمایش ، فقط به ویژگی پارامترهای موجود در پرونده دسترسی خواهیم داشت.

// _title / index.vue

route {$ مسیر.params.title}

اکنون ، وقتی ما روی مشاهده کلیک می کنیم ، صفحه دیگری باز می شود که می توانیم عنوانی را که از مسیر عبور کرده ایم ببینیم. این می تواند برای انجام هر کاری که می خواهیم تا آنجا که به صفحات پویا مربوط می شود ، توسعه یابد.

این برای این درس است!

کد کامل این مورد را می توانید در این قسمت پیدا کنید مخزن. شما برای کمک به کد خوش آمدید. اگر شما علاقه مند به تسلط بر چارچوب هستید ، من این موضوع را پیشنهاد می کنم البته Udemy.

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