نحوه استفاده از React.js با لاراول برای ساختن یک برنامه Tasklist قابل کشیدن
ممکن است آموزشهایی را دیده باشید که به شما کمک میکنند تا یک برنامه ساده React.js بسازید که از برخی API شخص ثالث یا سرور Node.js به عنوان پشتیبان استفاده میکند. همچنین می توانید از لاراول برای این منظور استفاده کنید و آن را با React ادغام کنید.
لاراول به عنوان یک فریم ورک باطن، در واقع ابزاری را به شما ارائه می دهد که اینرسی نام دارد. در اینجا آنچه اسناد در مورد آن می گویند:
این شکاف بین برنامه Laravel شما و Vue یا React frontend مدرن شما را پر می کند، و به شما این امکان را می دهد که با استفاده از Vue یا React، در حالی که از مسیرها و کنترلرهای Laravel برای مسیریابی، هیدراتاسیون داده ها و احراز هویت استفاده می کنید، فرانت اندهای کامل و مدرن بسازید. مخزن
اما اگر نخواهید از چنین ابزاری استفاده کنید چه؟ و در عوض، شما فقط می خواهید از React.js به عنوان یک کتابخانه frontend استفاده کنید و یک باطن ساده با قدرت لاراول داشته باشید؟
خوب، در این مقاله، نحوه استفاده از React.js را با لاراول به عنوان یک Backend با ساخت یک برنامه tasklist قابل کشیدن یاد خواهید گرفت.
برای این برنامه تک صفحه ای تمام پشته، از Vite.js به عنوان ابزار ساخت ظاهری خود و بسته react-beautiful-dnd برای موارد قابل کشیدن استفاده خواهید کرد.
در پایان این مقاله، یک اپلیکیشن تک صفحه ای برای مدیریت وظایف خواهید داشت که به شکل زیر خواهد بود:
در این مقاله، یک صفحه پویا ایجاد می کنیم که دارای فهرست ی از وظایف است که هر کدام به پروژه خاصی تعلق دارند. به این ترتیب کاربر قادر به انتخاب پروژه خواهد بود و تنها وظایف پروژه انتخاب شده در صفحه نمایش داده می شود. کاربر همچنین می تواند یک کار جدید برای پروژه فعلی ایجاد کند و همچنین با کشیدن و رها کردن کارها را ویرایش، حذف و مرتب کند.
فهرست مطالب:
Backend: چگونه لاراول را نصب کنیم
نحوه اتصال به پایگاه داده MySQL
درخواست های اعتبارسنجی در لاراول
چگونه یک کنترلر بنویسیم که از خدمات استفاده می کند
The Frontend: نحوه نصب بسته ها
پیش نیازها
قبل از ادامه، داشتن یک درک اولیه از React.js، Laravel و آشنایی با مفاهیم اساسی توسعه وب مفید خواهد بود.
برای برنامه ای که در این مقاله می سازیم به ابزارهای زیر نیاز دارید:
PHP 8.1 یا بالاتر (برای تحلیل نسخه php -v
اجرا کنید)
آهنگساز ( composer
اجرا کنید تا تحلیل کنید که وجود دارد)
Node.js 18 یا بالاتر (برای تحلیل نسخه node -v
اجرا کنید)
MySQL 5.7 یا بالاتر ( mysql --version
برای تحلیل وجود آن اجرا کنید یا اسناد را دنبال کنید)
ابزارهای اضافی (اختیاری) که می توانید استفاده کنید:
Postman – برنامه ای با رابط کاربری برای آزمایش مسیرهای API
curl - یک دستور CLI برای آزمایش مسیرهای API
ما با ساختن بکاند شروع میکنیم و سپس به سمت جلو حرکت میکنیم.
Backend: چگونه لاراول را نصب کنیم
ابتدا، اگر قبلاً آن را ندارید، باید فریم ورک لاراول را روی دستگاه محلی خود نصب کنید.
یکی از راه های نصب لاراول استفاده از یک Dependency Manager محبوب برای PHP به نام Composer است. در اینجا دستور انجام این کار وجود دارد:
composer create-project laravel/laravel tasklist
با این کار آخرین نسخه پایدار لاراول در دستگاه محلی شما نصب می شود (در حال حاضر نسخه 10 است).
لیست وظایف موجود در دستور، نام پوشه اصلی برنامه است که می توانید آن را روی هر چیزی که می خواهید تنظیم کنید.
در این مرحله، میتوانید در پوشه پروژه cd
و برنامه Backend را بدون نیاز به راهاندازی سرور مجازی اجرا کنید:
cd tasklist/ && php artisan serve
artisan
در دستور بالا یک ابزار CLI است که در لاراول گنجانده شده است. این فایل در ریشه برنامه لاراول شما به عنوان فایل اسکریپت artisan
وجود دارد که تعدادی دستورات مفید را ارائه می دهد که می تواند در هنگام ساخت برنامه به شما کمک کند.
ما در این مقاله اغلب از آن استفاده خواهیم کرد.
برای مشاهده صفحه پیش فرض، در مرورگر خود به http://127.0.0.1:8000
مراجعه کنید. می بایست شبیه به این باشه:
نحوه ایجاد مدل ها و مهاجرت ها
حال، بیایید مدلهای Project و Task و همچنین مهاجرتها را برای آنها ایجاد کنیم.
مدلها روشی هستند که نهادهای برنامه شما باید تعریف شوند، و مهاجرتها مانند تعاریف طرحواره برای ذخیره رکوردهای آن موجودیتها در پایگاه داده هستند.
شما می توانید فایل های مدل و مهاجرت را به صورت دستی ایجاد کنید و همچنین با استفاده از دستور artisan
آنها را تولید کنید:
php artisan make:model Project -m php artisan make:model Task -m
آرگومان -m
به طور خودکار یک فایل مهاجرت را با استفاده از نام مدل ارائه شده ایجاد می کند.
دنباله اجرای دستور را همانطور که هست نگه دارید، تا انتقال پروژه بعداً قبل از انتقال Task اجرا شود.
این مهم است، زیرا جداول projects
و tasks
باید یک رابطه یک به چند داشته باشند (1-N): هر وظیفه به یک پروژه منفرد اشاره دارد، یا به عبارت دیگر، هر پروژه می تواند چندین کار داشته باشد.
فیلدهای $fillable
مدل Project
و روش رابطه task()
را به صورت زیر تنظیم کنید:
به طور پیش فرض، ویژگی عمومی $timestamps
دارای یک مقدار true
است که از کلاس Model
والد می آید. این بدان معنی است که ستون های created_at
و updated_at
در جدول پایگاه داده شما به طور خودکار توسط Eloquent (ORM موجود در لاراول) نگهداری می شوند.
اما می توانید با تغییر مقدار آن به false
آن را سفارشی کنید. نیازی نیست که فیلدهای created_at
و updated_at
را در جدول projects
داشته باشیم، پس $timestamps
را روی false
قرار می دهیم.
فیلدهای $fillable
مدل Task
، روش رابطه project()
و Accessor created
تنظیم کنید. یک Accessor در لاراول مانند یک تابع بین پایگاه داده و کد شما است که می تواند به رکورد پایگاه داده از قبل واکشی شده دسترسی پیدا کند و آن را تغییر دهد.
در بالا، در مدل Task
، یک ابزار دسترسی به نام created
وجود دارد. برای داشتن یک Accessor، فیلد created
در آرایه $appends
و همچنین یک تابع عمومی getCreatedAttribute()
داریم.
در تابع get <WordsInCamelCase> Attribute()
منطقی وجود دارد که برای تغییر رکورد پایگاه داده از قبل واکشی شده اجرا می شود.
در مورد ما تابع getCreatedAttribute()
یک تفاوت زمانی مناسب و قابل خواندن بین زمان فعلی و زمان داده شده را برمی گرداند. به عنوان مثال، "3 دقیقه پیش" یا "4 ماه پیش" .
اکنون که مدل ها آماده هستند، بیایید مهاجرت ها را تنظیم کنیم.
ابتدا یک مهاجرت برای جدول projects
تنظیم کنید:
سپس یک مهاجرت برای جدول tasks
تنظیم کنید:
جدول tasks
دارای یک کلید خارجی project_id
است که اشاره ای به جدول projects
است. پس تمرین خوبی است که متد down()
را نیز به روز کنید تا مطمئن شوید که project_id
خارجی قبل از انداختن جدول projects
واقعی حذف می شود.
یک فیلد priority
نیز وجود دارد که یک عدد طبیعی غیر قابل تهی برای سفارش دادن وظایف خواهد بود. و به صورت اختیاری، می توانید یک ویژگی حذف نرم به مدل Task
اضافه کنید.
نحوه ایجاد بذرپاشی
اکنون باید داده های ساختگی را به جداول projects
و tasks
اضافه کنیم. برای کاشت برخی از داده ها در پایگاه داده، می توانید از Laravel seeders استفاده کنید. این به شما اجازه می دهد تا داده های ساختگی را برای استفاده در پایگاه داده خود ایجاد کنید.
اگر میخواهید درباره نحوه عملکرد این روش بیشتر بخوانید، میتوانید اسناد را در اینجا تحلیل کنید .
لاراول با استفاده از دستور make:seeder
artisan راهی برای تولید آن فایل ها ارائه می دهد:
php artisan make:seeder ProjectsSeeder php artisan make:seeder TasksSeeder
پس با دستورات بالا، فایل های database/seeders/ProjectsSeeder.php
و database/seeders/TasksSeeder.php
را خواهید داشت.
در ابتدا باید ProjectsSeeder
راه اندازی کنید تا چند پروژه را به جدول projects
اضافه کنید. سپس می توانید TasksSeeder
را برای اضافه کردن وظایف به جدول tasks
تنظیم کنید.
همانطور که در ابتدا اشاره کردم، هر کار متعلق به یک پروژه خاص خواهد بود. از منظر پایگاه داده رابطه ای، این بدان معنی است که هر ورودی در جدول tasks
به یک ورودی خاص در جدول projects
پیوند می خورد. در اینجا اهمیت وجود یک کلید خارجی project_id
در جدول tasks
وجود دارد تا بتوانید هر کار را به یک پروژه خاص مرتبط کنید و همچنین وظایف پروژه خاص را بازیابی کنید.
با مشاهده تصاویر زیر می توانید ساختار پایگاه داده را تصور کنید:
با استفاده از مثال زیر می توانید 3 پروژه ایجاد کنید:
در مرحله بعد، TasksSeeder
راه اندازی کنید. پس از راهاندازی، تمام فایلهای Seder را اجرا میکنید و آنها یکی یکی اجرا میشوند. همانطور که گفته شد، در این مرحله ProjectsSeeder
شما آماده ایجاد چند پروژه است.
با تصور آن، مرحله بعدی تولید وظایف خواهد بود، هر یک از آنها به یکی از پروژه های موجود توسط فیلد project_id
خود ارجاع خواهند داد.
با استفاده از مثال زیر می توانید 10 پروژه ایجاد کنید:
کد بالا فقط تمام شناسه های پروژه را می گیرد، سپس به طور تصادفی یک پروژه را برای هر کار انتخاب می کند. در پایان، تمام وظایف را در جدول tasks
قرار می دهد.
همانطور که متوجه شده اید، ما $tasks
با استفاده از تابع static insert()
در جدول tasks
وارد می کنیم، که به ما امکان می دهد تمام موارد را با یک پرس و جو در جدول پایگاه داده قرار دهیم.
اما یک نقطه ضعف نیز دارد: فیلدهای created_at
و updated_at
را مدیریت نمی کند. به همین دلیل است که باید آن فیلدها را به صورت دستی با تخصیص همان مهر زمانی $now
به آنها تنظیم کنید.
اکنون، هنگامی که تمام seder ها را آماده کردید، باید آنها را در DatabaseSeeder
ثبت کنید.
نحوه اتصال به پایگاه داده MySQL
قبل از اجرای migrations و seeds، یک پایگاه داده MySQL ایجاد کنید و اعتبار مناسب را در فایل .env
تنظیم کنید. اگر .env
وجود ندارد، آن را ایجاد کرده و محتوای فایل .env.example
را در آن قرار دهید.
پس از تنظیم اعتبار پایگاه داده، این نوع متغیرهای محیطی را خواهید داشت:
پس از تنظیم متغیرهای محیط، کش را بهینه کنید:
php artisan optimize
اکنون می توانید جداول projects
و tasks
را در پایگاه داده MySQL ایجاد کنید، ساختار آنها را تنظیم کنید و رکوردهای اولیه را با یک دستور اضافه کنید:
php artisan migrate:fresh --seed
در دستور بالا، آرگومان migrate:fresh
همه جداول را از پایگاه داده حذف می کند. سپس دستور migrate
را اجرا می کند که مهاجرت های شما را برای ایجاد projects
و جداول tasks
به درستی اجرا می کند.
با آرگومان --seed
، ProjectsSeeder
و TasksSeeder
را پس از مهاجرت اجرا می کند. همانطور که گفته شد، پایگاه داده شما را برای شما خالی می کند و تمام جداول را ایجاد می کند و تمام داده های ساختگی لازم را پر می کند.
پس از اجرای دستور، این نوع رکوردهای پایگاه داده را خواهید داشت:
تزریق خدمات
حالا بیایید یک کنترلر و یک کلاس سرویس ایجاد کنیم تا تمام ویژگی های وظیفه را مدیریت کنیم، مانند فهرست کردن، ایجاد، به روز رسانی، حذف و مرتب کردن مجدد وظایف.
ابتدا از دستور زیر برای تولید یک کنترلر استفاده کنید.
php artisan make:controller TaskController
برای اینکه همه کدها در کنترلر قرار نگیرند، می توانید فقط منطق اصلی را در آن نگه دارید و سایر پیاده سازی های منطقی را به یک فایل کلاس دیگر منتقل کنید.
این کلاسها عموماً خدمات نامیده میشوند و استفاده از پیادهسازی سرویس در روش کنترلکننده، تزریق سرویس نامیده میشود (از اصطلاح تزریق وابستگی میآید).
یکی از مزایای اصلی استفاده از سرویس ها این است که به شما کمک می کند یک پایگاه کد قابل نگهداری ایجاد کنید.
می توانید کلاس سرویس خود را به عنوان آرگومان به متد ساخت کنترلر تزریق کنید، پس پس از اجرای هر کنترلر (زمانی که متد __construct()
کنترلر اجرا می شود) می توانید یک شی از سرویس را مقداردهی اولیه کنید. این بدان معنی است که شما می توانید به عملکردهای سرویس خود مستقیماً در کنترلر خود دسترسی داشته باشید.
اکنون، بیایید دو کلاس سرویس جداگانه ایجاد کنیم که در TaskController
استفاده می شود.
به صورت دستی یک کلاس سرویس app/Services/ProjectService.php
ایجاد کنید که مسئولیت منطق مربوط به پروژه را بر عهده خواهد داشت.
کلاس سرویس دوم app/Services/TaskService.php
خواهد بود که مسئول انجام دستکاری وظایف خواهد بود:
در کلاس TaskService
فوق، از توابع زیر در TaskController
استفاده خواهید کرد.
لیست : وظایف را برای شناسه پروژه معین، از جمله پروژه مرتبط، واکشی می کند و آنها را بر اساس اولویت مرتب می کند.
getById : یک کار خاص را با شناسه خود بازیابی می کند، از جمله پروژه مرتبط.
store : یک کار جدید را ذخیره می کند و اولویت را بر اساس وظایف موجود برای همان پروژه محاسبه می کند.
به روز رسانی : یک کار موجود را با شناسه آن به روز می کند.
حذف : یک کار را با شناسه خود حذف می کند و اولویت های کارهای باقی مانده در همان پروژه را تنظیم می کند.
reorder : اولویتهای وظایف را در یک پروژه تغییر میدهد (همچنین با deleted_at IS NULL
حذف نرم را کنترل میکند).
مسیرهای وب و API در لاراول
اکنون می توانید مسیرهایی را برای آزمایش روش هایی که قبلاً نوشته اید اضافه کنید. در این پروژه، ما یک برنامه بدون حالت در فرانت اند داریم که مسیرهای API را برای دریافت داده های JSON درخواست می کند، پس از اصول RESTful (روش های GET، POST، PUT، DELETE) پیروی می کند. فقط صفحه HTML اولیه به عنوان یک صفحه وب کامل بازیابی می شود.
پس اکنون، مسیری را در routes/web.php
برای تک صفحه اولیه تنظیم کنید:
مسیرهای API را در routes/api.php
به این صورت تنظیم کنید:
ما همه مسیرهای API را به جای routes/api.php
در routes/web.php
داریم زیرا در فایل web.php ، همه مسیرها به طور پیشفرض دارای CSRF محافظت میشوند. پس ، در یک برنامه بدون حالت، معمولاً به آن نیاز نخواهید داشت – به همین دلیل api.php در لاراول اختراع شد.
همانطور که می بینید، یک پیشوند "وظیفه" برای همه مسیرهای API وجود دارد. داشتن یک پیشوند اختیاری است، اما این فقط یک تمرین خوب است. و برای مسیرهای API خاص، اعتبار سنجی regex برای پذیرش فقط اعداد طبیعی به عنوان شناسه پروژه وجود دارد.
فراموش نکنید که حافظه پنهان مسیر را پس از تغییرات بالا به روز کنید. مهم است که به خاطر داشته باشید که لاراول (در این مورد نسخه 10) مسیرها را از فایل cache bootstrap/cache/routes-v7.php
می خواند و بلافاصله پس از تغییرات شما به طور خودکار به روز نمی شوند. در صورتی که هنوز کش نشده باشد، یکی را ایجاد می کند.
از دستور زیر برای رفرش کش لاراول و همچنین کش مسیر استفاده کنید:
php artisan optimize
درخواست های اعتبارسنجی در لاراول
قبل از نوشتن روش های کنترلر، باید چند فایل درخواست اعتبار سنجی اضافه کنید. می توانید این کار را به صورت دستی یا فقط با استفاده از دستور artisan
انجام دهید:
php artisan make:request Task/CreateTaskRequest php artisan make:request Task/ListTasksRequest php artisan make:request Task/ReorderTasksRequest php artisan make:request Task/UpdateTaskRequest
پس از ایجاد آنها، باید قوانین اعتبارسنجی را برای هر درخواست تنظیم کنید.
قوانین اعتبارسنجی در لاراول روشی برای توصیف چگونگی انتظار دریافت داده های HTTP ورودی است. اگر داده ها با قوانین مطابقت داشته باشند، اعتبارسنجی را پشت سر می گذارند - در غیر این صورت، لاراول یک شکست را برمی گرداند.
لاراول مجموعه ای از قوانین را ارائه می دهد که می توانید از آنها برای تحلیل داده های دریافتی استفاده کنید. یک فیلد از درخواست ورودی می تواند چندین قانون داشته باشد.
یکی از راههای نوشتن قوانین اعتبارسنجی برای یک فیلد، به هم پیوستن آن قوانین توسط یک "|" است. شخصیت.
در زیر قوانین اعتبارسنجی برای ایجاد یک کار جدید آمده است:
در زیر قانون اعتبارسنجی برای فهرست کردن وظایف پروژه آمده است:
در زیر قوانین اعتبارسنجی برای ترتیب مجدد کارها آمده است:
در زیر قوانین اعتبارسنجی برای بهروزرسانی یک کار وجود دارد:
فراموش نکنید که true
در متد authorize()
در تمام کلاس های اعتبارسنجی برگردانید:
این تابع معمولاً برای تعیین اینکه آیا کاربر مجاز به درخواست است یا خیر طراحی شده است. از آنجایی که ما از احراز هویت و همچنین موارد مجوز در برنامه استفاده نمیکنیم، باید برای همه موارد true
باشد.
چگونه یک کنترلر بنویسیم که از خدمات استفاده می کند
به عنوان آخرین مرحله در بخش Backend، زمان نوشتن متدهای کنترل کننده برای هر مسیر API است که از توابع سرویس استفاده می کند.
همانطور که در TaskController:
TaskService
به عنوان آرگومان به متد سازنده تزریق می شود. در بدنه سازنده، نمونه ای از کلاس TaskService
ایجاد می شود و ویژگی $taskService
مقداردهی اولیه می شود. پس در روش های سفارشی، می توانید به آن $taskService
و عملکردهای آن دسترسی داشته باشید.
روش index
برای برگرداندن HTML است.
همه روشهای سفارشی دیگر ( list
، store
، get
، update
، delete
، reorder
) از توابع TaskService
از طریق ویژگی $taskService
مقداردهی اولیه شده استفاده میکنند. پس ، تمام پیاده سازی منطق به سرویس می رود، و به این ترتیب، شما فقط یک تابع سرویس را فراخوانی می کنید و پاسخ را برمی گردانید.
نحوه تست مسیرهای API
در این مرحله، میتوانید مسیرهای API را با درخواست از طریق Postman یا هر ابزار مشابهی آزمایش کنید. فقط باطن را اجرا کنید (یا دوباره اجرا کنید):
php artisan serve
در اینجا مجموعه منتشر شده پستچی با تمام درخواست ها است.
به جای استفاده از Postman، می توانید از یک ابزار خط فرمان مانند curl از ترمینال خود استفاده کنید.
در زیر تمام دستورات نمونه ای وجود دارد که می توانید برای آزمایش مسیرهای API اجرا کنید:
ایجاد یک کار جدید برای یک پروژه خاص:
curl --location '127.0.0.1:8000/api/tasks?project_id=1' \ --header 'Content-Type: application/json' \ --data '{ "title": "Title", "description": "Description" }'
فهرست وظایف پروژه:
curl --location 'http://127.0.0.1:8000/api/tasks?project_id=1'
دریافت یک کار با شناسه:
curl --location 'http://127.0.0.1:8000/api/tasks/1'
به روز رسانی یک کار با شناسه:
curl --location --request PUT 'http://127.0.0.1:8000/api/tasks/11' \ --header 'Content-Type: application/json' \ --data '{ "title": "Title edited", "description": "Description edited" }'
سفارش مجدد وظایف پروژه:
curl --location --request PUT 'http://127.0.0.1:8000/api/tasks' \ --header 'Content-Type: application/json' \ --data '{ "project_id": "1", "start": "1", "end": "2" }'
حذف یک کار با شناسه:
curl --location --request DELETE 'http://127.0.0.1:8000/api/tasks/11'
در تصویر زیر، نمونه ای از دریافت وظایف پروژه با شناسه آن با استفاده از دستور curl (در پایین سمت راست) وجود دارد:
The Frontend: نحوه نصب بسته ها
اکنون زمان آن است که به قسمت ظاهری تغییر دهید. ما از TypeScript برای React.js استفاده خواهیم کرد. پس از تکمیل این بخش، میتوانید React.js (با Vite) را در برنامه لاراول خود ادغام کنید.
ابتدا با استفاده از این دستور مطمئن شوید که Node.js نسخه 18 یا بالاتر را دارید:
node -v
این بسته های npm ضروری را نصب کنید:
npm i react-dom dotenv react-beautiful-dnd react-responsive-modal react-toastify @vitejs/plugin-react
react-dom
یک کتابخانه از تیم React برای رندر کردن اجزای React در DOM (مدل شیء سند) است.
dotenv
برای بارگذاری متغیرهای محیطی از فایل .env
در محیط فرآیند است
react-beautiful-dnd
یک کتابخانه از Atlassian برای ایجاد رابط های کشیدن و رها کردن با انیمیشن ها است.
react-responsive-modal
برای ایجاد دیالوگ های مدال ساده و پاسخگو است
react-toastify
برای نمایش اعلان ها یا نان تست ها است
@vitejs/plugin-react
یک پلاگین برای ابزار ساخت Vite است که امکان ادغام یکپارچه React را با توسعه سریع و ساختهای تولید بهینه میکند.
با این دستور وابستگی های توسعه را نصب کنید:
npm i -D @types/react-dom @types/react-beautiful-dnd
@types/react-dom
تعاریف نوع TypeScript برای بسته react-dom
است
@types/react-beautiful-dnd
تعاریف نوع TypeScript برای بسته react-beautiful-dnd
است.
نحوه پیکربندی Vite.js
از آنجایی که Laravel V10 قبلاً vite.config.js
دارد، میخواهید هر چیز مرتبط با React را در آنجا تنظیم کنید. یا اگر هنوز این فایل را ندارید، یکی مانند این ایجاد کنید:
همانطور که در فایل پیکربندی Vite می بینید، مرجعی به resources/react/app.tsx
وجود دارد که نقطه ورود لاراول برای استفاده از منابع React خواهد بود.
برای صفحه اولیه HTML، یک فایل resources/views/tasks/index.blade.php
blade ایجاد کنید، پس تمام دارایی های frontend در app
div
با ID در آنجا تزریق می شوند:
همانطور که در فایل blade می بینید، یک متغیر $projects
وجود دارد که از باطن ارسال می شود. این کل داده های پروژه است که برای فیلتر کردن وظایف در فرانت اند استفاده می شود.
React.js – ادغام اولیه
در این مقاله، ما فقط یک برنامه اصلی React.js خواهیم داشت که با لاراول کار می کند.
در ابتدا، ایده خوبی است که منابع غیر ضروری مانند resources/css
پیش فرض و دایرکتوری های resources/js
را حذف کنید.
یک فایل resources/react/app.tsx
مانند این ایجاد کنید:
پس ، پوشه resources/react
، دایرکتوری ریشه برای همه چیزهای React آینده خواهد بود.
یک index.css
با محتوای موقت ایجاد کنید:
همچنین یک Main.tsx
با مقداری محتوای موقت ایجاد کنید:
برای تحلیل نتیجه در مرورگر، مطمئن شوید که پشتیبان در حال اجرا هستید و دارایی ها را از طریق ابزار vite
بسازید:
npm run build
یا اگر می خواهید تغییرات فایل React را مشاهده کنید و دارایی ها را به طور خودکار بسازید، می توانید این دستور را در حال اجرا نگه دارید:
npm run dev
دو دستور npm run
در بالا به vite
اشاره دارد که دارایی ها را می سازد.
با تحلیل فایل package.json
، فیلد "scripts" می توانید این را ببینید:
"scripts": { "dev": "vite", "build": "vite build" }
اکنون می توانید http://localhost:8000 را باز کنید تا نمای اولیه رندر شده را ببینید:
نحوه اضافه کردن CSS
اکنون، هنگامی که Vite را راه اندازی کردید و React را در برنامه لاراول خود ادغام کردید، می توانید روی قسمت React کار کنید.
ما زمان زیادی را صرف سبکها نمیکنیم، پس میتوانید این CSS را در index.css
خود جایگذاری کنید:
بعداً پرونده index.css
را در مؤلفه اصلی خود پیوست خواهید کرد.
خدماتی برای درخواست های API
همانطور که در پس زمینه انجام دادید ، در اینجا در جبهه نیز می توانید تمام پیاده سازی های منطقی را به یک فایل متفاوت منتقل کنید ، پس کد شما قابل خواندن و حفظ تر خواهد بود. ما می توانیم آن utils.ts
فایل را نامگذاری کنیم ، زیرا در آن نیازهای لازم وجود خواهد داشت.
قبل از آن ، فقط برای پیکربندی Global Axios ، که در utils.ts
استفاده می کنید ، axiosConfig.ts
ایجاد کنید.
با استفاده از تنظیمات فوق ، می توانید مطمئن باشید که تمام درخواست های HTTP دارای پیشوند /api
هستند.
به عنوان مثال ، اگر از axiosConfig.get('/example')
استفاده می کنید ، درخواست GET را به /api/example
ارسال می کند. این یک پیکربندی اختیاری است ، اما یک روش توصیه شده برای داشتن کد غیر تکراری است.
از آنجا که شما برای ارسال درخواست های HTTP به سرور ، چند مورد استفاده خواهید داشت ، می توانید برای این عملیات پرونده های برنامه های جداگانه ای داشته باشید:
یک کار جدید برای یک پروژه ایجاد کنید
وظایف پروژه را فهرست کنید
یک کار را حذف کنید
وظایف پروژه دوباره
پس در زیر پرونده utils.ts
قرار دارد:
در پرونده فوق توابع زیر را پیدا خواهید کرد:
geterrormessage : اگر ورودی نمونه ای از خطا باشد ، پیام خطا را برمی گرداند - در غیر این صورت ، آن را به یک رشته تبدیل می کند.
GetTasks : وظایف را برای شناسه پروژه معین با استفاده از AxiOS بازیابی می کند. اگر شناسه پروژه از دست رفته باشد یا درخواست API ناموفق باشد ، نان تست خطایی را نشان می دهد.
reordertasks : یک درخواست PUT را برای تنظیم مجدد وظایف در یک پروژه بر اساس موقعیت های شروع و پایان ارسال می کند. بر اساس پاسخ API یک نان تست موفقیت یا خطا را نشان می دهد.
edittask : برای به روزرسانی اطلاعات کار ، یک درخواست Put ارسال می کند. تأیید می کند که این کار قبل از درخواست ، دارای شناسه و عنوان است. بر اساس پاسخ API یک نان تست موفقیت یا خطا را نشان می دهد.
DeletEtask : درخواست حذف را برای حذف یک کار توسط شناسه خود ارسال می کند. بر اساس پاسخ API یک نان تست موفقیت یا خطا را نشان می دهد.
createTask : یک درخواست پست برای ایجاد یک کار جدید برای شناسه پروژه خاص ارسال می کند. تأیید می کند که شناسه پروژه موجود است و وظیفه قبل از درخواست ، دارای عنوان است. بر اساس پاسخ API یک نان تست موفقیت یا خطا را نشان می دهد.
react.js اجزای
اکنون ، از آنجا که شما برنامه های کاربردی را آماده کرده اید ، در پوشه resources/react/components
، می توانید مؤلفه هایی را که برای استفاده در Main.tsx
خود استفاده می کنید ایجاد کنید.
ابتدا ، SelectProject.tsx
ایجاد کنید ، که مسئولیت انتخاب پروژه فعلی را بر عهده خواهد داشت:
مؤلفه SelectProject
منوی کشویی را ارائه می دهد که به کاربر امکان می دهد یک پروژه را انتخاب کند. هنگامی که یک پروژه انتخاب شد ، حالت را با شناسه پروژه انتخاب شده به روز می کند ، با استفاده از عملکرد ابزار getTasks
، وظایف آن پروژه را واگذار می کند و حالت را با کارهای بازیابی شده به روز می کند و تعامل پویا را با انتخاب پروژه و بارگیری کار ارائه می دهد.
سپس TaskList.tsx
ایجاد کنید ، که مسئولیت ارائه وظایف پروژه و دستکاری های کشیدن و رها کردن آنها را بر عهده خواهد داشت:
مؤلفه TaskList
از کتابخانه react-beautiful-dnd
برای اجرای یک فهرست کار قابل کشیدن استفاده می کند. این فهرست ی از کارها را ارائه می دهد و به کاربران امکان می دهد تا وظایف خود را برای مرتب کردن آنها بکشید و رها کنند ، با عملکرد کشیدن و رها کردن باعث ایجاد یک عملکرد ( handleDragEnd
) می شود که ترتیب کار را هم از نظر بصری و هم در پس زمینه با استفاده از عملکرد برنامه کاربردی reorderTasks
به روز می کند.
اکنون ، Task.tsx
ایجاد کنید ، که مسئولیت یک کار واحد از یک فهرست را بر عهده خواهد داشت:
مؤلفه Task
یک مورد کار واحد را نشان می دهد. این جزئیات وظیفه از جمله نام پروژه ، زمان ایجاد و عنوان را نشان می دهد و دکمه هایی را برای ایجاد اقدامات مانند ویرایش و حذف کار ، با دستگیره های مربوطه ( handleEdit
و handleDelete
) فراهم می کند.
در مرحله بعد ، AddTaskForm.tsx
ایجاد کنید ، که مسئولیت فرم کار برای گفت ن کارها به پروژه منتخب فعلی را بر عهده خواهد داشت:
مؤلفه AddTaskForm
فرم اضافه کردن کارهای جدید را فراهم می کند. این شامل زمینه های ورودی برای عنوان و توضیحات کار ، با دکمه هایی برای پاک کردن فرم یا ارسال کارآفرینی است ، و از عملکرد ابزار createTask
برای رسیدگی به روند ایجاد کار استفاده می کند و باعث موفقیت مجدد کارها می شود.
سپس ، ModalEdit.tsx
ایجاد کنید ، که مسئولیت پنجره معین برای ویرایش و ارسال تغییرات به یک کار را بر عهده خواهد داشت:
مؤلفه ModalEdit
برای ویرایش جزئیات کار یک معین را نشان می دهد. این شامل زمینه های ورودی برای اصلاح عنوان و توضیحات کار و دکمه ها برای بستن معین یا ذخیره تغییرات ، با استفاده از تابع Utility editTask
برای رسیدگی به فرآیند ویرایش کار و ایجاد بارگیری مجدد از کارها پس از ویرایش موفقیت آمیز است.
در مرحله بعد ، ModalDelete.tsx
ایجاد کنید ، که مسئولیت ارسال یک کار را بر عهده خواهد داشت:
مؤلفه ModalDelete
برای تأیید حذف یک کار یک معین را نشان می دهد. این گزینه برای لغو حذف یا حذف کار ، با استفاده از عملکرد ابزار deleteTask
و ایجاد بارگیری مجدد وظایف پس از حذف موفقیت آمیز ، گزینه هایی را فراهم می کند.
و در آخر ، Main.tsx
را با استفاده از اجزای تعریف شده فوق تنظیم کنید.
مؤلفه Main
یک مؤلفه اصلی است که مدیریت پروژه و عملکردهای مربوط به کار را انجام می دهد. این شامل مدالها برای ویرایش و حذف وظایف ، یک فهرست کار با به روزرسانی های پویا ، کشویی انتخاب پروژه و فرم اضافه کردن کارهای جدید ، استفاده از مدیریت حالت و عملکردهای ابزار برای تعامل کاربر صاف است.
نتایج نهایی
در این مرحله ، تمام مؤلفه ها آماده تعامل با یکدیگر هستند. پس می توانید دارایی های جلو را بسازید و سرور را اجرا کنید:
npm run build && php artisan serve
با مراجعه به http://127.0.0.1:8000
این نوع نتیجه را می گیرید:
خودشه!
اکنون می توانید به راحتی react.js را در برنامه Laravel خود ادغام کنید بدون استفاده از ابزارهای اضافی LARAVEL (مانند اینرسی). و در نتیجه ، شما می توانید همچنان برنامه Laravel خود را برای ساختن API های مقیاس پذیر تر با تأیید اعتبار و سایر موارد خود ادامه دهید.
پس ، این می تواند فقط یک برنامه نمونه برای پروژه بعدی LaRavel و React.js بعدی شما باشد.
نتیجه
با استفاده از این مقاله ، شما یک برنامه فهرست تک صفحه ای و کامل با استفاده از React.js (با TypeScript) با Vite.js به عنوان فناوری های جلو ، لاراول به عنوان یک چارچوب باطن و بسته react-beautiful-dnd
برای داشتن موارد قابل کشیدن ساخته اید.
اکنون می دانید که چگونه به صورت دستی React.js را در برنامه Laravel خود ادغام کرده و آن را حفظ کنید.
شما می توانید کد کامل پروژه را در اینجا در GitHub من پیدا کنید ، جایی که من به طور فعال بسیاری از کارهایم را در مورد فن آوری های مختلف مدرن تبلیغ می کنم.
برای اطلاعات بیشتر ، می توانید به وب سایت من مراجعه کنید: Boosfalse.com
ارسال نظر