shopid
shopid
خواندن ۳ دقیقه·۲ سال پیش

ساخت add , edit , delete حرفه ای و به راحتی با vue.js

توی خیلی از پروژه ها مخصوصا فروشگاه های آنلاین ما همیشه باید یک سری چیزارو وارد کنیم ، ویرایش کنیم یا حذف کنیم

مثل محصول ، دسته بندی ها و یا هر مورد دیگه

خیلی وقتا بیشتر دولوپرا میان برای هر قسمت یک کامپوننت جدا تعریف میکنن و توی هر کامپوننت متد های post , patch , delete و ... با axios تعریف میکنن این روش کاملا درسته و مشکلی نداره

اما برای سریع تر شدن کار و کاهش خطا ما یه پکیج درست کردیم که این متد هارو توش داره و با همون axios هم کار میکنه و روش کارش هم خیلی سادست و مقادیرو توی لیست یا هرجا باشن براتون add , edit , delete میکنه

نمونه زنده این آموزش توی استک‌بلیتز ببینید :

https://stackblitz.com/edit/vue-kngugp

آموزش این پست توی آپارات :

https://www.aparat.com/v/V9cPN

آموزش این پست توی یوتوب :

https://www.youtube.com/watch?v=O8IABngqnNY

مزیت

مزیتی که این روش داره اینه که دیتا میتونه به صورت لیست یا تکی اضافه حذف و ویرایش بشه و خیلی کاربر پسند تره

شروع

از طریق npm نصبش کنید :

npm i @shopid/vue-editobj

کار کردن با این پکیچ هم خیلی سادست و تنها کاری که باید بکنید اینه که کامپوننتون رو از این کامپوننت extend کنید

مثلا میخوایم کامپوننت Product.vue یا همون محصول بسازیم :

نکته : سایت ویرگول (همین سایت) روی تگ script حساسه و حذفش میکنه هرجا دیدین نوشتم تگ‌اسکریپت خودتون بکنیدش script ?

<template> <input v-model=&quotitem.title&quot placeholder=&quottitle..&quot /> <input v-model=&quotitem.caption&quot placeholder=&quotcaption..&quot /> </template> <تگ‌اسکریپت> import editobj from '@shopid/vue-editobj'; export default { extends: editobj, name: 'product', apiHost: 'http://127.0.0.1:8000/api', apiPath:&quotproduct&quot, apiConfig: { headers: { Authorization: 'Bearer ' + 'mytoken', }, }, }; </تگ‌اسکریپت>

تنها کاری که باید بکنیم اینه که اول پکیج @shopid/vue-editobj ایمپورت کنیم و کامپوننتمون رو از اون extend کنیم (extends: editobj)

مقدار apiPath هم product میذاریم (این مقدار میچسبه به apiHost و آدرس api تشکیل میشه)

مقدار apiHost هم آدرس api بک‌اندمونه

مقدار apiConfig هم کانفیگ کردن مقادیری مثل هدر هست

حالا مثلا اگه apiHost برابر با http://127.0.0.1:8000/api بذاریم

آدرس api که خود کامپوننت اتوماتیک میسازه میشه :

http://127.0.0.1:8000/api/product

دوتا input هم توی تمپلیتمون داریم که اینجا عنوان و کپشن هست

تموم شد ! کامپوننت محصول ساخته شد و الان میتونه مقدار جدید بگیره مقادیر قبلیو ویرایش کنه ذخیره کنه یا حذف کنه

خب حالا چجوری ازش استفاده کنیم ؟

مثال :

یک کامپوننت میسازیم به اسم ProductList.vue

اول از همه Product که ساختیم ایمپورت میکنیم که ازش استفاده کنیم

بعد باید لیستی که میخوایم از بک‌اند بگیریم و با اون لیست Product بسازیم

اینجا توی دیتا خودمون یک سری محصول به صورت آبجکت میسازیم

اینجوری مثلا

products: [ { id: 1, title: 'prod1', caption: 'cap1' }, { id: 2, title: 'prod2', caption: 'cap2' }, { id: 3, title: 'prod3', caption: 'cap3' }, ]

حالا باید توی تمپلیت لوپ کنیم و بسازیمش همین !

اون پکیجه خودش برای هرکدوم ازینا متدای ذخیره و حذف و اینارو میسازه

تازه اگه به این لیست آیتم بدون id اضافه کنیم خودش تشخیص میده که این یه آیتم جدیده و اگه متد save اجرا بشه post میکنه اگه ببینه id داره patch میکنه به همین سادگی

لوپ کردن توی ویو هم که خیلی سادست :

با v-for توی products لوپ میکنیم و :item رو مساوی هر آبجکت میذاریم

یعنی :

<div v-for=&quotproduct in products&quot class=&quotprodItem&quot :key=&quotproduct.id&quot > <Product :item=&quotproduct&quot /> </div>

بعد دوتا دکمه میذاریم یکیش save یکیشم delete که وقتی روشون کلیک شد متد های save و delete همون آبجکت صدا زده بشه

این متد ها ورودی هم میگیرن که وقتی ذخیره شد یا حذف شد چه کاری انجام بدن

product.save({ onSaved: onSaved });

که onSaved هم یه متد توی ProductList هست که باید توی methods تعریفش کنید برای onDeleted هم به همین صورت

کامل تر :

<div v-for=&quotproduct in products&quot class=&quotprodItem&quot :key=&quotproduct.id&quot > <Product :item=&quotproduct&quot /> <br /> <button @click=&quot'product.save({ onSaved: onSaved });&quot>save</button> <br /> <button v-if=&quotproduct.id&quot @click=&quotproduct.delete({ onDeleted: onDeleted })&quot> delete </button> </div>

و متد ها

methods: { onDeleted: function (item, resp) { this.products = this.products.filter((loopItem) => loopItem !== item); console.log(item); console.log(resp); this.status = resp.data.message; }, onSaved: function (item, resp) { console.log(item); console.log(resp); this.status = resp.data.message; }, }

برای اضافه کردن هم کافیه یه دکمه بسازید و به products یه آبجکت جدید و خالی پوش کنید !

<button @click=&quotproducts.push({})&quot>addnew</button>


نسخه کامل ProductList.vue :

<template> <div>{{ status }}</div> <div class=&quotprodItem&quot v-for=&quotproduct in products&quot :key=&quotproduct.id&quot> <Product :item=&quotproduct&quot /> <br /> <button @click=&quotstatus = 'saving ...';product.save({ onSaved: onSaved });&quot> save </button> <br /> <button v-if=&quotproduct.id&quot @click=&quotstatus = 'deleting ...';product.delete({ onDeleted: onDeleted })&quot> delete</button> </div> <button @click=&quotproducts.push({})&quot>addnew</button> </template> <تگ‌اسکریپت> import Product from './Product.vue'; export default { name: 'ProductList', components: { Product, }, data: () => { return { products: [ { id: 1, title: 'prod1', caption: 'cap1' }, { id: 2, title: 'prod2', caption: 'cap2' }, { id: 3, title: 'prod3', caption: 'cap3' }, ], status: 'idle', }; }, methods: { onDeleted: function (item, resp) { this.products = this.products.filter((loopItem) => loopItem !== item); console.log(item); console.log(resp); this.status = resp.data.message; }, onSaved: function (item, resp) { console.log(item); console.log(resp); this.status = resp.data.message; }, }, }; </تگ‌اسکریپت> <style> .prodItem { border: 1px solid black; margin: 0.5rem; padding: 0.5rem; } </style>
ویووطراحی سایتفرانتجاوااسکریپتبرنامه نویسی
shopid.ir ->open source online shop solutions
شاید از این پست‌ها خوشتان بیاید