shopid.ir ->open source online shop solutions
ساخت 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="item.title" placeholder="title.." />
<input v-model="item.caption" placeholder="caption.." />
</template>
<تگاسکریپت>
import editobj from '@shopid/vue-editobj';
export default {
extends: editobj,
name: 'product',
apiHost: 'http://127.0.0.1:8000/api',
apiPath:"product",
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="product in products" class="prodItem" :key="product.id" >
<Product :item="product" />
</div>
بعد دوتا دکمه میذاریم یکیش save یکیشم delete که وقتی روشون کلیک شد متد های save و delete همون آبجکت صدا زده بشه
این متد ها ورودی هم میگیرن که وقتی ذخیره شد یا حذف شد چه کاری انجام بدن
product.save({ onSaved: onSaved });
که onSaved هم یه متد توی ProductList هست که باید توی methods تعریفش کنید برای onDeleted هم به همین صورت
کامل تر :
<div v-for="product in products" class="prodItem" :key="product.id" >
<Product :item="product" />
<br />
<button @click="'product.save({ onSaved: onSaved });">save</button>
<br />
<button v-if="product.id" @click="product.delete({ onDeleted: onDeleted })">
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="products.push({})">addnew</button>
نسخه کامل ProductList.vue :
<template>
<div>{{ status }}</div>
<div class="prodItem" v-for="product in products" :key="product.id">
<Product :item="product" />
<br />
<button @click="status = 'saving ...';product.save({ onSaved: onSaved });">
save
</button>
<br />
<button v-if="product.id" @click="status = 'deleting ...';product.delete({ onDeleted: onDeleted })">
delete</button>
</div>
<button @click="products.push({})">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>
مطلبی دیگر از این نویسنده
درگاه پرداخت آیدیپی (idpay) برای لاراول
مطلبی دیگر در همین موضوع
چطور علمی و اصولی تست بنویسیم؟
بر اساس علایق شما
امتحانش کُن! (هفت: لباس بیشتر، شعلهی کمتر)+بهروزرسانی۱