استفاده از VueJS و جی کوئری برای حذف یک پاسخ در لاراول

در این آموزش از لیداوب به بررسی نحوه استفاده از VueJS به همراه جی کوئری در لاراول خواهیم پرداخت. با ما همراه باشید.

در این مقاله، می‌توانیم فرم پاسخ را به یک کامپوننت Vue تبدیل کنیم، می‌توانیم بر روی آن کامپوننت پاسخ ایجاد کنیم و تابع delete را نیز به نسخه ajax تبدیل کنیم. علاوه بر این، می‌توانیم به طور همزمان از جی کوئری و VueJS nv در لاراول برای افزودن اکشن‌هایی از نوع انیمیشن جی کوئری به کامپوننت خود استفاده کنیم. نتیجه نهایی باید پاسخی باشد که بدون رفرش صفحه برای کاربر نهایی، حذف شود.

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

تابع delete خوب است اما ترجیح می‌دهیم از ajax و کامپوننت Vue خود برای ایجاد افکت زمان واقعی (real time) در صفحه استفاده کنیم. هنگام جستجوی JavaScript، ما از یک فرم کامل html با دکمه‌ای که داخل ajax قرار دارد برای تکمیل تابع delete به صورت زیر استفاده می‌کنیم.

reply.blade.php

<div class="panel-footer level">
    <button @click="editing = true" class="btn btn-xs mr-1">Edit</button>
    <form method="POST" action="/replies/{{$reply->id}}">
        {{ csrf_field() }}
        {{ method_field('DELETE') }}
        <button class="btn btn-danger btn-xs">Delete Reply</button>
    </form>
</div>

با کمی کار روی  Vue خود و مرتب کردن برخی از متدهای destroy()  روی   RepliesController، می‌توانیم از این کد ساده برای دکمه delete در ویوی خود استفاده کنیم.

<div class="panel-footer level">
    <button @click="editing = true" class="btn btn-xs mr-1">Edit</button>
    <button @click="destroy" class="btn btn-xs btn-danger mr-1">Delete</button>
</div>

اضافه کردن متد ()destroy

باید یک متد destroy()  را به نمونه Vue خود اضافه کنیم زیرا می‌خواهیم با کلیک بر روی دکمه حذف، این متد را اجرا کنیم. هنگامی که ما از یک صفحه با کامپوننت پاسخ بازدید می‌کنیم، با خطای زیر مواجه می‌شویم:

“[Vue warn]: Property or method “destroy” is not defined on the instance but referenced during render.Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.”

توجه کنید که خصوصیت یا متد destroy تعریف نشده است اما در هنگام رندر به ajax مراجعه می‌شود. می‌توانید با تنظیم اولیه این خاصیت، در گزینه داده یا برای کامپوننت‌های مبتنی بر کلاس، این خاصیت را فعال کنید.

راه اندازی Watcher

اکنون می‌خواهیم کار خود را با کامپوننت Vue شروع کنیم، بنابراین باید فایل Watcher را بوت کنیم. ما ajax را با yarn run watch-poll  اجرا می‌کنیم.

بروزرسانی Reply.vue

در اینجا ما متد destroy()  را به نمونه Vue خود اضافه می‌کنیم.  

<script>
    export default {
        props: ['attributes'],

        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },

        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });
                this.editing = false;
                flash('Updated!');
            },

            destroy() {
                axios.delete('/replies/' + this.attributes.id);
                flash('Your reply is now deleted!');
            }
        }
    };
</script>

 تلاش برای حذف یک پاسخ در واقع اکنون خود موضوع را حذف می‌کند. متد destroy()  در RepliesController باید اصلاح شود.

()expectsJson در متد‌های کنترلر

از آنجا که فرم را در ویو حذف کرده‌ایم و اکنون درخواست ajax را به سرور ارسال می‌کنیم، متد رسیدگی به درخواست ajax برای کنترل به این عمل نیاز به بروزرسانی دارد.

public function destroy(Reply $reply)
{
    $this->authorize('update', $reply);

    $reply->delete();

    //  if there is an ajax request, do not redirect
    if (request()->expectsJson()) {
        return response(['status' => 'Reply deleted']);
    }

    return back();
}

اکنون این متد می‌تواند تعیین کند که ajax در اینجا وجود دارد یا خیر. اگر وجود داشته باشد، بلافاصله و بدون تغییر مسیر بازمی‌گردیم. همچنین یک پاسخ وضعیت پاسخ حذف شده یا Reply deleted را ارسال می‌کنیم. به نظر می رسد که تست این مورد در مرورگر، این مسئله را ثابت کرده است، همانطور که در اینجا می‌بینیم. ما بر روی دکمه delete کلیک می‌کنیم و هنگامی که عناوین (headers) را بازرسی می‌کنیم، می‌بینیم که درخواست DELETE به http://forum.io/replies/6 داده شده است و وضعیت 200 خوب است. با کلیک بر روی تب response  پیام {“status”:”Reply deleted”} را نشان می‌دهد.

مواقعی وجود دارد که شما فقط می‌خواهید یک لاینر (liner) ساده برای بروزرسانی چیزی در صفحه انجام دهید. برای این نوع کارها، جی کوئری هنوز سخت است. در حال حاضر، هنگامی که دکمه delete کلیک شد، پاسخ از پایگاه داده حذف می‌شود. از آنجا که حذف از طریق ajax انجام شد بارگذاری مجدد صفحه وجود ندارد. بنابراین، این پاسخ هنوز در صفحه است. در حالت ایده‌آل، پس از حذف باید واقعاً از بین برود. برای رفع این مشکل می‌توانیم متد destroy()  را در نمونه Vue بروزرسانی کنیم. کد هایلایت شده در طی 1 ثانیه عنصر را محو می‌کند. سپس یک یک بار کامل پیام فلش را راه‌اندازی کنید.

<script>
    export default {
        props: ['attributes'],

        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },

        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });
                this.editing = false;
                flash('Updated!');
            },

            destroy() {
                axios.delete('/replies/' + this.attributes.id);

                $(this.$el).fadeOut(1000, () => {
                    flash('Your reply is now deleted!');
                });
            }
        }
    };
</script>

حفاظت CSRF 

از آنجایی که ما فرمی را که حاوی نشانه CSRF برای محافظت است، نداریم، آیا استفاده از ajax ایمن است؟ لاراول در فایل bootstrap.js از این موضوع پشتیبانی کرده است. می‌توانید این فایل را بررسی کنید تا متوجه شوید که دقیقا چه اتفاقی رخ می‌دهد.

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

برای یادگیری بیشتر لاراول با ما در لیداوب همراه باشید.