لاراول، Vue و SPAها

همانطور که در بسیاری از سری ها در Laracasts انجام می دهیم ، با یک پروژه جدید لاراول شروع خواهیم کرد. پس از آن ، ما به طور تدریجی تمام وابستگی های لازم NPM را ترسیم می کنیم و ساختار پایه را برای وب سایت "assets" خود می سازیم.

در این قسمت ، طرح اصلی وب سایت "assets" خود را می سازیم. برای ساده سازی این روند ، Tailwind را کشیده و آن را به my Laravel Mix build اضافه می کنم. پس از نصب ، می توانیم خیلی سریع طرح اصلی سایت را آماده کنیم.

ما رویکرد one-component در هر صفحه این وب سایت می خواهیم. این بدان معنی است که برای هر لینک در sidebar ، باید یک کامپوننت Vue کنار آن ایجاد کنیم. پس از اتمام ، ما نحوه استفاده از یک ظاهر طراحی شده "Active Link" را در صفحه انتخابی فعلی بررسی خواهیم کرد.

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

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

برای بهبود عملکرد ، هر route را با استفاده از کامپوننت های async در Vue's و ویژگی code-splitting در webpack's میتوان lazily-loaded کرد. بیایید آن را خراب کنیم و دقیقاً بررسی کنیم چه زمانی و چرا ممکن است بارگیری مسیرهای خاص را در برنامه خود lazily-loaded کنید.

به دلیل نگرانی های امنیتی ، تهیه درخواست AJAX متشکل از مجموعه ای از داده ها همیشه آسان نیست. اما ، شما اغلب با عنوان No 'Access-Control-Allow-Origin' در پاسخ به منبع درخواستی خودتون مواجه می شوید.بیایید در مورد اینکه این عنوان چیست و چگونه می توانیم آن را اصلاح کنیم بحث کنیم.

اکنون که یاد گرفتید که چگونه درخواست های AJAX را با cross-origin انجام دهید ، به مرحله بعدی بروید: API authentication. در این قسمت ما برای دستیابی به داده های یک کاربرخاص از سرور از یک رویکرد token-based استفاده می کنیم .

بیایید در مورد چگونگی تولید hashed API tokens که لاراول می تواند آن را متقابلا تأیید کند بحث کنیم.

هر پلتفرم third party برای تخصیص API tokens به کاربران نباز به ابطال و تولید API tokens های جدید دارد.