ساخت یه CRUD با Laravel و Vue

Create | Read | Update | Delete
جز اون چیزایی که همه برنامه نویسا مجبورن باهاش سر و کله بزنن. اکثر قسمت های پنل ادمین یه وبسایت همیناس.
من این جا میخام نشونتون بدم خودم چطوری یه
CRUD
SPA
درست میکنم


خب اول از همه چیز لاراول رو نصب میکنم و همچنین

 

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

اگه npm بلد نیستید یا نصب ندارید حتما نصب کنید و یاد بگیرین 🙂
خب برای اینکه آدرس دهی داشته باشیم توی این کراد باید vue-router گرامی رو نصب کنیم.

و خب من چون خیلی آدم خسته ایم و همچنین از طراحی و این داستانا کلا هیچی حالیم نیست و همه از ذائقه غیر هنریم انتقاد میکنن من میرم و یه قالب آماده تهیه میکنم برای پنل که به نظرم این یکی خیلی تمیز و ساده س.
برای شروع اول یه روت آماده میکنم برای نمایش پنل ادمین.
من برای جلوگیری از شلوغ شدن
web.php
یه فایل دیگه میسازم توی routes مثلا به اسم admin.php و روت های مربوط به پنل ادمین رو اونجا قرار میدم. شما میتونین به همون روش عادی توی web.php روت ها رو تعریف کنین اجباری در کار نیست
برای معرفی کردنش به لاراول هم فایل
app/Providers/RouteServiceProvider.php
رو باید ادیت کنم
توی تابع

این خط کد رو اضافه میکنم

این خط میاد به اول اسم همه روت ها admin. اضافه میکنه. تمام آدرس های توی admin.php با admin شروع میشن. همشون میدلویر دارن برای جلوگیری از دسترسی کاربر وارد نشده به سایت(بعدا یه کار کنین فقط ادمین بیاد ) دارن و البته تمام کنترلر های مربوط به ادمین رو توی پوشه Admin میسازم تا با بقیه قاطی پاطی نشه. ( باز هم تکرار میکنم این روش منه اجباری در کار نیست )

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

کد های مورد نیاز رو توی public و view حاضر میکنم اسمش رو هم میذارم
master.blade.php
تابع نمایش داشبورد رو توی کنترلر مینویسم

و فایل روت admin.php رو این شکلی مینویسم

و درنهایت سایت رو بازمیکنم و یه اکانت برای خودم میسازم و آدرس پایین رو بازمیکنم
localhost/admin
اگه تا اینجای کار یه کم گیج شدین نگران نباشین انتهای مطلب سورس کد رو گذاشتم کد همه چیز رو میگه 🙂 فقط کافیه بدونین blade چه شکلی کار میکنه.

خب من حالا میخام نوشتن اولین کامپونت Vue رو با این قسمت Card که وسط صفحه میبینین که CRUD Example نوشته و action داره شروع کنم و تبدیلش کنم به یه کامپنونت تا ازش استفاده کنم

اول فایل webpack.mix.js رو یکم ادیت میکنم تا محل خروجی فایل رو عوض کنم

و بعد کامند لاراول میکس رو اجرا میکنم تا خروجی ها رو ببینم که توی public/asset هستش و همچنین آدرس ها رو اضافه میکنم به view

برای پشتیبانی از csrf این کد رو به داخل head اضافه میکنم

و وقتشه همه چیز رو بیارم توی میکس. اول از همه فایل های boostrap و jquery رو حذف میکنم از داخل قالب چون اونا توی app.css , app.js به صورت پیش فرض موجود هستن. همچنین اسکریپت های مربوط به چارت ها رو هم پاک میکنم چون توی این برنامه بهشون احتیاجی ندارم. میمونه یه فایل metismenu که باید بگردید روی npm و پکیجش رو پیدا کنین یا با mix به فایل app.js اضافه ش کنین که خب طی یه پرس و جو از عمو گوگل این پکیج رو روی npm یافتم و نصبش کردم

بعد تست مجدد متوجه شدم که این قالب از بوت استرپ سه استفاده میکرده و ما بهش داریم چهار رو میدیم و قیافه سایت شبیه مگس شده ! بنابراین بوت استرپ رو میبریمش به نسخه سه

و فایل app.scss رو به این شکل اصلاح میکنم

مطمئن بشین آدرس ها رو درست دادین چون تو لاراول ۵٫۷ ساختار پوشه resource تغییر میکنه و من این برنامه رو با ۵٫۶ نوشتم 🙂
از طرف دیگه ما باید کدهایی که سازنده قالب نوشته رو به کدهای خودمون اضافه کنیم برای این یکی من فایل webpack.mix.js رو دستکاری میکنم

و در نهایت metisMenu رو به فایل app.js اضافه میکنم

در انتها یه div به body اضافه کنین و تمام کدهای body رو توی اون بنویسین تا vue.js بتونیم استفاده کنیم البته میتونیم el رو برابر #wrapper بذاریم ولی من ترجیح میدم المنت جدید بسازم

کدهای قالب

حالا با خروجی گرفتن و تنها دو فایل app.css | app.js باید بتونین همون صفحه رو مشاهده کنین.

خب حالا از جاده خاکی بزنیم توی راه اصلی و اون کامپوننت Card رو بسازیم
من فایل جدید نمیسازم و
ExampleComponent.vue
اسمش رو تغییر میدم به
CardComponent.vue
و این کدها رو توش مینویسم

 

{{ title }}

 

 

 

 

و اون رو توی
app.js
ثبت میکنم

و درنهایت به
view
خودم جهت تست این خط رو مینویسم

خب من میخام ساخت CRUD برای مدل User رو شروع کنم
اول یه کنترلر میسازم

و روت لازم رو براش مینویسم

بعد داخل کنترلر درون توابع

این کد رو مینویسم

یادتون نره میتونین با ساخت یه trait کدتون رو تمیزتر بنویسین ولی من برای این مثال همین طوری مینویسم چون یه کلاس بیشتر نداریم
اول از همه کامپونتت صفحه اصلی داشبورد رو مینویسم اسمش رو میذارم DashboardComponent

و خب وقت نوشتن روت ها هستش . اول یه فایل به اسم routes.js درست میکنم. و این محتویات رو توش مینویسم. این ها برای vue-router هست

و app.js رو برای استفاده از vue-router به این شکل اصلاح میکنم

و توی view خودمون باید تگ مربوطه رو وسط صفحه بنویسیم

خب همه چی حاضره و اگه localhost/admin رو بازکنین میتونین محتویات DashboardComponent رو ببینین. برای ادامه کار کامپوننت صفحه جدول کاربرا رو میسازم ( crud/users/ListComponent) رو و برای اینکه بتونم لیست کاربرا رو داشته باشم تابع index UserController رو این شکلی مینویسم.

این شکلی کار میکنه که چک میکنه axios درخواست ajax داده پس کلا کاربرا رو بر میگردونه وگرنه داشبورد رو نشون میده.
به routes.js این روت رو اضافه میکنم

و ListComponent رو این شکلی مینویسم

 

# Name Email Created at Last update Actions
 

Loading…

 

{{ user.id }} {{ user.name }} {{ user.email }} {{ user.created_at }} {{ user.updated_at }}
 

No Users Exists

 

 

 

    • {{ page }}

 

 

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

  • Dashboard

 

  • Users

 

خب میخوام یه کار خرکی انجام بدم تاریخ last update رو میخام به سبک چند روز پیش و فلان بنویسم به نظرم اینطوری بهتره. برای شروع اول این تابع رو توی مدل User مینویسم

و برای اینکه بتونم توی جاوااسکریپت بهش دسترسی داشته باشم باید $appends رو برای مدل تعریف کنم

و در نهایت در موقع نمایش به جای updated_at این رو مینویسم

 

حالا بریم دومین قدم برای CRUD میخام برای هر آیتم قابلیت حذف شدن رو اضافه کنم. اول تابع destroy توی کنترلمون رو آماده میکنم

و متدی رو به ListComponent اضافه میکنم که کاربر رو میگیره و عملیات حذف رو انجام میده.

و در نهایت توی ستون action دکمه ای رو جهت کلیک برای حذف میذارم

 

برای ساخت قسمت فرم هم اول یه request میسازم.

داخل متد authorize رو به return true تغییر میدم و rules رو به شکل زیر مینویسم

و این کلاس رو جایگزین میکنم توی ورودی های store و update کنترلرم

متد view کنترلرم رو ادیت میکنم برای اینکه بتونم به صورت json به اطلاعات دسترسی داشته باشم

و store و update رو این شکلی با هم مخلوطشون میکنم که دوباره کاری انجام ندم!

خب آخرین کامپوننتی که باید بسازم فرمی هست که اطلاعات کاربر رو میفرسته (crud/users/FormComponent) و محتویات زیر رو در اون قرار میدم.

{{ formError }}

 

{{ formMessage }}

 

 

 

 

Keep empty to prevent changing password

 

 

 

 

و روت هام رو به routes.js اضافه میکنم

حالا برای دکمه افزودن یه دکمه بالای کامپوننت لیست میسازم

و همچنین برای دکمه های مشاهده و اصلاح آیتم ها کنار هر آیتم و کنار دکمه حذف قرارشون میدم

List
Create

Edit
Show

و خب اینم از CRUD ی که با Laravel , Vue ساخته م و برای اینکه چشماتون درد نیاد و هم کدها رو هلو بپر تو گلو دستتون باشه یه نسخه از این رو روی گیت هاب آپلود میکنم.
https://github.com/amir9480/laravel-vue-crud-example

پی نوشت: اگه یکم سورس کد با لاراول حالت عادی فرق داره به خاطر اینه که من برای استفاده شخصی خودم یه پکیج نوشتم که کدها و پکیج هایی که هر بار مجبورم بعد نصب لاراول به برنامم اضافه کنم رو یک جا جمع کردم که دوباره کاری نشه وگرنه این همون لاراوله فرق چندانی نداره .
https://github.com/amir9480/laravel-kit
تو جنگ با باگ هاتون موفق باشین.

نوشته ساخت یه CRUD با Laravel و Vue اولین بار در ویرگول پدیدار شد.

گردآوری توسط ایده طلایی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *