با Laravel و Vue یک برنامه وب مدرن بسازید - قسمت 4: ایجاد برنامه های Vue در Laravel

در آخرین مقاله آموزش لاراول، ما در مورد چگونگی ایجاد API endpoint ها در یک برنامه لاراول صحبت کردیم. ما همچنین ادغام تست ها در برنامه را بررسی کردیم..

در این آموزش از سری مقالات آموزش laravel، ما قصد داریم به بررسی frontend برنامه خود را با استفاده از Vue بپردازیم. امروزه بسیار معمول است که برنامه های وب به صورت جداگانه front و backend دارند. بنابراین بیایید روش های مختلفی را که می توانیم یک برنامه Vue را در لاراول بسازیم بررسی کنیم و ببینیم چگونه با هم ارتباط دارند.

پیش نیازها

برای یادگیری این فصل شما نیاز دارید به:

  • دانش پایه VueJS
  • دانش پایه لاراول.
  • قسمت 1 - 3 این مجموعه آموزشی کامل مطالعه شده باشد.

روش های مختلف برای Vue

روش های مختلفی وجود دارد که می توانیم از Vue با لاراول استفاده کنیم. ما می توانیم یک برنامه مستقل Vue ،Single Page Application را ایجاد کنیم و از لاراول API endpoint ها را ارائه دهیم، یا می توانیم Vue component را به عنوان برنامه های چند صفحه ای در Laravel blade template ها ادغام کنیم. هر روشی را که انتخاب کنید به شما و شرایط بستگی دارد.

برنامه های تک صفحه (SPA)

SPA ها داخل یک مرورگر کار می کنند و برای reload نیازی به صفحه ندارند. آنها یک تجربه کاربری فوق العاده ایجاد می کنند و می توانند برنامه هایی را که می توانید روی دیوایس خود نصب کنید شبیه سازی کنند. نکته اصلی که باید به آن توجه کنید این است که آنها داده ها و markup را به طور مستقل لود می کنند.

این بدان معنی است که SPA برای تغییر محتوای صفحه، هرگز reload نمی شود، بلکه داده ها را با استفاده از JavaScript واکشی می کند. اگرچه SPA سریع است و پس از لود به حداقل دسترسی به اینترنت نیاز دارد، اما در رتبه بندی جستجو خیلی خوب عمل نمی کند و معمولاً بهینه سازی اضافی برای سئو نیاز دارد.

 SPA در اولین فراخوانی با برنامه شما لود می شود، سپس در ادامه استفاده از برنامه با کمک vue-router، صفحات مختلف را عوض کنید. هنگام نصب کامپوننت ها  از طریق فراخوانی backend API، تمام داده های مورد نیاز برای هر صفحه لود می شود.

برنامه های چند صفحه ای (MPA)

MPA به روشی سنتی است که برای برنامه های وب سالها ساخته شده اند. آنها معمولاً هر بار که داده ها نیاز به تغییر یا درخواست resource جدید دارند، مرورگر را reload می کنند. مطمئناً می توانید از AJAX برای ساده سازی برخی عملیات MPA و کاهش reload صفحه استفاده کنید.

MPA در هنگام سئو از اهمیت برخوردار است زیرا به طور پیش فرض crawlable است. بر خلاف SPA، برای MPA crawlable نیازی به کار خاصی نیست. شما فقط باید این صفحات را همانطور که هست استفاده کنید و توسط search engine ها crawlable می شود مگر اینکه صریحاً گفته شود که این کار را نکنید.

هنگام استفاده از Vue در Laravel MPA، کامپوننت های Vue خود را مستقیماً در فایل blade قرار دهید. می توانید داده ها را به عنوان props به کامپوننت ارسال کنید. این صفحه و asset های آن را مختل نمی کند و به راحتی می توانید CSS و JS خود را علاوه بر Vue نیز داشته باشید.

ساخت یک برنامه standalone Vue

برای شروع کار با Vue، باید یک برنامه Vue جدید ایجاد کنید. برای انجام این کار، ما به Vue-CLI نیاز داریم که ابزار command-line است و می توانیم از آن برای بستن برنامه های جدید Vue استفاده کنیم. برای استفاده از vue-cli جهت راه اندازی یک پروژه standalone، ترمینال خود را باز کرده و دستور زیر را اجرا کنید:

    $ npm install --global vue-cli

وقتی vue-cli نصب شد، می توانید با اجرای دستور زیر یک برنامه standalone Vue ایجاد کنید:

    $ vue init webpack my-new-app

اگرچه ما از built-in Laravel installation استفاده می کنیم، نیازی به این کار نخواهیم داشت.

webpack در دستور بالا template یی را که می خواهیم استفاده کنیم مشخص می کند. پروژه های Vue را می توان با template های مختلف انجام داد.

دستور بالا با استفاده از webpack template یک پروژه جدید Vue ایجاد می کند. از اینجا می توانید ساخت برنامه Vue خود را شروع کنید.

ادغام Vue-Laravel

لاراول از قبل با Vue پکیج شده است، این بدان معناست که شما نیازی به استفاده از Vue-CLI ندارید، مخصوصاً اگر می خواهید برنامه خود را با یک single codebase بسازید. در نصب جدید لاراول، می توانید با مراجعه به دایرکتوری resources/assets/js/components، فایل های Vue را مشاهده کنید.

راه اندازی Vue-Router

پکیج های زیادی وجود دارد که با Vue کار می کنند و در صورت نیاز به افزودن موارد بیشتر، همیشه می توانید آنها را با استفاده از NPM نصب کنید. پکیج های نصب شده در یک فایل package.json ذخیره می شوند و این همراه با نصب لاراول است.

ابتدا ماژول های از پیش تعریف شده را در فایل package.json نصب کنید:

    $ npm install

پس از نصب ماژول ها، می توانیم vue-router را با دستور زیر نصب کنیم:

    $ npm install vue-router

پس از اتمام نصب، فایل resources/assets/js/app.js خود را باز کنید و محتوای آن را با کد زیر جایگزین کنید:

    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    import App from './views/App'
    import Welcome from './views/Welcome'

    const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/',
                name: 'home',
                component: Welcome
            },
        ],
    });

    const app = new Vue({
        el: '#app',
        components: { App },
        router,
    });

در بالا، ما VueRouter را ایمپورت کردیم و آن را به برنامه Vue اضافه کردیم.  route هایی را برای برنامه خود مشخص کردیم و سپس آن را در Vue instance رجیستر کردیم تا در دسترس تمام کامپوننت های Vue قرار گیرد.

VueRouter constructor  آرایه ای از route ها را می گیرد. در آن ما URL روت، نام روت و کامپوننت مورد استفاده برای انجام درخواست های route را تعریف می کنیم.

بعد، ما باید روت برنامه Vue خود را ایجاد کنیم. برای لود برنامه از Laravel web route استفاده خواهیم کرد و vue router بقیه را از آنجا می گیرد. فایل routes/web.php خود را باز کرده و روت زیر را قبل از default route اضافه کنید:

    Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');

همچنین برای رسیدگی به درخواست ها باید SpaController ایجاد کنیم. دستور زیر را اجرا کنید:

    $ php artisan make:controller SinglePageController

پس از ایجاد، به دایرکتوری برنامه /Http/Controller خود بروید و فایل SinglePageController.php را باز کرده و متد زیر را به کلاس اضافه کنید:

    [...]

    public function index()
    {
        return view("landing");
    }

    [...]

در مرحله بعدی، بیایید فایل landing view را ایجاد کنیم. فایل resources/views/landing.blade.php را ایجاد کنید و کد زیر را اضافه کنید:

در کد بالا، ما فقط HTML را برای برنامه خود داریم. اگر به دقت نگاه کنید، می توانید تگ app را مشاهده کنید. این نقطه ورود به برنامه Vue ما و جایی است که App component در آن لود می شود.

سپس، فایل webpack.mix.js را ویرایش کنیم تا asset های ما را کامپایل کند. mix declaration های موجود در فایل را با دستورات زیر آپدیت کنید:

    [...]

    mix.js('resources/assets/js/app.js', 'public/js')
       .js('resources/assets/js/bootstrap.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');

فایل webpack.mix.js فایل های پیکربندی laravel-mix را در خود جای داده است که یک پوشش اطراف Webpack فراهم می کند. این به ما امکان می دهد بدون نیاز به نوشتن تنظیمات Webpack توسط خود، از قابلیت های webpack asset بهره ببریم.

اکنون، اجازه دهید یک صفحه welcome ساده برای برنامه Vue خود تنظیم کنیم. یک فایل، resources/assets/js/views/Welcome.vue جدید ایجاد کنید و کد زیر را به فایل اضافه کنید:

 task planner

کد بالا در تگ های template ،کامپوننت Vue ما را تعریف می کند. در همان فایل، کد زیر را برای بسته شدن تگ template اضافه کنید:

در کد بالا، ما style  را برای استفاده با welcome component تعریف کرده ایم.

وقتی تگ <‌style‌> دارای ویژگی scoped باشد، CSS آن فقط برای عناصر component فعلی اعمال خواهد شد. این شبیه به style encapsulation موجود در Shadow DOM است.

    <‌script‌>
    export default {}
    <‌/‌script‌>

از آنجا که کامپوننت ما نیازی به scripting logic ندارد، ما آن را خالی می گذاریم.

سپس یک فایل دیگر، resources/assets/js/views/App.vue ایجاد کنید. این برنامه خواهد بود

کانتینر و سایر کامپوننت ها با استفاده از vue-router در این کانتینر لود می شوند. در این فایل، کد زیر را اضافه کنید:

همانطور که قبلاً گفتیم، تگ template ،برای کامپوننت ما HTML را در خود نگه می دارد. با این حال، ما در کد بالا از برخی از تگ های خاص Vue مانند router-link استفاده کردیم، که به ما کمک می کند لینک هایی را برای روتینگ به صفحات تعریف شده در روتر خود ایجاد کنیم. ما همچنین دارای router-view هستیم، جایی که تمام صفحات child component در آن لود  می شوند.

از آنجا که ما به اسکریپت نویسی در این صفحه نیز نیازی نداریم، دستورات زیر را به فایل اضافه کنید:

    <‌script‌>
    export default {}
    <‌/‌script‌>

اکنون، برنامه Vue را با دستور زیر بسازید:

    $ npm run dev

این کلیه js asset های ما را کامپایل و در داخل فولدر public/js قرار می دهد. برای تست برنامه و دیدن آنچه که توانسته ایم به دست آوریم، دستور php artisan serve را همانطور که قبلاً انجام داده ایم، اجرا کنید.

    $ php artisan serve

هنگام بازدید از صفحه باید چیزی شبیه به این را ببینید:

Treclon Preview

احراز هویت

مانند بیشتر برنامه های وب، authentication مهم است. ما در قسمت های قبلی در مورد احراز هویت بحث کردیم و endpoint ها را برای authentication کاربران تنظیم کردیم. در قسمت بعدی و نهایی، ما خواهیم دید که چگونه از صفحاتی که نمی خواهیم کاربران غیرمجاز تأیید شوند، محافظت کنیم و چگونه درخواست های تأیید شده را به API ارائه دهیم.

نتیجه

در این مقاله از سری آموزش های لاراول، ما اصول ساخت یک برنامه standalone ساده با Vue-CLI و همچنین چگونگی ساخت همان را با استفاده از built-in integration لاراول بررسی کرده ایم. در آموزش بعدی، ما به ساخت برنامه Treclon خود ادامه خواهیم داد.

× در حال پاسخ به: