[ Laravel & Vue.js ] 12.Video: Vue.js içerisinde AJAX ile CRUD işlemleri ve AXIOS'un kullanımı.



4 dakikalık okuma
April 25, 2019

Bu videoda:

  • Laravel, Vue.js ile ajax,crud işlemleri nasıl yapılır?
  • Axios javascript modülünün Vue.js içerisinde detaylı kullanımı

anlatıldı.

Buyrun videomuz da burada:


Video Özeti

Vue.js içerisinde AJAX kullanımı ve AXIOS javascript modülünün tanıtımı

Vue.js içerisinde Javascript dünyasında çok popüler olan Axios modülünü kullanacağız. Jquery AJAX ve Vue resource’ın sağladığı http client’ini kullanmayacağız.

Böylece axios ile Laravel içerisinde CRUD işlemlerini yapmayı da göstereceğim. Laravel içerisinde axios modülü hazır olarak gelmektedir. Bizlerin npm ile javascript bağımlı paketlerini yüklemek haricinde ek bir şey yapmamıza gerek yoktur.

Sadece CSRF güvenliğinden dolayı post metodunun Laravel içerisinde düzgün çalışıp çalışmadığı ile ilgili bir kaç şeyin ayarlı olduğuna emin olmalıyız, bu kadar!

Laravel CSRF meta tag kontrolü ve eksikse ekleme

Laravel ana dizini içerisinde resources > js > bootsrap.js dosyasının aşağıdaki gibi içini açalım:

Csrf token

Sonra Laravel ana dizini içerisinde resources > views klasörü içerisinde bulunan master page’imizi açıp kontrol ediyoruz. Aşağıda default olarak gelen Welcome.blade.php dosyasını master page kabul ederek onun içini açıyorum.

Csrf token kontrol

Eğer yoksa <meta name="csrf-token" content="{{ csrf_token() }}"> tagını master page’imize ekliyoruz.

AXIOS Kullanımı

2 tür kullanımı var. Hangisinde rahat hissediyorsanız onu kullanın:

1. Tür Kullanımı:

 axios({
       url   : 'https://www.xxx.com/api/xxxx',
       method: 'get’,  
     //responseType: 'json', //default. Values can be blob,document,text,stream    
     // config: { headers: {'Content-Type': 'multipart/form-data’ }},

       params  : {     // method post olsaydı burayı data: {} şeklinde kullanacaktık.
                foo: 'bar'   
            }

        }).then(function (response) {

            //başarıyla gerçekleştiğinde sonucu buradan alıyoruz.
            // response.data ile

        }).catch(function (error) {

           // hata olduğunda burada yakalıyoruz.

            console.log(error)

        }).then(function () {

            //burası en sonda daima çalıştırılacak alan.

        });

2. Tür Kullanımı:


axios.get(‘user/show’, { params: { foo: ‘bar’ } }) axios.post(‘url’, { foo: ‘bar’ }); axios.put(‘url’, { foo: ‘bar’ }); axios.delete(‘url’, { foo: ‘bar’ }); axios.patch(‘url’, { foo: ‘bar’ });

Birinci örnekte olduğu gibi yukarıdaki AXIOS kısa kullanım isimlerini de şöyle kullanabiliriz:


axios.get(‘user/show’, { params: { foo: ‘bar’ } }).then(function (response) { //başarıyla gerçekleştiğinde sonucu buradan alıyoruz. // response.data }).catch(function (error) { // hata olduğunda burada yakalıyoruz. console.log(error) }).then(function () { //burası en sonda daima çalıştırılacak alan. });

Basit bir örnek yapalım:

Daha iyi anlaşılması için çok basit bir örnek yapalım.

1.ADIM:

resources > js > app.js içerisinde şöyle yapalım:

var app = new Vue({
    el: '#app',


    methods: {
        get_data: function () {

            axios({
                url   : '/show',
                method: 'post',
                data  : {
                    id: 13
                }
            }).then(function (response) {
                alert(response.data.isim + ' ' + response.data.sifre + ' ' + response.data.gelen_id);
            }).catch(function (error) {
                console.log(error)
            }).then(function () {
                //always executed
            });
        }
    }


});

2.ADIM:

resources > view > welcome.blade.php sayfasını açıp şunları yazalım:

<div id="app">

    <div class="container mt-3">

        <div class="row">
            <div class="col-md-12">

                <button v-on:click=" get_data(); ">Click me</button>


            </div>
        </div>

    </div>
</div>

3.ADIM:

routes > web.php dosyasını açıp rotamızı oluşturalım:

use Illuminate\Http\Request;

Route::post('/show', function (Request $request) {
    return response()->json(['isim'  => 'burhan',
                             'sifre' => 1234,
                             'gelen_id' => $request->input('id')], 200);
});

Çıktı:

AJAX çıktısı

Axios ile başarılı olarak gelen veriden bilgi edinme

            axios({
                url   : '/show',
                method: 'post',
                data  : {
                    id: 13
                }
            }).then(function (response) {
                alert(response.data.isim + ' ' + response.data.sifre + ' ' + response.data.gelen_id);
            }).catch(function (error) {
                console.log(error)
            }).then(function () {
                //always executed
            });

Şimdi yukarıda başarı ile gerçekleşen istekten sonra gelen veriyi response.data ile alacağımızı belirtmiştik. Peki istek sonucu sunucunun yolladığı status bilgisini almak için ne yapacağız? Şöyle yapacağız:

.then(function (response) {
             // başarı ile istek gerçekleştiğinde buradaki kodlar çalışacak.
             // response.
            })


response.status
response.statusText
response.headers

Aynı şekilde hata yakaladığımızda da bu şekilde status durumu ve status mesajını alabiliriz. Şöyle:

.catch(function (error) {
                console.log(error)
            })

error.request
error.message
error.response
error.response.data
error.response.status
error.response.statusText
error.response.headers

Etiketler: